diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index a051c2af74..2cf07fcce1 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -66,5 +66,4 @@
             </mct-representation>
         </div>
     </div>
-    <mct-include key="'conductor'" class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder"></mct-include>
 </div>
diff --git a/src/MCT.js b/src/MCT.js
index 1fa9b66ace..ed16d5d8a8 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -31,7 +31,6 @@ define([
     './plugins/plugins',
     './adapter/indicators/legacy-indicators-plugin',
     './plugins/buildInfo/plugin',
-    './adapter/vue-adapter/install',
     './ui/registries/ViewRegistry',
     './ui/registries/InspectorViewRegistry',
     './ui/registries/ToolbarRegistry',
@@ -51,7 +50,6 @@ define([
     plugins,
     LegacyIndicatorsPlugin,
     buildInfoPlugin,
-    installVueAdapter,
     ViewRegistry,
     InspectorViewRegistry,
     ToolbarRegistry,
@@ -336,8 +334,6 @@ define([
                 });
                 domElement.appendChild(appLayout.$mount().$el);
 
-                console.log('Attaching adapter');
-                installVueAdapter(appLayout, this);
 
                 this.router.start();
                 this.emit('start');
diff --git a/src/adapter/vue-adapter/inspector-adapter.js b/src/adapter/vue-adapter/inspector-adapter.js
deleted file mode 100644
index aba93287b4..0000000000
--- a/src/adapter/vue-adapter/inspector-adapter.js
+++ /dev/null
@@ -1,41 +0,0 @@
-define([
-
-], function (
-
-) {
-
-    class InspectorAdapter {
-        constructor(layout, openmct) {
-            console.log('installing inspector adapter');
-
-            this.openmct = openmct;
-            this.layout = layout;
-            this.$injector = openmct.$injector;
-            this.angular = openmct.$angular;
-
-            this.objectService = this.$injector.get('objectService');
-            this.templateLinker = this.$injector.get('templateLinker');
-            this.$timeout = this.$injector.get('$timeout');
-
-            this.templateMap = {};
-            this.$injector.get('templates[]').forEach((t) => {
-                this.templateMap[t.key] = this.templateMap[t.key] || t;
-            });
-
-            var $rootScope = this.$injector.get('$rootScope');
-            this.scope = $rootScope.$new();
-
-            this.templateLinker.link(
-                this.scope,
-                angular.element(layout.$refs.inspector.$refs.properties),
-                this.templateMap["inspectorRegion"]
-            );
-            this.$timeout(function () {
-                //hello!
-            });
-        }
-    }
-
-    return InspectorAdapter;
-
-});
diff --git a/src/adapter/vue-adapter/install.js b/src/adapter/vue-adapter/install.js
deleted file mode 100644
index ac56421446..0000000000
--- a/src/adapter/vue-adapter/install.js
+++ /dev/null
@@ -1,16 +0,0 @@
-define([
-    './main-adapter',
-    './tree-adapter',
-    './inspector-adapter'
-], function (
-    MainAdapter,
-    TreeAdapter,
-    InspectorAdapter
-) {
-
-    return function install(layout, openmct) {
-        let main = new MainAdapter(layout, openmct);
-        let tree = new TreeAdapter(layout, openmct);
-        let inspector = new InspectorAdapter(layout, openmct);
-    }
-});
diff --git a/src/adapter/vue-adapter/main-adapter.js b/src/adapter/vue-adapter/main-adapter.js
deleted file mode 100644
index 4ff6fc2767..0000000000
--- a/src/adapter/vue-adapter/main-adapter.js
+++ /dev/null
@@ -1,153 +0,0 @@
-define([
-
-], function (
-
-) {
-
-    // Find an object in an array of objects.
-    function findObject(domainObjects, id) {
-        var i;
-        for (i = 0; i < domainObjects.length; i += 1) {
-            if (domainObjects[i].getId() === id) {
-                return domainObjects[i];
-            }
-        }
-    }
-
-    // recursively locate and return an object inside of a container
-    // via a path.  If at any point in the recursion it fails to find
-    // the next object, it will return the parent.
-    function findViaComposition(containerObject, path) {
-        var nextId = path.shift();
-        if (!nextId) {
-            return containerObject;
-        }
-        return containerObject.useCapability('composition')
-            .then(function (composees) {
-                var nextObject = findObject(composees, nextId);
-                if (!nextObject) {
-                    return containerObject;
-                }
-                if (!nextObject.hasCapability('composition')) {
-                    return nextObject;
-                }
-                return findViaComposition(nextObject, path);
-            });
-    }
-
-    function getLastChildIfRoot(object) {
-        if (object.getId() !== 'ROOT') {
-            return object;
-        }
-        return object.useCapability('composition')
-            .then(function (composees) {
-                return composees[composees.length - 1];
-            });
-    }
-
-    function pathForObject(domainObject) {
-        var context = domainObject.getCapability('context'),
-            objectPath = context ? context.getPath() : [],
-            ids = objectPath.map(function (domainObj) {
-                return domainObj.getId();
-            });
-        return  "/browse/" + ids.slice(1).join("/");
-    }
-
-    class MainAdapter {
-        constructor(layout, openmct) {
-            this.openmct = openmct;
-            this.layout = layout;
-            this.$injector = openmct.$injector;
-            this.angular = openmct.$angular;
-
-            this.objectService = this.$injector.get('objectService');
-            this.templateLinker = this.$injector.get('templateLinker');
-            this.navigationService = this.$injector.get('navigationService');
-            this.$timeout = this.$injector.get('$timeout');
-
-            this.templateMap = {};
-            this.$injector.get('templates[]').forEach((t) => {
-                this.templateMap[t.key] = this.templateMap[t.key] || t;
-            });
-
-            var $rootScope = this.$injector.get('$rootScope');
-            this.scope = $rootScope.$new();
-            this.scope.representation = {};
-
-            openmct.router.route(/^\/browse\/(.*)$/, (path, results) => {
-                let navigatePath = results[1];
-                if (!navigatePath) {
-                    navigatePath = 'mine';
-                }
-                this.navigateToPath(navigatePath);
-            });
-
-            this.navigationService.addListener(o => this.navigateToObject(o));
-        }
-
-        navigateToPath(path) {
-            if (!Array.isArray(path)) {
-                path = path.split('/');
-            }
-            return this.getObject('ROOT')
-                .then(root => {
-                    return findViaComposition(root, path);
-                })
-                .then(getLastChildIfRoot)
-                .then(object => {
-                    this.setMainViewObject(object);
-                });
-        }
-
-        setMainViewObject(object) {
-            this.scope.domainObject = object;
-            this.scope.navigatedObject = object;
-            this.templateLinker.link(
-                this.scope,
-                angular.element(this.layout.$refs.mainContainer),
-                this.templateMap["browseObject"]
-            );
-            document.title = object.getModel().name;
-            this.scheduleDigest();
-        }
-
-        idsForObject(domainObject) {
-            return this.urlService
-                .urlForLocation("", domainObject)
-                .replace('/', '');
-        }
-
-        navigateToObject(object) {
-            let path = pathForObject(object);
-            let views = object.useCapability('view');
-            let params = this.openmct.router.getParams();
-            let currentViewIsValid = views.some(v => v.key === params['view']);
-            if (!currentViewIsValid) {
-                this.scope.representation = {
-                    selected: views[0]
-                }
-                this.openmct.router.update(path, {
-                    view: views[0].key
-                });
-            } else {
-                this.openmct.router.setPath(path);
-            }
-        }
-
-        scheduleDigest() {
-            this.$timeout(function () {
-                // digest done!
-            });
-        }
-
-        getObject(id) {
-            return this.objectService.getObjects([id])
-                .then(function (results) {
-                    return results[id];
-                });
-        }
-    }
-
-    return MainAdapter;
-});
diff --git a/src/adapter/vue-adapter/tree-adapter.js b/src/adapter/vue-adapter/tree-adapter.js
deleted file mode 100644
index 8f490d3ed6..0000000000
--- a/src/adapter/vue-adapter/tree-adapter.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define([
-
-], function (
-
-) {
-
-    class TreeAdapter {
-        constructor(layout, openmct) {
-
-        }
-    }
-
-    return TreeAdapter;
-
-});
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index 2ae6b0a233..51659d5e4a 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -12,6 +12,7 @@
 }
 
 // Global
+$fontBaseSize: 13px;
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
 $colorGenBg: #fff;
@@ -19,6 +20,7 @@ $colorStatusBarBg: #000;
 $colorStatusBarFg: #999;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
+$colorKeyFilter: brightness(0.9) sepia(1) hue-rotate(145deg) saturate(6);
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorKeyHov: #00c0f6;
@@ -36,7 +38,8 @@ $overlayCr: 11px;
 $shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
 
 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$btnPad: $interiorMargin, $interiorMargin * 1.25;
+$colorBtnBg: #aaaaaa;
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnFgHov: $colorBtnFg;
@@ -90,17 +93,18 @@ $colorTick: rgba(black, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
 $colorSelectableHov: rgba($colorBodyFg, 0.4);
 
-// Menu colors
+// Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
-$colorMenuHovFg: $colorMenuFg;
-$colorMenuHovIc: $colorMenuIc;
+$colorMenuHovBg: $colorMenuIc; //pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuHovFg: $colorMenuBg;
+$colorMenuHovIc: $colorMenuBg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
 $colorCreateMenuLgIcon: $colorKey;
 $colorCreateMenuText: $colorBodyFg;
+$menuItemPad: ($interiorMargin, nth($btnPad, 2));
 
 // Form colors
 $colorCheck: $colorKey;
@@ -245,7 +249,7 @@ $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
 $colorSplitterActive: $colorKey;
-$splitterBtnD: (16px, 35px);
+$splitterBtnD: (16px, 35px); // height, width
 $splitterBtnColorBg: #eee;
 $splitterBtnColorFg: #999;
 $splitterBtnColorHoverBg: rgba($colorKey, 1);
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index ec738401b9..eb73a6fc60 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -15,6 +15,7 @@ $interiorMarginLg: 10px;
 $inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
 $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+$menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
 
@@ -144,4 +145,38 @@ $glyph-icon-timer: '\e1127';
 $glyph-icon-topic: '\e1128';
 $glyph-icon-box-with-dashed-lines: '\e1129';
 $glyph-icon-summary-widget: '\e1130';
-$glyph-icon-notebook: '\e1131';
\ No newline at end of file
+$glyph-icon-notebook: '\e1131';
+
+/************************** GLYPHS AS DATA URI */
+// Only objects have been converted, for use in Create menu and folder views
+$bg-icon-activity: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
+$bg-icon-activity-mode: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
+$bg-icon-autoflow-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
+$bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm135 345a36 36 0 0 1-31.21 18 35.83 35.83 0 0 1-18-4.83l-110.85-64-.14-.08q-.6-.35-1.19-.73l-.43-.28-.93-.64-.63-.45-.63-.48-.85-.67-.32-.27c-.36-.3-.72-.61-1.07-.92a35.76 35.76 0 0 1-6.52-7.9c-.14-.23-.27-.47-.41-.7s-.29-.49-.43-.74a35.75 35.75 0 0 1-3.58-9.59v-.06c-.1-.46-.19-.92-.27-1.38 0-.14-.05-.28-.08-.42-.06-.35-.11-.71-.15-1.07s-.07-.52-.1-.79-.05-.51-.07-.77l-.09-1.12v-.52-1.39V81a36 36 0 0 1 36-36 36 36 0 0 1 36 36v161.22l92.85 53.61A36 36 0 0 1 391 345z' fill='%2300a14b'/%3e%3c/svg%3e");
+$bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23666666' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
+$bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
+$bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
+$bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
+$bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23666666' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
+$bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
+$bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
+$bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23666666' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
+$bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
+$bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23666666' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23666666' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
+$bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23666666' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
+$bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23666666' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23666666' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23666666' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
+$bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23666666' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
+$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
+$bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
+$bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
+$bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
+$bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23666666' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
+$bg-icon-box-with-dashed-lines: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
+$bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
+$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss
index e69de29bb2..91a76217d3 100644
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@@ -0,0 +1,251 @@
+/**************************** BUTTONS */
+%c-control {
+    @include userSelectNone();
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    cursor: pointer;
+
+    &:before,
+    &:after {
+        font-family: symbolsfont;
+        display: block;
+        flex: 0 0 auto;
+    }
+
+    &:before {
+        font-size: 0.8em;
+    }
+
+    &:after {
+        font-size: 0.6em;
+    }
+
+}
+
+%c-button {
+    @extend %c-control;
+    background: $colorBtnBg;
+    border-radius: $controlCr;
+    color: $colorBtnFg;
+    padding: nth($btnPad, 1) nth($btnPad, 2);
+
+    &:hover {
+        background: $colorBtnBgHov;
+        color: $colorBtnFgHov;
+    }
+
+    &[class*="--major"] {
+        background: $colorBtnMajorBg;
+        color: $colorBtnMajorFg;
+
+        &:hover {
+            background: $colorBtnMajorBgHov;
+            color: $colorBtnMajorFgHov;
+        }
+    }
+}
+
+/********* Buttons */
+// Optionally can include icon in :before
+.c-button {
+    @extend %c-button;
+}
+
+/********* Icon Buttons */
+.c-icon-button {
+    // A clickable element that just includes the icon, no background
+    // Padding is included to facilitate a bigger hit area
+    @extend %c-control;
+    border-radius: $controlCr;
+    color: $colorKey;
+    padding: nth($btnPad, 1) floor(nth($btnPad, 2) * 0.8);
+
+    &:hover {
+        background: rgba($colorKey, 0.2);
+    }
+
+    &:before {
+        font-size: 1.1em;
+    }
+}
+
+/********* Button Sets */
+.c-button-set {
+    // Buttons are smashed together with minimal margin
+    // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+    // c-icon-buttons get grouped more closely together
+    // When one set is adjacent to another, provides a divider between
+
+    display: flex;
+
+    > * {
+        // Assume buttons are immediate descendants
+        flex: 0 0 auto;
+
+        &[class^="c-button"] {
+            // Only apply the following to buttons that have background, eg. c-button
+            border-radius: 0;
+
+            + * {
+                margin-left: 1px;
+            }
+
+            &:first-child {
+                border-top-left-radius: $controlCr;
+                border-bottom-left-radius: $controlCr;
+            }
+
+            &:last-child {
+                border-top-right-radius: $controlCr;
+                border-bottom-right-radius: $controlCr;
+            }
+        }
+    }
+
+    + .c-button-set {
+        $m: $interiorMarginSm;
+        &:before {
+            content: '';
+            display: block;
+            width: $m;
+            border-right: 1px solid $colorInteriorBorder;
+            margin-right: $m;
+        }
+    }
+}
+
+/********* Menu Buttons */
+// Always includes :after dropdown arrow
+// Optionally can include icon in :before
+.c-menu-button {
+    $m: $interiorMarginSm;
+    @extend %c-button;
+
+    &:before {
+        margin-right: $m;
+    }
+
+    &:after {
+        content: $glyph-icon-arrow-down;
+        font-family: symbolsfont;
+        margin-left: $m;
+        opacity: 0.5;
+    }
+}
+
+/**************************** MENUS */
+@mixin menuOuter() {
+    border-radius: $basicCr;
+    background: $colorMenuBg;
+    text-shadow: $shdwMenuText;
+    padding: $interiorMarginSm;
+    box-shadow: $shdwMenu;
+    display: block;
+    position: absolute;
+    z-index: 70;
+}
+
+@mixin menuInner() {
+    color: $colorMenuFg;
+    li {
+        @extend %c-control;
+        color: $colorMenuFg;
+        display: flex;
+        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
+        transition: $transIn;
+        white-space: nowrap;
+
+        &:hover {
+            background: $colorMenuHovBg;
+            color: $colorMenuHovFg;
+            &:before {
+                color: $colorMenuHovIc;
+            }
+        }
+        &:before {
+            color: $colorMenuIc;
+            font-size: 1em;
+            margin-right: $interiorMargin;
+        }
+    }
+}
+
+
+
+.c-menu {
+    @include menuOuter();
+    @include menuInner();
+     li {
+         &:not(:first-child) {
+             border-top: 1px solid pullForward($colorMenuBg, 10%);
+         }
+     }
+}
+
+.c-super-menu {
+    // Two column layout, menu items on left with detail of hover element on right
+    @include menuOuter();
+    display: flex;
+    padding: $interiorMarginLg;
+    flex-direction: row;
+
+    > [class*="__"] {
+        $m: $interiorMarginLg;
+        flex: 1 1 50%;
+        &:first-child {
+            margin-right: $m;
+        }
+
+        &:last-child {
+            border-left: 1px solid $colorInteriorBorder;
+            padding-left: $m;
+        }
+    }
+
+    &__menu {
+        @include menuInner();
+        overflow: auto;
+
+        ul {
+            margin-right: $interiorMarginSm; // Fend off scrollbar
+        }
+
+        li {
+            border-radius: $controlCr;
+        }
+    }
+
+    &__item-description {
+        display: flex;
+        flex-direction: column;
+        justify-content: stretch;
+
+        .l-item-description {
+            &__icon,
+            &__description {
+                //flex: 1 1 50%;
+            }
+
+            &__name,
+            &__description {
+                margin-top: $interiorMarginLg;
+            }
+
+            &__icon {
+                min-height: 20%;
+                margin: 10% 25%;
+            }
+
+            &__name {
+                flex: 0 0 auto;
+                font-size: 1.25em;
+            }
+
+            &__description {
+                font-size: $fontBaseSize;
+            }
+        }
+    }
+}
+
diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss
index 85e8ce1a34..0c256029a5 100644
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -28,7 +28,9 @@
 }
 
 /******************************* RESETS */
-* {
+*,
+:before,
+:after {
     box-sizing: border-box;
 }
 
@@ -95,8 +97,9 @@ body, html {
 
 body {
     -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: grayscale;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 13px;
+    font-size: $fontBaseSize;
     font-weight: normal;
     background-color: $colorBodyBg;
     color: $colorBodyFg;
@@ -151,6 +154,12 @@ table {
     border-collapse: collapse;
 }
 
+li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
 /************************** LEGACY */
 
 mct-container {
diff --git a/src/styles-new/_glyphs.scss b/src/styles-new/_glyphs.scss
index 57c8aec0c5..a1976a1863 100644
--- a/src/styles-new/_glyphs.scss
+++ b/src/styles-new/_glyphs.scss
@@ -1,24 +1,3 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;
@@ -33,16 +12,21 @@
     }
 }
 
-[class*="icon-"].labeled {
-    // Moved from .s-button and generalized
-    &:before {
-        // Fend off label from icon when it's included
-        margin-right: $interiorMarginSm;
+@mixin glyphBg($glyphUrl) {
+    background-image: $glyphUrl;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+[class*="icon-"] {
+    &:before, &:after
+    {
+        -webkit-font-smoothing: antialiased;
     }
 }
 
 /************************** 16 PX CLASSES */
-
 .icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
 .icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
 .icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
@@ -162,3 +146,36 @@
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
 .icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
+
+/************************** GLYPH BG CLASSES */
+.bg-icon-activity { @include glyphBg($bg-icon-activity); }
+.bg-icon-activity-mode { @include glyphBg($bg-icon-activity-mode); }
+.bg-icon-autoflow-tabular { @include glyphBg($bg-icon-autoflow-tabular); }
+.bg-icon-clock { @include glyphBg($bg-icon-clock); }
+.bg-icon-database { @include glyphBg($bg-icon-database); }
+.bg-icon-database-query { @include glyphBg($bg-icon-database-query); }
+.bg-icon-dataset { @include glyphBg($bg-icon-dataset); }
+.bg-icon-datatable { @include glyphBg($bg-icon-datatable); }
+.bg-icon-dictionary { @include glyphBg($bg-icon-dictionary); }
+.bg-icon-folder { @include glyphBg($bg-icon-folder); }
+.bg-icon-image { @include glyphBg($bg-icon-image); }
+.bg-icon-layout { @include glyphBg($bg-icon-layout); }
+.bg-icon-object { @include glyphBg($bg-icon-object); }
+.bg-icon-object-unknown { @include glyphBg($bg-icon-object-unknown); }
+.bg-icon-packet { @include glyphBg($bg-icon-packet); }
+.bg-icon-page { @include glyphBg($bg-icon-page); }
+.bg-icon-plot-overlay { @include glyphBg($bg-icon-plot-overlay); }
+.bg-icon-plot-stacked { @include glyphBg($bg-icon-plot-stacked); }
+.bg-icon-session { @include glyphBg($bg-icon-session); }
+.bg-icon-tabular { @include glyphBg($bg-icon-tabular); }
+.bg-icon-tabular-lad { @include glyphBg($bg-icon-tabular-lad); }
+.bg-icon-tabular-lad-set { @include glyphBg($bg-icon-tabular-lad-set); }
+.bg-icon-tabular-realtime { @include glyphBg($bg-icon-tabular-realtime); }
+.bg-icon-tabular-scrolling { @include glyphBg($bg-icon-tabular-scrolling); }
+.bg-icon-telemetry { @include glyphBg($bg-icon-telemetry); }
+.bg-icon-timeline { @include glyphBg($bg-icon-timeline); }
+.bg-icon-timer { @include glyphBg($bg-icon-timer); }
+.bg-icon-topic { @include glyphBg($bg-icon-topic); }
+.bg-icon-box-with-dashed-lines { @include glyphBg($bg-icon-box-with-dashed-lines); }
+.bg-icon-summary-widget { @include glyphBg($bg-icon-summary-widget); }
+.bg-icon-notebook { @include glyphBg($bg-icon-notebook); }
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index 91c7d86224..763c10a71b 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -62,6 +62,36 @@
     background-size: $d $d;
 }
 
+/************************** LAYOUT */
+@mixin gridTwoColumn() {
+    display: grid;
+    grid-row-gap: 0;
+    grid-template-columns: 1fr 2fr;
+    align-items: start;
+
+    [class*="header"] {
+        border-radius: $smallCr;
+        background-color: $colorInspectorSectionHeaderBg;
+        color: $colorInspectorSectionHeaderFg;
+        margin: 0 0 $interiorMarginSm 0;
+        padding: $interiorMarginSm $interiorMargin;
+
+        &:not(:first-child) {
+            // Allow multiple headers within a component
+            margin-top: $interiorMarginLg;
+        }
+    }
+
+    [class*="span-all"],
+    [class*="header"] {
+        @include gridTwoColumnSpanCols();
+    }
+}
+
+@mixin gridTwoColumnSpanCols() {
+    grid-column: 1 / 3;
+}
+
 /************************** TEXT */
 @mixin ellipsize() {
     overflow: hidden;
diff --git a/src/ui/components/controls/ContextMenu.vue b/src/ui/components/controls/ContextMenu.vue
new file mode 100644
index 0000000000..c52fc040f1
--- /dev/null
+++ b/src/ui/components/controls/ContextMenu.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="c-menu">
+        <ul>
+            <li v-for="item in contextMenuItems"
+                :class="item.class"
+                :title="item.title">
+                {{ item.name }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                contextMenuItems: [
+                    {name: 'Open In New Tab', class: 'icon-new-window', title: 'Open in a new browser tab'},
+                    {name: 'Preview', class: 'hide-in-t-main-view icon-eye-open', title: 'Preview in large dialog'},
+                    {name: 'Edit Properties...', class: 'major icon-pencil', title: 'Edit properties of this object.'},
+                    {name: 'Duplicate', class: 'icon-duplicate', title: 'Duplicate object to another location.'},
+                    {name: 'Create Link', class: 'icon-link', title: 'Create Link to object in another location.'},
+                    {name: 'Export as JSON', class: 'icon-export', title: 'Export as JSON'},
+                    {name: 'Import from JSON', class: 'icon-import', title: 'Import from JSON'}
+                ]
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/ui/components/controls/CreateButton.vue b/src/ui/components/controls/CreateButton.vue
new file mode 100644
index 0000000000..3618638f07
--- /dev/null
+++ b/src/ui/components/controls/CreateButton.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="c-create-button--w">
+        <div class="c-create-button c-menu-button c-button--major icon-plus"
+             @click="toggleCreateMenu">
+            Create
+        </div>
+        <div class="c-create-menu c-super-menu"
+             v-if="showCreateMenu">
+            <div class="c-super-menu__menu">
+                <ul>
+                    <li v-for="item in createMenuItems"
+                        :class="item.class"
+                        :title="item.title"
+                        @mouseover="showItemDescription">
+                        {{ item.name }}
+                    </li>
+                </ul>
+            </div>
+            <div class="c-super-menu__item-description">
+                <div class="l-item-description__icon bg-icon-plot-stacked"></div>
+                <div class="l-item-description__name">Name</div>
+                <div class="l-item-description__description">
+                    A timer that counts up or down to a datetime.
+                    Timers can be started, stopped and reset whenever needed,
+                    and support a variety of display formats.
+                    Each Timer displays the same value to all users.
+                    Timers can be added to Display Layouts.</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-create-button,
+    .c-create-menu {
+        &--w {
+            // Wrapper for Create button and menu
+            overflow: visible;
+        }
+
+        font-size: 1.1em;
+    }
+
+    .c-create-menu {
+        max-height: 80vh;
+        max-width: 500px;
+        min-height: 250px;
+        z-index: 70;
+
+        [class*="__icon"] {
+            filter: $colorKeyFilter;
+        }
+
+        [class*="__item-description"] {
+            min-width: 200px;
+        }
+    }
+</style>
+
+<script>
+    export default {
+        props: {
+            showCreateMenu: {
+                type: Boolean,
+                default: false
+            }
+        },
+        methods: {
+            toggleCreateMenu: function () {
+                this.showCreateMenu = !this.showCreateMenu;
+            },
+        },
+        data: function() {
+            return {
+                createMenuItems: [
+                    { name: 'Folder', class: 'icon-folder', title: 'Details will go here' },
+                    { name: 'Display Layout', class: 'icon-layout', title: 'Details will go here' },
+                    { name: 'Fixed Position Display', class: 'icon-box-with-dashed-lines', title: 'Details will go here' },
+                    { name: 'Overlay Plot', class: 'icon-plot-overlay', title: 'Details will go here' },
+                    { name: 'Stacked Plot', class: 'icon-plot-stacked', title: 'Details will go here' },
+                    { name: 'Telemetry Table', class: 'icon-tabular-realtime', title: 'Details will go here' },
+                    { name: 'Clock', class: 'icon-clock', title: 'Details will go here' },
+                    { name: 'Timer', class: 'icon-timer', title: 'Details will go here' },
+                    { name: 'Web Page', class: 'icon-page', title: 'Details will go here' },
+                    { name: 'Event Message Generator', class: 'icon-folder-new', title: 'Details will go here' },
+                    { name: 'Hyperlink', class: 'icon-chain-links', title: 'Details will go here' },
+                    { name: 'Notebook', class: 'icon-notebook', title: 'Details will go here' },
+                    { name: 'State Generator', class: 'icon-telemetry', title: 'Details will go here' },
+                    { name: 'Sine Wave Generator', class: 'icon-telemetry', title: 'Details will go here' },
+                    { name: 'Example Imagery', class: 'icon-image', title: 'Details will go here' },
+                    { name: 'Summary Widget', class: 'icon-summary-widget', title: 'Details will go here' }
+                ]
+            }
+        }
+    }
+</script>
diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
index b7c5fd7d65..c6a8ff2d46 100644
--- a/src/ui/components/controls/pane.vue
+++ b/src/ui/components/controls/pane.vue
@@ -85,6 +85,11 @@
                 transition: opacity 150ms ease;
                 opacity: 0;
                 pointer-events: none;
+
+                > * {
+                    min-width: 0 !important;
+                    min-height: 0 !important;
+                }
             }
         }
 
@@ -109,7 +114,6 @@
             padding: $interiorMargin;
             pointer-events: inherit;
             transition: opacity 250ms ease 250ms;
-            overflow: auto;
 
             .l-pane__contents {
                 // Don't pad all nested __contents
@@ -158,15 +162,15 @@
 
                 &:after {
                     // Close icon
-                    background: $splitterBtnColorFg;
+                    background: $colorBtnBg;
                     border-radius: $smallCr;
-                    color: $splitterBtnColorBg;
+                    color: $colorBtnFg;
                     content: $glyph-icon-arrow-right-equilateral;
                     display: block;
                     font-family: symbolsfont;
                     font-size: 6px;
-                    height: 6.5px;
-                    padding: 2px 7px;
+                    line-height: 90%;
+                    padding: 3px 15px;
                     position: absolute;
                     right: $m;
                     top: $m;
@@ -196,6 +200,10 @@
             &--resizing {
                 // User is dragging the handle and resizing a pane
                 @include userSelectNone();
+
+                + .l-pane {
+                    @include userSelectNone();
+                }
             }
 
             &[class*="--collapsed"] {
diff --git a/src/ui/components/controls/search.vue b/src/ui/components/controls/search.vue
index 8b81a51ba8..72d81bb8d0 100644
--- a/src/ui/components/controls/search.vue
+++ b/src/ui/components/controls/search.vue
@@ -28,7 +28,7 @@
             flex: 0 0 auto;
             opacity: 0.5;
             overflow: hidden;
-            padding: 2px; // Prevents clipping
+            padding: 2px 0; // Prevents clipping
             transition: width 250ms ease;
             width: 1em;
         }
diff --git a/src/ui/components/inspector/Inspector.vue b/src/ui/components/inspector/Inspector.vue
index d1f1a3859e..651a64b5ed 100644
--- a/src/ui/components/inspector/Inspector.vue
+++ b/src/ui/components/inspector/Inspector.vue
@@ -6,7 +6,7 @@
             <location></location>
             <inspector-view></inspector-view>
         </pane>
-        <pane class="l-pane c-inspector__elements"
+        <pane class="c-inspector__elements"
               handle="before"
               label="Elements">
             <elements></elements>
@@ -17,127 +17,42 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
-    @mixin grid-two-column() {
-        display: grid;
-        grid-row-gap: 0;
-        grid-template-columns: 1fr 2fr;
-        align-items: start;
-    }
-
-    @mixin grid-two-column-span-cols() {
-        grid-column: 1 / 3;
-    }
-
     .c-inspector {
         min-width: 150px;
 
         > [class*="__"] {
             min-height: 50px;
 
-            &:not(:last-child) {
-                margin-bottom: $interiorMargin;
+            + [class*="__"] {
+                // Margin between elements
+                margin-top: $interiorMargin;
             }
 
-            > .l-pane__contents > * {
-                // Provide margin against scrollbar
-                // TODO: move this into pane.vue
-                margin-right: $interiorMarginSm;
+            > .l-pane__contents {
+                overflow: auto;
+
+                > * {
+                    // Fend off scrollbar
+                    margin-right: $interiorMarginSm;
+                }
             }
         }
 
         &__elements {
+            // LEGACY TODO: Refactor when markup is updated, fix scrolling
+            // so that only tree holder handles overflow
             height: 200px;
-        }
 
-        .l-inspector-part {
-            display: contents; // Legacy
-        }
-
-        h2 {
-            // Legacy, somewhat
-            @include grid-two-column-span-cols;
-            border-radius: $smallCr;
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-            font-size: .85em;
-            font-weight: normal;
-            margin: $interiorMarginLg 0 $interiorMarginSm 0;
-            padding: $interiorMarginSm $interiorMargin;
-            text-transform: uppercase;
-
-            &.first {
-                margin-top: 0;
-            }
-        }
-
-        .grid-properties {
-            .label {
-                color: $colorInspectorPropName;
-            }
-            .value {
-                color: $colorInspectorPropVal;
-                word-break: break-all;
-                &:first-child {
-                    // If there is no preceding .label element, make value span columns
-                    @include grid-two-column-span-cols;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    left: 0;
                 }
             }
         }
-    }
-
-    /******************************* PROPERTIES GRID */
-
-    .grid-elem {
-        &:not(:first-child) {
-            border-top: 1px solid $colorInteriorBorder;
-        }
-        &.label {
-            background-color: rgba(0,0,128,0.2);
-        }
-        &.value {
-            background-color: rgba(0,128,0,0.2);
-        }
-    }
-
-    // Properties grids
-    .grid-properties, // LEGACY
-    .l-grid-properties {
-        @include grid-two-column;
-    }
-
-    .grid-row {
-        display: contents;
-    }
-
-    .grid-span-all {
-        @include grid-two-column-span-cols;
-    }
-
-    .grid-row {
-        .grid-cell {
-            padding: 3px $interiorMarginLg 3px 0;
-            &[title] {
-                // When a cell has a title, assume it's helpful text
-                cursor: help;
-            }
-        }
-        &.force-border,
-        &:not(:first-of-type) {
-            // Row borders, effected via border-top on child elements of the row
-            .grid-cell {
-                border-top: 1px solid $colorInspectorSectionHeaderBg;
-            }
-        }
-
-
-        /************************************************************** LEGACY STYLES */
-        .tree {
-            .grid-properties {
-                margin-left: $treeItemIndent + $interiorMarginLg;
-            }
-        }
-
 
+        /************************************************************** LEGACY */
+        // TODO: refactor when markup can be converted
         .inspector-location {
             display: inline-block;
 
@@ -149,12 +64,14 @@
                 line-height: $h;
                 position: relative;
                 padding: 2px 4px;
+
                 .t-object-label {
                     .t-item-icon {
                         height: $h;
                         margin-right: $interiorMarginSm;
                     }
                 }
+
                 &:hover {
                     background: $colorItemTreeHoverBg;
                     color: $colorItemTreeHoverFg;
@@ -163,6 +80,7 @@
                     }
                 }
             }
+
             &:not(.last) .t-object-label .t-title-label:after {
                 color: pushBack($colorInspectorFg, 15%);
                 content: '\e904';
@@ -175,18 +93,53 @@
                 width: 4px;
             }
         }
+    }
 
-        // Elements pool
-        .holder-elements {
-            .current-elements {
-                position: relative;
-                .tree-item {
-                    .t-object-label {
-                        // Elements pool is a flat list, so don't indent items.
-                        /*font-size: 0.75rem;*/
-                        left: 0;
-                    }
-                }
+    .c-properties {
+        @include gridTwoColumn();
+
+        + .c-properties {
+            // Margin between components
+            margin-top: $interiorMarginLg;
+        }
+
+        &__section,
+        &__row {
+            display: contents;
+        }
+
+        &__row + &__row {
+            > [class*="__"] {
+                // Row borders, effected via border-top on child elements of the row
+                border-top: 1px solid $colorInspectorSectionHeaderBg;
+            }
+        }
+
+        &__header {
+            font-size: .85em;
+            text-transform: uppercase;
+        }
+
+        &__label,
+        &__value {
+            padding: 3px $interiorMarginLg 3px 0;
+        }
+
+        &__label {
+            color: $colorInspectorPropName;
+
+            &[title] {
+                // When a cell has a title, assume it's helpful text
+                cursor: help;
+            }
+        }
+
+        &__value {
+            color: $colorInspectorPropVal;
+            word-break: break-all;
+            &:first-child {
+                // If there is no preceding .label element, make value span columns
+                @include gridTwoColumnSpanCols();
             }
         }
     }
diff --git a/src/ui/components/inspector/InspectorView.vue b/src/ui/components/inspector/InspectorView.vue
index 6b1b6b5e85..02830871dc 100644
--- a/src/ui/components/inspector/InspectorView.vue
+++ b/src/ui/components/inspector/InspectorView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div></div>
+    <div class="c-properties"></div>
 </template>
 
 <style>
diff --git a/src/ui/components/inspector/Location.vue b/src/ui/components/inspector/Location.vue
index be829f906f..4e51029c82 100644
--- a/src/ui/components/inspector/Location.vue
+++ b/src/ui/components/inspector/Location.vue
@@ -1,14 +1,14 @@
 <template>
-<div class="grid-properties">
-    <h2 title="The location of this linked object.">Location</h2>
-    <ul class="l-inspector-part">
-        <li class="grid-row">
-            <div class="grid-cell label">This Link</div>
-            <div class="grid-cell value">TODO</div>
+<div class="c-properties c-properties--location">
+    <div class="c-properties__header" title="The location of this linked object.">Location</div>
+    <ul class="c-properties__section">
+        <li class="c-properties__row">
+            <div class="c-properties__label">This Link</div>
+            <div class="c-properties__value">TODO</div>
         </li>
-        <li class="grid-row">
-            <div class="grid-cell label">Original</div>
-            <div class="grid-cell value">TODO</div>
+        <li class="c-properties__row">
+            <div class="c-properties__label">Original</div>
+            <div class="c-properties__value">TODO</div>
         </li>
     </ul>
 </div>
diff --git a/src/ui/components/inspector/Properties.vue b/src/ui/components/inspector/Properties.vue
index bd0546ad99..6a2a493809 100644
--- a/src/ui/components/inspector/Properties.vue
+++ b/src/ui/components/inspector/Properties.vue
@@ -1,29 +1,28 @@
 <template>
-<div class="grid-properties">
-    <h2>Properties</h2>
-    <ul class="l-inspector-part">
-        <li class="t-repeat grid-row">
-            <div class="grid-cell label">Title</div>
-            <div class="grid-cell value">{{ domainObject.name }}</div>
+<div class="c-properties c-properties--properties">
+    <div class="c-properties__header">Properties</div>
+    <ul class="c-properties__section">
+        <li class="c-properties__row">
+            <div class="c-properties__label">Title</div>
+            <div class="c-properties__value">{{ domainObject.name }}</div>
         </li>
-        <li class="t-repeat grid-row">
-            <div class="grid-cell label">Type</div>
-            <div class="grid-cell value">{{ typeName }}</div>
+        <li class="c-properties__row">
+            <div class="c-properties__label">Type</div>
+            <div class="c-properties__value">{{ typeName }}</div>
         </li>
-        <li class="t-repeat grid-row" v-if="domainObject.created">
-            <div class="grid-cell label">Created</div>
-            <div class="grid-cell value">{{ domainObject.created }}</div>
+        <li class="c-properties__row" v-if="domainObject.created">
+            <div class="c-properties__label">Created</div>
+            <div class="c-properties__value">{{ domainObject.created }}</div>
         </li>
-        <li class="t-repeat grid-row" v-if="domainObject.modified">
-            <div class="grid-cell label">Modified</div>
-            <div class="grid-cell value">{{ domainObject.modified }}</div>
+        <li class="c-properties__row" v-if="domainObject.modified">
+            <div class="c-properties__label">Modified</div>
+            <div class="c-properties__value">{{ domainObject.modified }}</div>
         </li>
-
-        <li class="t-repeat grid-row"
+        <li class="c-properties__row"
             v-for="prop in typeProperties"
             :key="prop.name">
-            <div class="grid-cell label">{{ prop.name }}</div>
-            <div class="grid-cell value">{{ prop.value }}</div>
+            <div class="c-properties__label">{{ prop.name }}</div>
+            <div class="c-properties__value">{{ prop.value }}</div>
         </li>
     </ul>
 </div>
diff --git a/src/ui/components/layout/BrowseObject.vue b/src/ui/components/layout/BrowseObject.vue
new file mode 100644
index 0000000000..d67995ad72
--- /dev/null
+++ b/src/ui/components/layout/BrowseObject.vue
@@ -0,0 +1,159 @@
+<template>
+    <div></div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+
+// Find an object in an array of objects.
+function findObject(domainObjects, id) {
+    var i;
+    for (i = 0; i < domainObjects.length; i += 1) {
+        if (domainObjects[i].getId() === id) {
+            return domainObjects[i];
+        }
+    }
+}
+
+// recursively locate and return an object inside of a container
+// via a path.  If at any point in the recursion it fails to find
+// the next object, it will return the parent.
+function findViaComposition(containerObject, path) {
+    var nextId = path.shift();
+    if (!nextId) {
+        return containerObject;
+    }
+    return containerObject.useCapability('composition')
+        .then(function (composees) {
+            var nextObject = findObject(composees, nextId);
+            if (!nextObject) {
+                return containerObject;
+            }
+            if (!nextObject.hasCapability('composition')) {
+                return nextObject;
+            }
+            return findViaComposition(nextObject, path);
+        });
+}
+
+function getLastChildIfRoot(object) {
+    if (object.getId() !== 'ROOT') {
+        return object;
+    }
+    return object.useCapability('composition')
+        .then(function (composees) {
+            return composees[composees.length - 1];
+        });
+}
+
+function pathForObject(domainObject) {
+    var context = domainObject.getCapability('context'),
+        objectPath = context ? context.getPath() : [],
+        ids = objectPath.map(function (domainObj) {
+            return domainObj.getId();
+        });
+    return  "/browse/" + ids.slice(1).join("/");
+}
+
+export default {
+    inject: ["openmct"],
+    mounted() {
+        let openmct = this.openmct;
+        let $injector = openmct.$injector;
+        let angular = openmct.$angular;
+
+        this.objectService = $injector.get('objectService');
+        this.templateLinker = $injector.get('templateLinker');
+        this.navigationService = $injector.get('navigationService');
+        this.$timeout = $injector.get('$timeout');
+
+        this.templateMap = {};
+        $injector.get('templates[]').forEach((t) => {
+            this.templateMap[t.key] = this.templateMap[t.key] || t;
+        });
+
+        this.$rootScope = $injector.get('$rootScope');
+        this.$scope = this.$rootScope.$new();
+        this.$scope.representation = {};
+
+        openmct.router.route(/^\/browse\/(.*)$/, (path, results) => {
+            let navigatePath = results[1];
+            if (!navigatePath) {
+                navigatePath = 'mine';
+            }
+            this.navigateToPath(navigatePath);
+        });
+
+        this.navigationService.addListener(o => this.navigateToObject(o));
+    },
+    destroyed() {
+    },
+    methods: {
+        navigateToPath(path) {
+            if (!Array.isArray(path)) {
+                path = path.split('/');
+            }
+            return this.getObject('ROOT')
+                .then(root => {
+                    return findViaComposition(root, path);
+                })
+                .then(getLastChildIfRoot)
+                .then(object => {
+                    this.setMainViewObject(object);
+                });
+        },
+
+        setMainViewObject(object) {
+            this.$scope.domainObject = object;
+            this.$scope.navigatedObject = object;
+            this.templateLinker.link(
+                this.$scope,
+                this.openmct.$angular.element(this.$el),
+                this.templateMap["browseObject"]
+            );
+            document.title = object.getModel().name;
+            this.scheduleDigest();
+        },
+
+        idsForObject(domainObject) {
+            return this.urlService
+                .urlForLocation("", domainObject)
+                .replace('/', '');
+        },
+
+        navigateToObject(object) {
+            let path = pathForObject(object);
+            let views = object.useCapability('view');
+            let params = this.openmct.router.getParams();
+            let currentViewIsValid = views.some(v => v.key === params['view']);
+            if (!currentViewIsValid) {
+                this.scope.representation = {
+                    selected: views[0]
+                }
+                this.openmct.router.update(path, {
+                    view: views[0].key
+                });
+            } else {
+                this.openmct.router.setPath(path);
+            }
+        },
+
+        scheduleDigest() {
+            this.$timeout(function () {
+                // digest done!
+            });
+        },
+
+        getObject(id) {
+            return this.objectService.getObjects([id])
+                .then(function (results) {
+                    return results[id];
+                });
+        }
+    }
+}
+</script>
+
+
diff --git a/src/ui/components/layout/Conductor.vue b/src/ui/components/layout/Conductor.vue
new file mode 100644
index 0000000000..0f473bb2e5
--- /dev/null
+++ b/src/ui/components/layout/Conductor.vue
@@ -0,0 +1,15 @@
+<template>
+    <div></div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+export default {
+    <mct-include key="'conductor'" class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder"></mct-include>
+
+}
+</script>
+
+
diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue
index a1050025c8..8cdbd68552 100644
--- a/src/ui/components/layout/Layout.vue
+++ b/src/ui/components/layout/Layout.vue
@@ -1,8 +1,14 @@
 <template>
     <div class="l-shell">
         <div class="l-shell__head">
-            [ Create Button ]
-            [ App Logo ]
+            <CreateButton class="l-shell__create-button"></CreateButton>
+            <div class="l-shell__controls">
+                <div class="l-controls__elem c-button-set">
+                    <a class="c-icon-button icon-new-window" title="Open in a new browser tab"></a>
+                    <a class="c-icon-button icon-fullscreen-collapse" title="Enable full screen mode"></a>
+                </div>
+            </div>
+            <div class="l-shell__app-logo">[ App Logo ]</div>
         </div>
         <multipane class="l-shell__main"
                    type="horizontal">
@@ -14,11 +20,15 @@
                     <search class="c-search--major" ref="shell-search"></search>
                 </div>
                 <div class="l-shell__tree">
-                    <mct-tree :nodes="treeRoots"></mct-tree>
+                    <mct-tree></mct-tree>
                 </div>
             </pane>
             <pane class="l-shell__pane-main">
-                <div class="l-shell__main-container" ref="mainContainer"></div>
+                <browse-object class="l-shell__main-container">
+                </browse-object>
+                <mct-template template-key="conductor"
+                              class="l-shell__time-conductor">
+                </mct-template>
             </pane>
             <pane class="l-shell__pane-inspector l-pane--holds-multipane"
                   handle="before"
@@ -72,10 +82,10 @@
             }
         }
 
-        &__head,
-        &__pane-inspector {
-            body.mobile & {
-                display: none;
+        &__pane-main {
+            > .l-pane__contents {
+                display: flex;
+                flex-flow: column nowrap;
             }
         }
 
@@ -98,13 +108,48 @@
             }
         }
 
+        &__head,
+        &__pane-inspector {
+            body.mobile & {
+                display: none;
+            }
+        }
+
+        &__head,
+        &__status {
+            flex: 0 1 auto;
+            display: flex;
+        }
+
+        /******************************* HEAD */
+        &__head {
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid $colorInteriorBorder;
+            padding: $interiorMargin;
+
+            > [class*="__"] + [class*="__"] {
+                margin-left: $interiorMargin;
+            }
+        }
+
+        &__create-button,
+        &__app-logo {
+            flex: 0 0 auto;
+        }
+
+        &__controls {
+            flex: 1 1 100%;
+            display: flex;
+            justify-content: flex-end;
+            margin-right: 2.5%;
+        }
+
         /********** MAIN AREA */
         &__main-container {
             // Wrapper for main views
+            flex: 1 1 100%;
             font-size: 16px; // TEMP FOR LEGACY STYLING
-            overflow: auto;
-            position: absolute;
-            top: $interiorMargin; right: $interiorMarginLg; bottom: $interiorMargin; left: $interiorMarginLg;
         }
 
         &__tree {
@@ -115,24 +160,12 @@
 
         &__time-conductor {
             border-top: 1px solid $colorInteriorBorder;
-            min-height: 50px;
-            padding: $interiorMarginLg;
+            flex: 0 0 auto;
+            padding: $interiorMargin;
         }
 
         body.desktop & {
             /********** HEAD AND STATUS */
-            &__head,
-            &__status {
-                display: block;
-                flex: 0 1 auto;
-            }
-
-            &__head {
-                border-bottom: 1px solid $colorInteriorBorder;
-                height: 40px;
-                padding: $interiorMarginLg;
-            }
-
             &__pane-tree,
             &__pane-inspector {
                 max-width: 30%;
@@ -151,9 +184,12 @@
 
 <script>
     import Inspector from '../inspector/Inspector.vue';
-    import MctMain from './MctMain.vue';
     import MctStatus from './MctStatus.vue';
     import MctTree from './mct-tree.vue';
+    import BrowseObject from './BrowseObject.vue';
+    import MctTemplate from '../legacy/mct-template.vue';
+    import ContextMenu from '../controls/ContextMenu.vue';
+    import CreateButton from '../controls/CreateButton.vue';
     import search from '../controls/search.vue';
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
@@ -161,9 +197,12 @@
     export default {
         components: {
             Inspector,
-            MctMain,
             MctStatus,
             MctTree,
+            BrowseObject,
+            'mct-template': MctTemplate,
+            ContextMenu,
+            CreateButton,
             search,
             multipane,
             pane
diff --git a/src/ui/components/layout/MctMain.vue b/src/ui/components/layout/MctMain.vue
deleted file mode 100644
index a67c8ee208..0000000000
--- a/src/ui/components/layout/MctMain.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <mct-representation key='browse-object'></mct-representation>
-</template>
-
-<style lang="scss">
-.MCT_Main {
-    position: absolute;
-    right: 100px;
-    top: 0px;
-    bottom: 20px;
-    left: 100px;
-    background: green;
-}
-</style>
-
-<script>
-export default {
-}
-</script>
-
-
diff --git a/src/ui/components/layout/mct-tree.vue b/src/ui/components/layout/mct-tree.vue
index d55c322ba3..bd01c8781d 100644
--- a/src/ui/components/layout/mct-tree.vue
+++ b/src/ui/components/layout/mct-tree.vue
@@ -10,9 +10,8 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
-    // TODO: make sure hit area encompasses all of the tree item; currently is just the text
-
     .c-tree {
+        @include userSelectNone();
         overflow-x: hidden;
         overflow-y: auto;
         height: 100%;
diff --git a/src/ui/components/legacy/mct-template.vue b/src/ui/components/legacy/mct-template.vue
new file mode 100644
index 0000000000..025e8bf473
--- /dev/null
+++ b/src/ui/components/legacy/mct-template.vue
@@ -0,0 +1,38 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        templateKey: String
+    },
+    mounted() {
+        let openmct = this.openmct;
+        let $injector = openmct.$injector;
+        let angular = openmct.$angular;
+
+        let templateLinker = $injector.get('templateLinker');
+
+        let templateMap = {};
+        $injector.get('templates[]').forEach((t) => {
+            templateMap[t.key] = templateMap[t.key] || t;
+        });
+
+        let $rootScope = $injector.get('$rootScope');
+        this.$scope = $rootScope.$new();
+        console.log('mounting', this.templateKey);
+        console.log('template:', templateMap[this.templateKey]);
+
+        templateLinker.link(
+            this.$scope,
+            angular.element(this.$el),
+            templateMap[this.templateKey]
+        );
+    },
+    destroyed() {
+        this.$scope.$destroy();
+    }
+}
+</script>