diff --git a/README.md b/README.md
index e00dfeb6a1..d5bdf1fe02 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,14 @@ Building and running Open MCT in your local dev environment is very easy. Be sur
 
 Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/)
 
+## Open MCT v1.0.0
+This represents a major overhaul of Open MCT with significant changes under the hood. We aim to maintain backward compatibility but if you do find compatibility issues, please let us know by filing an issue in this repository. If you are having major issues with v1.0.0 please check-out the v0.14.0 tag until we can resolve them for you.
+
+If you are migrating an application built with Open MCT as a dependency to v1.0.0 from an earlier version, please refer to [our migration guide](https://nasa.github.io/openmct/documentation/migration-guide).
+
 ## Documentation
 
-Documentation is available on the [Open MCT website](https://nasa.github.io/openmct/documentation/). The documentation can also be built locally.
+Documentation is available on the [Open MCT website](https://nasa.github.io/openmct/documentation/).
 
 ### Examples
 
@@ -38,33 +43,29 @@ The clearest examples for developing Open MCT plugins are in the
 [tutorials](https://github.com/nasa/openmct-tutorial) provided in
 our documentation.
 
-Additional examples are available in the `examples` hierarchy of this
-repository; however, be aware that these examples are
-[not fully-documented](https://github.com/nasa/openmct/issues/846), so
-the tutorials will likely serve as a better starting point.
-
 We want Open MCT to be as easy to use, install, run, and develop for as
 possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
 
-## Deploying Open MCT
+## Building Applications With Open MCT
 
-Open MCT is built using [`npm`](http://npmjs.com/)
+Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpack.js.org/).
 
-To build Open MCT for deployment:
+See our documentation for a guide on [building Applications with Open MCT](https://github.com/nasa/openmct/blob/master/API.md#starting-an-open-mct-application).
 
-`npm run prepare`
+## Plugins
 
-This will compile and minify JavaScript sources, as well as copy over assets.
-The contents of the `dist` folder will contain a runnable Open MCT
-instance (e.g. by starting an HTTP server in that directory), including:
+Open MCT can be extended via plugins that make calls to the Open MCT API. A plugin is a group 
+of software components (including source code and resources such as images and HTML templates)
+that is intended to be added or removed as a single unit.
 
-* `openmct.js` - Open MCT source code.
-* `openmct.css` - Basic styles to load to prevent a FOUC.
-* `index.html`, an example to run Open MCT in the basic configuration.
+As well as providing an extension mechanism, most of the core Open MCT codebase is also 
+written as plugins.
+
+For information on writing plugins, please see [our API documentation](https://github.com/nasa/openmct/blob/master/API.md#plugins).
 
 ## Tests
 
-Tests are written for [Jasmine 3](http://jasmine.github.io/)
+Tests are written for [Jasmine 3](https://jasmine.github.io/api/3.1/global)
 and run by [Karma](http://karma-runner.github.io). To run:
 
 `npm test`
@@ -80,7 +81,7 @@ naming convention is otherwise the same.)
 ### Test Reporting
 
 When `npm test` is run, test results will be written as HTML to
-`target/tests`. Code coverage information is written to `target/coverage`.
+`dist/reports/tests/`. Code coverage information is written to `dist/reports/coverage`.
 
 # Glossary
 
@@ -90,11 +91,8 @@ addressed (either by updating this glossary or changing code to reflect
 correct usage.) Other developer documentation, particularly in-line
 documentation, may presume an understanding of these terms.
 
-* _bundle_: A bundle is a removable, reusable grouping of software elements.
-  The application is composed of bundles. Plug-ins are bundles. For more
-  information, refer to framework documentation (under `platform/framework`.)
-* _capability_: An object which exposes dynamic behavior or non-persistent
-  state associated with a domain object.
+* _plugin_: A plugin is a removable, reusable grouping of software elements.
+  The application is composed of plugins.
 * _composition_: In the context of a domain object, this refers to the set of
   other domain objects that compose or are contained by that object. A domain
   object's composition is the set of domain objects that should appear
@@ -109,13 +107,8 @@ documentation, may presume an understanding of these terms.
 * _domain object_: A meaningful object to the user; a distinct thing in
   the work support by Open MCT. Anything that appears in the left-hand
   tree is a domain object.
-* _extension_: An extension is a unit of functionality exposed to the
-  platform in a declarative fashion by a bundle. For more
-  information, refer to framework documentation (under `platform/framework`.)
-* _id_: A string which uniquely identifies a domain object.
-* _key_: When used as an object property, this refers to the machine-readable
-  identifier for a specific thing in a set of things. (Most often used in the
-  context of extensions or other similar application-specific object sets.)
+* _identifier_: A tuple consisting of a namespace and a key, which together uniquely
+  identifies a domain object.
 * _model_: The persistent state associated with a domain object. A domain
   object's model is a JavaScript object which can be converted to JSON
   without losing information (that is, it contains no methods.)
@@ -127,7 +120,5 @@ documentation, may presume an understanding of these terms.
   a user clicks on a domain object in the tree, they are _navigating_ to
   it, and it is thereafter considered the _navigated_ object (until the
   user makes another such choice.)
-* _space_: A name used to identify a persistence store. Interactions with
-  persistence will generally involve a `space` parameter in some form, to
-  distinguish multiple persistence stores from one another (for cases
-  where there are multiple valid persistence locations available.)
+* _namespace_: A name used to identify a persistence store. A running open MCT 
+application could potentially use multiple persistence stores, with the 
diff --git a/index.html b/index.html
index f73024f69e..332b04eccd 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,8 @@
         ].forEach(
             openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
         );
+
+        openmct.install(openmct.plugins.Espresso());
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
         openmct.install(openmct.plugins.Generator());
diff --git a/package.json b/package.json
index 6c990dc0c4..d15a69e91e 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
     "comma-separated-values": "^3.6.4",
     "concurrently": "^3.6.1",
     "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^1.0.0",
     "cross-env": "^6.0.3",
+    "css-loader": "^1.0.0",
     "d3-array": "1.2.x",
     "d3-axis": "1.0.x",
     "d3-collection": "1.0.x",
@@ -63,7 +63,7 @@
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
     "split": "^1.0.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^1.0.1",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
     "vue-loader": "^15.2.6",
diff --git a/src/MCT.js b/src/MCT.js
index 404153ab5a..9b2f145db5 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -38,7 +38,6 @@ define([
     './ui/router/ApplicationRouter',
     './ui/router/Browse',
     '../platform/framework/src/Main',
-    './styles/core.scss',
     './styles/notebook.scss',
     './ui/layout/Layout.vue',
     '../platform/core/src/objects/DomainObjectImpl',
@@ -66,7 +65,6 @@ define([
     ApplicationRouter,
     Browse,
     Main,
-    coreStyles,
     NotebookStyles,
     Layout,
     DomainObjectImpl,
@@ -318,11 +316,26 @@ define([
      * @memberof module:openmct.MCT#
      * @method setAssetPath
      */
-    MCT.prototype.setAssetPath = function (path) {
-        this.legacyExtension('constants', {
-            key: "ASSETS_PATH",
-            value: path
-        });
+    MCT.prototype.setAssetPath = function (assetPath) {
+        this._assetPath = assetPath;
+    };
+
+    /**
+     * Get path to where assets are hosted.
+     * @memberof module:openmct.MCT#
+     * @method getAssetPath
+     */
+    MCT.prototype.getAssetPath = function () {
+        const assetPathLength = this._assetPath && this._assetPath.length;
+        if (!assetPathLength) {
+            return '/';
+        }
+
+        if (this._assetPath[assetPathLength - 1] !== '/') {
+            return this._assetPath + '/';
+        }
+
+        return this._assetPath;
     };
 
     /**
diff --git a/src/api/overlays/components/DialogComponent.vue b/src/api/overlays/components/DialogComponent.vue
index 23991c0bf6..9193d302bd 100644
--- a/src/api/overlays/components/DialogComponent.vue
+++ b/src/api/overlays/components/DialogComponent.vue
@@ -33,92 +33,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin legacyMessage() {
-        flex: 0 1 auto;
-        font-family: symbolsfont;
-        font-size: $messageIconD; // Singleton message in a dialog
-        margin-right: $interiorMarginLg;
-    }
-
-    .c-message {
-        display: flex;
-        align-items: center;
-
-        > * + * {
-            margin-left: $interiorMarginLg;
-        }
-
-        &__icon {
-            // Holds a background SVG graphic
-            $s: 80px;
-            flex: 0 0 auto;
-            min-width: $s;
-            min-height: $s;
-        }
-
-        &__text {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-
-            > * + * {
-                margin-top: $interiorMargin;
-            }
-        }
-
-        // __text elements
-        &__action-text {
-            font-size: 1.2em;
-        }
-
-        &__title {
-            font-size: 1.5em;
-            font-weight: bold;
-        }
-
-        &--simple {
-            // Icon and text elements only
-            &:before {
-                font-size: 30px !important;
-            }
-
-            [class*='__text'] {
-                font-size: 1.25em;
-            }
-        }
-
-        /************************** LEGACY */
-        &.message-severity-info:before {
-            @include legacyMessage();
-            content: $glyph-icon-info;
-            color: $colorInfo;
-        }
-
-        &.message-severity-alert:before {
-            @include legacyMessage();
-            content: $glyph-icon-alert-rect;
-            color: $colorWarningLo;
-        }
-
-        &.message-severity-error:before {
-            @include legacyMessage();
-            content: $glyph-icon-alert-triangle;
-            color: $colorWarningHi;
-        }
-
-        // Messages in a list
-        .c-overlay__messages & {
-            padding: $interiorMarginLg;
-            &:before {
-                font-size: $messageListIconD;
-            }
-        }
-    }
-</style>
-
 <script>
 export default {
     inject:['iconClass', 'title', 'hint', 'timestamp', 'message']
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index debef435c4..f1fd7d07ff 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -36,154 +36,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
-        position: absolute;
-        top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
-        width: $width;
-        height: $height;
-    }
-
-    .l-overlay-wrapper {
-        // Created by overlayService.js, contains this template.
-        // Acts as an anchor for one or more overlays.
-        display: contents;
-    }
-
-    .c-overlay {
-        @include abs();
-        z-index: 70;
-
-        &__blocker {
-            display: none; // Mobile-first
-        }
-
-        &__outer {
-            @include abs();
-            background: $overlayColorBg;
-            color: $overlayColorFg;
-            display: flex;
-            flex-direction: column;
-            padding: $overlayInnerMargin;
-        }
-
-        &__close-button {
-            $p: $interiorMargin;
-            border-radius: 100% !important;
-            color: $overlayColorFg;
-            display: inline-block;
-            font-size: 1.25em;
-            position: absolute;
-            top: $p; right: $p;
-        }
-
-        &__contents {
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: column;
-            outline: none;
-            overflow: hidden;
-        }
-
-        &__top-bar {
-            flex: 0 0 auto;
-            flex-direction: column;
-            display: flex;
-
-            > * {
-                flex: 0 0 auto;
-                margin-bottom: $interiorMargin;
-            }
-        }
-
-        &__dialog-title {
-            @include ellipsize();
-            font-size: 1.5em;
-            line-height: 120%;
-        }
-
-        &__contents-main {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            height: 0; // Chrome 73 overflow bug fix
-            overflow: auto;
-            padding-right: $interiorMargin; // fend off scroll bar
-        }
-
-        &__button-bar {
-            flex: 0 0 auto;
-            display: flex;
-            justify-content: flex-end;
-            margin-top: $interiorMargin;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        .c-button,
-        .c-click-icon {
-            filter: $overlayBrightnessAdjust;
-        }
-    }
-
-    body.desktop {
-        .c-overlay {
-            &__blocker {
-                @include abs();
-                background: $colorOvrBlocker;
-                cursor: pointer;
-                display: block;
-            }
-        }
-
-        // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
-        .l-overlay-large,
-        .l-overlay-small,
-        .l-overlay-fit {
-            .c-overlay__outer {
-                border-radius: $overlayCr;
-                box-shadow: rgba(black, 0.5) 0 2px 25px;
-            }
-        }
-
-        .l-overlay-fullscreen {
-            // Used by About > Licenses display
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
-            }
-        }
-
-        .l-overlay-large {
-            // Default
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginLg);
-            }
-        }
-
-        .l-overlay-small {
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginDialog);
-            }
-        }
-
-        .t-dialog-sm .l-overlay-small, // Legacy dialog support
-        .l-overlay-fit {
-            .c-overlay__outer {
-                @include overlaySizing(auto);
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                min-width: 20%;
-            }
-        }
-    }
-
-</style>
-
 <script>
 export default {
     data: function () {
diff --git a/src/api/overlays/components/ProgressDialogComponent.vue b/src/api/overlays/components/ProgressDialogComponent.vue
index 03461b1caa..023087695d 100644
--- a/src/api/overlays/components/ProgressDialogComponent.vue
+++ b/src/api/overlays/components/ProgressDialogComponent.vue
@@ -4,9 +4,6 @@
 </dialog-component>
 </template>
 
-<style lang="scss">
-</style>
-
 <script>
 import ProgressComponent from '../../../ui/components/ProgressBar.vue';
 import DialogComponent from './DialogComponent.vue';
diff --git a/src/api/overlays/components/dialog-component.scss b/src/api/overlays/components/dialog-component.scss
new file mode 100644
index 0000000000..71282ba08a
--- /dev/null
+++ b/src/api/overlays/components/dialog-component.scss
@@ -0,0 +1,81 @@
+@mixin legacyMessage() {
+    flex: 0 1 auto;
+    font-family: symbolsfont;
+    font-size: $messageIconD; // Singleton message in a dialog
+    margin-right: $interiorMarginLg;
+}
+
+.c-message {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMarginLg;
+    }
+
+    &__icon {
+        // Holds a background SVG graphic
+        $s: 80px;
+        flex: 0 0 auto;
+        min-width: $s;
+        min-height: $s;
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+    }
+
+    // __text elements
+    &__action-text {
+        font-size: 1.2em;
+    }
+
+    &__title {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    &--simple {
+        // Icon and text elements only
+        &:before {
+            font-size: 30px !important;
+        }
+
+        [class*='__text'] {
+            font-size: 1.25em;
+        }
+    }
+
+    /************************** LEGACY */
+    &.message-severity-info:before {
+        @include legacyMessage();
+        content: $glyph-icon-info;
+        color: $colorInfo;
+    }
+
+    &.message-severity-alert:before {
+        @include legacyMessage();
+        content: $glyph-icon-alert-rect;
+        color: $colorWarningLo;
+    }
+
+    &.message-severity-error:before {
+        @include legacyMessage();
+        content: $glyph-icon-alert-triangle;
+        color: $colorWarningHi;
+    }
+
+    // Messages in a list
+    .c-overlay__messages & {
+        padding: $interiorMarginLg;
+        &:before {
+            font-size: $messageListIconD;
+        }
+    }
+}
diff --git a/src/api/overlays/components/overlay-component.scss b/src/api/overlays/components/overlay-component.scss
new file mode 100644
index 0000000000..14de7b0c4a
--- /dev/null
+++ b/src/api/overlays/components/overlay-component.scss
@@ -0,0 +1,142 @@
+@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
+    position: absolute;
+    top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
+    width: $width;
+    height: $height;
+}
+
+.l-overlay-wrapper {
+    // Created by overlayService.js, contains this template.
+    // Acts as an anchor for one or more overlays.
+    display: contents;
+}
+
+.c-overlay {
+    @include abs();
+    z-index: 70;
+
+    &__blocker {
+        display: none; // Mobile-first
+    }
+
+    &__outer {
+        @include abs();
+        background: $overlayColorBg;
+        color: $overlayColorFg;
+        display: flex;
+        flex-direction: column;
+        padding: $overlayInnerMargin;
+    }
+
+    &__close-button {
+        $p: $interiorMargin;
+        border-radius: 100% !important;
+        color: $overlayColorFg;
+        display: inline-block;
+        font-size: 1.25em;
+        position: absolute;
+        top: $p; right: $p;
+    }
+
+    &__contents {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        outline: none;
+        overflow: hidden;
+    }
+
+    &__top-bar {
+        flex: 0 0 auto;
+        flex-direction: column;
+        display: flex;
+
+        > * {
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+        }
+    }
+
+    &__dialog-title {
+        @include ellipsize();
+        font-size: 1.5em;
+        line-height: 120%;
+    }
+
+    &__contents-main {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 overflow bug fix
+        overflow: auto;
+        padding-right: $interiorMargin; // fend off scroll bar
+    }
+
+    &__button-bar {
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: $interiorMargin;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    .c-button,
+    .c-click-icon {
+        filter: $overlayBrightnessAdjust;
+    }
+}
+
+body.desktop {
+    .c-overlay {
+        &__blocker {
+            @include abs();
+            background: $colorOvrBlocker;
+            cursor: pointer;
+            display: block;
+        }
+    }
+
+    // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
+    .l-overlay-small,
+    .l-overlay-fit {
+        .c-overlay__outer {
+            border-radius: $overlayCr;
+            box-shadow: rgba(black, 0.5) 0 2px 25px;
+        }
+    }
+
+    .l-overlay-fullscreen {
+        // Used by About > Licenses display
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginFullscreen);
+        }
+    }
+
+    .l-overlay-large {
+        // Default
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginLg);
+        }
+    }
+
+    .l-overlay-small {
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginDialog);
+        }
+    }
+
+    .t-dialog-sm .l-overlay-small, // Legacy dialog support
+    .l-overlay-fit {
+        .c-overlay__outer {
+            @include overlaySizing(auto);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            min-width: 20%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/plugins/LADTable/components/LADRow.vue b/src/plugins/LADTable/components/LADRow.vue
index 1bfd2ccb40..1c2694758a 100644
--- a/src/plugins/LADTable/components/LADRow.vue
+++ b/src/plugins/LADTable/components/LADRow.vue
@@ -31,10 +31,6 @@
 </tr>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 
 const CONTEXT_MENU_ACTIONS = [
diff --git a/src/plugins/LADTable/components/LadTableSet.vue b/src/plugins/LADTable/components/LadTableSet.vue
index 898b35430a..bdb764a5b7 100644
--- a/src/plugins/LADTable/components/LadTableSet.vue
+++ b/src/plugins/LADTable/components/LadTableSet.vue
@@ -51,10 +51,6 @@
 </table>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 import LadRow from './LADRow.vue';
 
diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue
index 6701ea802d..0214db0287 100644
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@@ -34,19 +34,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-box-view {
-        display: flex;
-        align-items: stretch;
-
-        .c-frame & {
-            @include abs();
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 
diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index 5d7ed16f3e..a247c601a8 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -66,81 +66,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin displayMarquee($c) {
-        > .c-frame-edit {
-            // All other frames
-            //@include test($c, 0.4);
-            display: block;
-        }
-        > .c-frame > .c-frame-edit {
-            // Line object frame
-            //@include test($c, 0.4);
-            display: block;
-        }
-    }
-
-    .l-layout {
-        @include abs();
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-
-        &__grid-holder {
-            display: none;
-        }
-
-        &__frame {
-            position: absolute;
-        }
-    }
-
-    .is-editing {
-        .l-shell__main-container {
-            &[s-selected],
-            &[s-selected-parent] {
-                // Display grid and allow edit marquee to display in main layout holder when editing
-                > .l-layout {
-                    background: $editUIGridColorBg;
-
-                    > [class*="__grid-holder"] {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        .l-layout__frame {
-            &[s-selected],
-            &[s-selected-parent] {
-                // Display grid and allow edit marquee to display in nested layouts when editing
-                > * > * > .l-layout {
-                    background: $editUIGridColorBg;
-                    box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
-
-                    > [class*='grid-holder'] {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        /*********************** EDIT MARQUEE CONTROL */
-        *[s-selected-parent] {
-            > .l-layout {
-                // When main shell layout is the parent
-                @include displayMarquee(deeppink);
-            }
-            > * > * > * {
-                // When a sub-layout is the parent
-                @include displayMarquee(blue);
-            }
-        }
-    }
-</style>
-
 <script>
 import uuid from 'uuid';
 
diff --git a/src/plugins/displayLayout/components/EditMarquee.vue b/src/plugins/displayLayout/components/EditMarquee.vue
index 063df49c27..39c668a45b 100644
--- a/src/plugins/displayLayout/components/EditMarquee.vue
+++ b/src/plugins/displayLayout/components/EditMarquee.vue
@@ -45,66 +45,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-frame-edit {
-        // In Layouts, this is the editing rect and handles
-        display: none; // Set to display: block in DisplayLayout.vue
-        pointer-events: none;
-        @include abs();
-        border: $editMarqueeBorder;
-
-        &__handle {
-            $d: 6px;
-            $o: floor($d * -0.5);
-            background: $editFrameColorHandleFg;
-            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
-            pointer-events: all;
-            position: absolute;
-            width: $d; height: $d;
-            top: auto; right: auto; bottom: auto; left: auto;
-
-            &:before {
-                // Extended hit area
-                @include abs(-10px);
-                content: '';
-                display: block;
-                z-index: 0;
-            }
-
-            &:hover {
-                background: $editUIColor;
-            }
-
-            &--nwse {
-                cursor: nwse-resize;
-            }
-
-            &--nw {
-                cursor: nw-resize;
-                left: $o; top: $o;
-            }
-
-            &--ne {
-                cursor: ne-resize;
-                right: $o; top: $o;
-            }
-
-            &--se {
-                cursor: se-resize;
-                right: $o; bottom: $o;
-            }
-
-            &--sw {
-                cursor: sw-resize;
-                left: $o; bottom: $o;
-            }
-        }
-    }
-</style>
-
-
 <script>
 import LayoutDrag from './../LayoutDrag'
 
diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue
index ea78fb08a9..0ad4049978 100644
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@@ -34,21 +34,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-image-view {
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 
diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue
index 2deccbd4af..8ad2954531 100644
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -38,142 +38,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************* FRAME */
-    .c-frame {
-        display: flex;
-        flex-direction: column;
-
-        // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
-        > *:first-child {
-            flex: 1 1 auto;
-        }
-    }
-
-    .c-frame-edit__move {
-        display: none;
-    }
-
-    .is-editing {
-        /******************* STYLES FOR C-FRAME WHILE EDITING */
-        .c-frame {
-            &:not([s-selected]) {
-                &:hover {
-                    border: $editFrameBorderHov;
-                }
-            }
-
-            &[s-selected] {
-                // All frames selected while editing
-                border: $editFrameSelectedBorder;
-                box-shadow: $editFrameSelectedShdw;
-
-                .c-frame-edit__move {
-                    cursor: move;
-                }
-            }
-        }
-
-        /******************* DEFAULT STYLES FOR -EDIT__MOVE */
-        // All object types
-        .c-frame-edit__move {
-            @include abs();
-            display: block;
-        }
-
-        // Has-complex-content objects
-        .c-so-view.has-complex-content {
-            transition: $transOut;
-            transition-delay: $moveBarOutDelay;
-
-            > .c-so-view__local-controls {
-                transition: transform 250ms ease-in-out;
-                transition-delay: $moveBarOutDelay;
-            }
-
-            + .c-frame-edit__move {
-                display: none;
-            }
-
-        }
-
-        .l-layout {
-            /******************* 0 - 1 ITEM SELECTED */
-            &:not(.is-multi-selected) {
-                > .l-layout__frame[s-selected] {
-                    > .c-so-view.has-complex-content {
-                        > .c-so-view__local-controls {
-                            transition: transform $transOutTime ease-in-out;
-                            transition-delay: $moveBarOutDelay;
-                        }
-
-                        + .c-frame-edit__move {
-                            transition: $transOut;
-                            transition-delay: $moveBarOutDelay;
-                            @include userSelectNone();
-                            background: $editFrameMovebarColorBg;
-                            box-shadow: rgba(black, 0.2) 0 1px;
-                            bottom: auto;
-                            display: block;
-                            height: 0; // Height is set on hover below
-                            opacity: 0.8;
-                            max-height: 100%;
-                            overflow: hidden;
-                            text-align: center;
-
-                            &:before {
-                                // Grippy
-                                $h: 4px;
-                                $tbOffset: ($editFrameMovebarH - $h) / 2;
-                                $lrOffset: 25%;
-                                @include grippy($editFrameMovebarColorFg);
-                                content: '';
-                                display: block;
-                                position: absolute;
-                                top: $tbOffset;
-                                right: $lrOffset;
-                                bottom: $tbOffset;
-                                left: $lrOffset;
-                            }
-                        }
-                    }
-
-                    &:hover {
-                        > .c-so-view.has-complex-content {
-                            transition: $transIn;
-                            transition-delay: 0s;
-                            padding-top: $editFrameMovebarH + $interiorMarginSm;
-
-                            > .c-so-view__local-controls {
-                                transform: translateY($editFrameMovebarH);
-                                transition: transform $transInTime ease-in-out;
-                                transition-delay: 0s;
-                            }
-
-                            + .c-frame-edit__move {
-                                transition: $transIn;
-                                transition-delay: 0s;
-                                height: $editFrameMovebarH;
-                            }
-                        }
-                    }
-                }
-            }
-
-            /******************* > 1 ITEMS SELECTED */
-            &.is-multi-selected {
-                .l-layout__frame[s-selected] {
-                    > .c-so-view.has-complex-content + .c-frame-edit__move {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import LayoutDrag from './../LayoutDrag'
 
diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue
index d53ed62d18..3c8e11c3b6 100644
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@@ -56,40 +56,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-telemetry-view {
-        display: flex;
-        align-items: stretch;
-
-        > * {
-            // Label and value holders
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: row;
-           // justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            padding: $interiorMargin;
-
-            > * {
-                // Text elements
-                @include ellipsize();
-            }
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 import printj from 'printj'
diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue
index 9ad2f156bd..7ddc0227ce 100644
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@@ -36,20 +36,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-text-view {
-        display: flex;
-        align-items: stretch;
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 
diff --git a/src/plugins/displayLayout/components/box-view.scss b/src/plugins/displayLayout/components/box-view.scss
new file mode 100644
index 0000000000..bf5b86e24a
--- /dev/null
+++ b/src/plugins/displayLayout/components/box-view.scss
@@ -0,0 +1,8 @@
+.c-box-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+    }
+}
\ No newline at end of file
diff --git a/src/plugins/displayLayout/components/display-layout.scss b/src/plugins/displayLayout/components/display-layout.scss
new file mode 100644
index 0000000000..0b051e2b40
--- /dev/null
+++ b/src/plugins/displayLayout/components/display-layout.scss
@@ -0,0 +1,70 @@
+@mixin displayMarquee($c) {
+    > .c-frame-edit {
+        // All other frames
+        //@include test($c, 0.4);
+        display: block;
+    }
+    > .c-frame > .c-frame-edit {
+        // Line object frame
+        //@include test($c, 0.4);
+        display: block;
+    }
+}
+
+.l-layout {
+    @include abs();
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &__grid-holder {
+        display: none;
+    }
+
+    &__frame {
+        position: absolute;
+    }
+}
+
+.is-editing {
+    .l-shell__main-container {
+        &[s-selected],
+        &[s-selected-parent] {
+            // Display grid and allow edit marquee to display in main layout holder when editing
+            > .l-layout {
+                background: $editUIGridColorBg;
+
+                > [class*="__grid-holder"] {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .l-layout__frame {
+        &[s-selected],
+        &[s-selected-parent] {
+            // Display grid and allow edit marquee to display in nested layouts when editing
+            > * > * > .l-layout {
+                background: $editUIGridColorBg;
+                box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
+
+                > [class*='grid-holder'] {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    /*********************** EDIT MARQUEE CONTROL */
+    *[s-selected-parent] {
+        > .l-layout {
+            // When main shell layout is the parent
+            @include displayMarquee(deeppink);
+        }
+        > * > * > * {
+            // When a sub-layout is the parent
+            @include displayMarquee(blue);
+        }
+    }
+}
diff --git a/src/plugins/displayLayout/components/edit-marquee.scss b/src/plugins/displayLayout/components/edit-marquee.scss
new file mode 100644
index 0000000000..1c7da0ddf9
--- /dev/null
+++ b/src/plugins/displayLayout/components/edit-marquee.scss
@@ -0,0 +1,54 @@
+.c-frame-edit {
+    // In Layouts, this is the editing rect and handles
+    display: none; // Set to display: block in DisplayLayout.vue
+    pointer-events: none;
+    @include abs();
+    border: $editMarqueeBorder;
+
+    &__handle {
+        $d: 6px;
+        $o: floor($d * -0.5);
+        background: $editFrameColorHandleFg;
+        box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+        pointer-events: all;
+        position: absolute;
+        width: $d; height: $d;
+        top: auto; right: auto; bottom: auto; left: auto;
+
+        &:before {
+            // Extended hit area
+            @include abs(-10px);
+            content: '';
+            display: block;
+            z-index: 0;
+        }
+
+        &:hover {
+            background: $editUIColor;
+        }
+
+        &--nwse {
+            cursor: nwse-resize;
+        }
+
+        &--nw {
+            cursor: nw-resize;
+            left: $o; top: $o;
+        }
+
+        &--ne {
+            cursor: ne-resize;
+            right: $o; top: $o;
+        }
+
+        &--se {
+            cursor: se-resize;
+            right: $o; bottom: $o;
+        }
+
+        &--sw {
+            cursor: sw-resize;
+            left: $o; bottom: $o;
+        }
+    }
+}
diff --git a/src/plugins/displayLayout/components/image-view.scss b/src/plugins/displayLayout/components/image-view.scss
new file mode 100644
index 0000000000..a2c4c97dda
--- /dev/null
+++ b/src/plugins/displayLayout/components/image-view.scss
@@ -0,0 +1,10 @@
+.c-image-view {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}
diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss
new file mode 100644
index 0000000000..b9bed8dfa8
--- /dev/null
+++ b/src/plugins/displayLayout/components/layout-frame.scss
@@ -0,0 +1,131 @@
+/******************* FRAME */
+.c-frame {
+    display: flex;
+    flex-direction: column;
+
+    // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
+    > *:first-child {
+        flex: 1 1 auto;
+    }
+}
+
+.c-frame-edit__move {
+    display: none;
+}
+
+.is-editing {
+    /******************* STYLES FOR C-FRAME WHILE EDITING */
+    .c-frame {
+        &:not([s-selected]) {
+            &:hover {
+                border: $editFrameBorderHov;
+            }
+        }
+
+        &[s-selected] {
+            // All frames selected while editing
+            border: $editFrameSelectedBorder;
+            box-shadow: $editFrameSelectedShdw;
+
+            .c-frame-edit__move {
+                cursor: move;
+            }
+        }
+    }
+
+    /******************* DEFAULT STYLES FOR -EDIT__MOVE */
+    // All object types
+    .c-frame-edit__move {
+        @include abs();
+        display: block;
+    }
+
+    // Has-complex-content objects
+    .c-so-view.has-complex-content {
+        transition: $transOut;
+        transition-delay: $moveBarOutDelay;
+
+        > .c-so-view__local-controls {
+            transition: transform 250ms ease-in-out;
+            transition-delay: $moveBarOutDelay;
+        }
+
+        + .c-frame-edit__move {
+            display: none;
+        }
+
+    }
+
+    .l-layout {
+        /******************* 0 - 1 ITEM SELECTED */
+        &:not(.is-multi-selected) {
+            > .l-layout__frame[s-selected] {
+                > .c-so-view.has-complex-content {
+                    > .c-so-view__local-controls {
+                        transition: transform $transOutTime ease-in-out;
+                        transition-delay: $moveBarOutDelay;
+                    }
+
+                    + .c-frame-edit__move {
+                        transition: $transOut;
+                        transition-delay: $moveBarOutDelay;
+                        @include userSelectNone();
+                        background: $editFrameMovebarColorBg;
+                        box-shadow: rgba(black, 0.2) 0 1px;
+                        bottom: auto;
+                        display: block;
+                        height: 0; // Height is set on hover below
+                        opacity: 0.8;
+                        max-height: 100%;
+                        overflow: hidden;
+                        text-align: center;
+
+                        &:before {
+                            // Grippy
+                            $h: 4px;
+                            $tbOffset: ($editFrameMovebarH - $h) / 2;
+                            $lrOffset: 25%;
+                            @include grippy($editFrameMovebarColorFg);
+                            content: '';
+                            display: block;
+                            position: absolute;
+                            top: $tbOffset;
+                            right: $lrOffset;
+                            bottom: $tbOffset;
+                            left: $lrOffset;
+                        }
+                    }
+                }
+
+                &:hover {
+                    > .c-so-view.has-complex-content {
+                        transition: $transIn;
+                        transition-delay: 0s;
+                        padding-top: $editFrameMovebarH + $interiorMarginSm;
+
+                        > .c-so-view__local-controls {
+                            transform: translateY($editFrameMovebarH);
+                            transition: transform $transInTime ease-in-out;
+                            transition-delay: 0s;
+                        }
+
+                        + .c-frame-edit__move {
+                            transition: $transIn;
+                            transition-delay: 0s;
+                            height: $editFrameMovebarH;
+                        }
+                    }
+                }
+            }
+        }
+
+        /******************* > 1 ITEMS SELECTED */
+        &.is-multi-selected {
+            .l-layout__frame[s-selected] {
+                > .c-so-view.has-complex-content + .c-frame-edit__move {
+                    display: block;
+                }
+            }
+        }
+    }
+}
diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss
new file mode 100644
index 0000000000..97fed015c1
--- /dev/null
+++ b/src/plugins/displayLayout/components/telemetry-view.scss
@@ -0,0 +1,29 @@
+.c-telemetry-view {
+    display: flex;
+    align-items: stretch;
+
+    > * {
+        // Label and value holders
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: row;
+       // justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        padding: $interiorMargin;
+
+        > * {
+            // Text elements
+            @include ellipsize();
+        }
+    }
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}
diff --git a/src/plugins/displayLayout/components/text-view.scss b/src/plugins/displayLayout/components/text-view.scss
new file mode 100644
index 0000000000..049da2c726
--- /dev/null
+++ b/src/plugins/displayLayout/components/text-view.scss
@@ -0,0 +1,9 @@
+.c-text-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}
diff --git a/src/plugins/filters/components/FiltersView.vue b/src/plugins/filters/components/FiltersView.vue
index b65d36eb40..eae2bee587 100644
--- a/src/plugins/filters/components/FiltersView.vue
+++ b/src/plugins/filters/components/FiltersView.vue
@@ -25,26 +25,6 @@
 </ul>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-inspector {
-        .c-filter-indication {
-            border-radius: $smallCr;
-            font-size: inherit;
-            padding: $interiorMarginSm $interiorMargin;
-            text-transform: inherit;
-        }
-        .c-filter-tree {
-            // Filters UI uses a tree-based structure
-            .c-properties {
-                // Add extra margin to account for filter-indicator
-                margin-left: 38px;
-            }
-        }
-    }
-</style>
-
 <script>
 import FilterObject from './FilterObject.vue';
 import GlobalFilters from './GlobalFilters.vue'
diff --git a/src/plugins/filters/components/GlobalFilters.vue b/src/plugins/filters/components/GlobalFilters.vue
index b4e02aded4..7f89ad4e39 100644
--- a/src/plugins/filters/components/GlobalFilters.vue
+++ b/src/plugins/filters/components/GlobalFilters.vue
@@ -37,38 +37,6 @@
 </li>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
-        // Appears as a block element beneath tables
-        @include userSelectNone();
-        background: $colorFilterBg;
-        color: $colorFilterFg;
-        display: flex;
-        align-items: center;
-        font-size: 0.9em;
-        margin-top: $interiorMarginSm;
-        padding: 2px;
-        text-transform: uppercase;
-
-        &:before {
-            font-family: symbolsfont-12px;
-            content: $glyph-icon-filter;
-            display: block;
-            font-size: 12px;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    .c-filter-tree-item {
-        &__filter-indicator {
-            color: $colorFilter;
-            width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
-            flex: 0 0 auto;
-        }
-    }
-</style>
-
 <script>
 import FilterField from './FilterField.vue';
 
diff --git a/src/plugins/filters/components/filters-view.scss b/src/plugins/filters/components/filters-view.scss
new file mode 100644
index 0000000000..33d9773ffc
--- /dev/null
+++ b/src/plugins/filters/components/filters-view.scss
@@ -0,0 +1,15 @@
+.c-inspector {
+    .c-filter-indication {
+        border-radius: $smallCr;
+        font-size: inherit;
+        padding: $interiorMarginSm $interiorMargin;
+        text-transform: inherit;
+    }
+    .c-filter-tree {
+        // Filters UI uses a tree-based structure
+        .c-properties {
+            // Add extra margin to account for filter-indicator
+            margin-left: 38px;
+        }
+    }
+}
diff --git a/src/plugins/filters/components/global-filters.scss b/src/plugins/filters/components/global-filters.scss
new file mode 100644
index 0000000000..795c23f4b3
--- /dev/null
+++ b/src/plugins/filters/components/global-filters.scss
@@ -0,0 +1,28 @@
+.c-filter-indication {
+    // Appears as a block element beneath tables
+    @include userSelectNone();
+    background: $colorFilterBg;
+    color: $colorFilterFg;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    margin-top: $interiorMarginSm;
+    padding: 2px;
+    text-transform: uppercase;
+
+    &:before {
+        font-family: symbolsfont-12px;
+        content: $glyph-icon-filter;
+        display: block;
+        font-size: 12px;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+.c-filter-tree-item {
+    &__filter-indicator {
+        color: $colorFilter;
+        width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
+        flex: 0 0 auto;
+    }
+}
diff --git a/src/plugins/flexibleLayout/components/dropHint.vue b/src/plugins/flexibleLayout/components/dropHint.vue
index c8b1a73326..d2a6dc61b0 100644
--- a/src/plugins/flexibleLayout/components/dropHint.vue
+++ b/src/plugins/flexibleLayout/components/dropHint.vue
@@ -33,10 +33,6 @@
 </div>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 export default {
     props:{
diff --git a/src/plugins/flexibleLayout/components/flexible-layout.scss b/src/plugins/flexibleLayout/components/flexible-layout.scss
new file mode 100644
index 0000000000..405c0fc69d
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/flexible-layout.scss
@@ -0,0 +1,320 @@
+@mixin containerGrippy($headerSize, $dir) {
+    position: absolute;
+    $h: 6px;
+    $minorOffset: ($headerSize - $h) / 2;
+    $majorOffset: 35%;
+    content: '';
+    display: block;
+    position: absolute;
+    @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
+    @if $dir == 'x' {
+        top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
+    } @else {
+        top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
+    }
+}
+
+.c-fl {
+    @include abs();
+    display: flex;
+
+    .temp-toolbar {
+        flex: 0 0 auto;
+    }
+
+    &__container-holder {
+        display: flex;
+        flex: 1 1 100%; // Must be 100% to work
+        overflow: auto;
+
+        // Columns by default
+        flex-direction: row;
+        > * + * { margin-left: 1px; }
+
+        &[class*='--rows'] {
+            flex-direction: column;
+            > * + * {
+                margin-left: 0;
+                margin-top: 1px;
+            }
+        }
+    }
+
+    &__empty {
+        @include abs();
+        background: rgba($colorBodyFg, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        > * {
+            font-style: italic;
+            opacity: 0.5;
+        }
+    }
+
+    &__drag-ghost{
+        background: $colorItemTreeHoverBg;
+        color: $colorItemTreeHoverFg;
+        border-radius: $basicCr;
+        display: flex;
+        align-items: center;
+        padding: $interiorMarginLg $interiorMarginLg * 2;
+        position: absolute;
+        top: -10000px;
+        z-index: 2;
+
+        &:before {
+            color: $colorKey;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}
+
+.c-fl-container {
+    /***************************************************** CONTAINERS */
+    $headerSize: 16px;
+
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    // flex-basis is set with inline style in code, controls size
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    &__header {
+        // Only displayed when editing, controlled via JS
+        background: $editFrameMovebarColorBg;
+        color: $editFrameMovebarColorFg;
+        cursor: move;
+        display: flex;
+        align-items: center;
+        flex: 0 0 $headerSize;
+
+        &:before {
+            // Drag grippy
+            @include containerGrippy($headerSize, 'x');
+            opacity: 0.5;
+        }
+    }
+
+    &__size-indicator {
+        position: absolute;
+        display: inline-block;
+        right: $interiorMargin;
+    }
+
+    &__frames-holder {
+        display: flex;
+        flex: 1 1 100%; // Must be 100% to work
+        flex-direction: column; // Default
+        align-content: stretch;
+        align-items: stretch;
+        overflow: hidden; // This sucks, but doing in the short-term
+    }
+
+    .is-editing & {
+        &:hover {
+            .c-fl-container__header {
+                background: $editFrameHovMovebarColorBg;
+                color: $editFrameHovMovebarColorFg;
+
+                &:before {
+                    opacity: .75;
+                }
+            }
+        }
+
+        &[s-selected] {
+            border: $editFrameSelectedBorder;
+
+            .c-fl-container__header {
+                background:$editFrameSelectedMovebarColorBg;
+                color: $editFrameSelectedMovebarColorFg;
+                &:before {
+                    // Grippy
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    /****** THEIR FRAMES */
+    // Frames get styled here because this is particular to their presence in this layout type
+    .c-fl-frame {
+        @include browserPrefix(margin-collapse, collapse);
+    }
+
+    /****** ROWS LAYOUT */
+    .c-fl--rows & {
+        // Layout is rows
+        flex-direction: row;
+
+        &__header {
+            flex-basis: $headerSize;
+            overflow: hidden;
+
+            &:before {
+                // Grippy
+                @include containerGrippy($headerSize, 'y');
+            }
+        }
+
+        &__size-indicator {
+            right: 0;
+            top: $interiorMargin;
+            transform-origin: top right;
+            transform: rotate(-90deg) translateY(-100%);
+        }
+
+        &__frames-holder {
+            flex-direction: row;
+        }
+    }
+}
+
+.c-fl-frame {
+    /***************************************************** CONTAINER FRAMES */
+    $sizeIndicatorM: 16px;
+    $dropHintSize: 15px;
+
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    overflow: hidden; // Needed to allow frames to collapse when sized down
+
+    &__drag-wrapper {
+        flex: 1 1 auto;
+        overflow: auto;
+
+        .is-editing & {
+            > * {
+                pointer-events: none;
+            }
+        }
+    }
+
+    &__header {
+        flex: 0 0 auto;
+        margin-bottom: $interiorMargin;
+    }
+
+    &__size-indicator {
+        $size: 35px;
+
+        @include ellipsize();
+        background: $colorBtnBg;
+        border-top-left-radius: $controlCr;
+        color: $colorBtnFg;
+        display: inline-block;
+        padding: $interiorMarginSm 0;
+        position: absolute;
+        pointer-events: none;
+        text-align: center;
+        width: $size;
+
+        // Changed when layout is different, see below
+        border-top-right-radius: $controlCr;
+        bottom: 1px;
+        right: $sizeIndicatorM;
+    }
+
+    &__drop-hint {
+        flex: 0 0 $dropHintSize;
+        .c-drop-hint {
+            border-radius: $smallCr;
+        }
+    }
+
+    &__resize-handle {
+        $size: 2px;
+        $margin: 3px;
+        $marginHov: 0;
+        $grippyThickness: $size + 6;
+        $grippyLen: $grippyThickness * 2;
+
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 ($margin * 2) + $size;
+        transition: $transOut;
+
+        &:before {
+            // The visible resize line
+            background: $editUIColor;
+            content: '';
+            display: block;
+            flex: 1 1 auto;
+            min-height: $size; min-width: $size;
+        }
+
+        &.vertical {
+            padding: $margin $size;
+            &:hover{
+                cursor: row-resize;
+            }
+        }
+
+        &.horizontal {
+            padding: $size $margin;
+            &:hover{
+                cursor: col-resize;
+            }
+        }
+
+        &:hover {
+            transition: $transOut;
+            &:before {
+                // The visible resize line
+                background: $editUIColorHov;
+            }
+        }
+    }
+
+    // Hide the resize-handles in first and last c-fl-frame elements
+    &:first-child,
+    &:last-child {
+        .c-fl-frame__resize-handle {
+            display: none;
+        }
+    }
+
+    .c-fl--rows & {
+        flex-direction: row;
+
+        &__size-indicator {
+            border-bottom-left-radius: $controlCr;
+            border-top-right-radius: 0;
+            bottom: $sizeIndicatorM;
+            right: 1px;
+        }
+    }
+
+    &--first-in-container {
+        border: none;
+        flex: 0 0 0;
+        .c-fl-frame__drag-wrapper {
+            display: none;
+        }
+
+        &.is-dragging {
+            flex-basis: $dropHintSize;
+        }
+    }
+
+    .is-empty & {
+        &.c-fl-frame--first-in-container {
+            flex: 1 1 auto;
+        }
+
+        &__drop-hint {
+            flex: 1 0 100%;
+            margin: 0;
+        }
+    }
+
+    .c-object-view {
+        display: contents;
+    }
+}
diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue
index 74a2bdc240..2090ff36dd 100644
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue
@@ -86,331 +86,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    @mixin containerGrippy($headerSize, $dir) {
-        position: absolute;
-        $h: 6px;
-        $minorOffset: ($headerSize - $h) / 2;
-        $majorOffset: 35%;
-        content: '';
-        display: block;
-        position: absolute;
-        @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
-        @if $dir == 'x' {
-            top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
-        } @else {
-            top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
-        }
-    }
-
-    .c-fl {
-        @include abs();
-        display: flex;
-
-        .temp-toolbar {
-            flex: 0 0 auto;
-        }
-
-        &__container-holder {
-            display: flex;
-            flex: 1 1 100%; // Must be 100% to work
-            overflow: auto;
-
-            // Columns by default
-            flex-direction: row;
-            > * + * { margin-left: 1px; }
-
-            &[class*='--rows'] {
-                flex-direction: column;
-                > * + * {
-                    margin-left: 0;
-                    margin-top: 1px;
-                }
-            }
-        }
-
-        &__empty {
-            @include abs();
-            background: rgba($colorBodyFg, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-
-            > * {
-                font-style: italic;
-                opacity: 0.5;
-            }
-        }
-
-        &__drag-ghost{
-            background: $colorItemTreeHoverBg;
-            color: $colorItemTreeHoverFg;
-            border-radius: $basicCr;
-            display: flex;
-            align-items: center;
-            padding: $interiorMarginLg $interiorMarginLg * 2;
-            position: absolute;
-            top: -10000px;
-            z-index: 2;
-
-            &:before {
-                color: $colorKey;
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    .c-fl-container {
-        /***************************************************** CONTAINERS */
-        $headerSize: 16px;
-
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-
-        // flex-basis is set with inline style in code, controls size
-        flex-grow: 1;
-        flex-shrink: 1;
-
-        &__header {
-            // Only displayed when editing, controlled via JS
-            background: $editFrameMovebarColorBg;
-            color: $editFrameMovebarColorFg;
-            cursor: move;
-            display: flex;
-            align-items: center;
-            flex: 0 0 $headerSize;
-
-            &:before {
-                // Drag grippy
-                @include containerGrippy($headerSize, 'x');
-                opacity: 0.5;
-            }
-        }
-
-        &__size-indicator {
-            position: absolute;
-            display: inline-block;
-            right: $interiorMargin;
-        }
-
-        &__frames-holder {
-            display: flex;
-            flex: 1 1 100%; // Must be 100% to work
-            flex-direction: column; // Default
-            align-content: stretch;
-            align-items: stretch;
-            overflow: hidden; // This sucks, but doing in the short-term
-        }
-
-        .is-editing & {
-            &:hover {
-                .c-fl-container__header {
-                    background: $editFrameHovMovebarColorBg;
-                    color: $editFrameHovMovebarColorFg;
-
-                    &:before {
-                        opacity: .75;
-                    }
-                }
-            }
-
-            &[s-selected] {
-                border: $editFrameSelectedBorder;
-
-                .c-fl-container__header {
-                    background:$editFrameSelectedMovebarColorBg;
-                    color: $editFrameSelectedMovebarColorFg;
-                    &:before {
-                        // Grippy
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-
-        /****** THEIR FRAMES */
-        // Frames get styled here because this is particular to their presence in this layout type
-        .c-fl-frame {
-            @include browserPrefix(margin-collapse, collapse);
-        }
-
-        /****** ROWS LAYOUT */
-        .c-fl--rows & {
-            // Layout is rows
-            flex-direction: row;
-
-            &__header {
-                flex-basis: $headerSize;
-                overflow: hidden;
-
-                &:before {
-                    // Grippy
-                    @include containerGrippy($headerSize, 'y');
-                }
-            }
-
-            &__size-indicator {
-                right: 0;
-                top: $interiorMargin;
-                transform-origin: top right;
-                transform: rotate(-90deg) translateY(-100%);
-            }
-
-            &__frames-holder {
-                flex-direction: row;
-            }
-        }
-    }
-
-    .c-fl-frame {
-        /***************************************************** CONTAINER FRAMES */
-        $sizeIndicatorM: 16px;
-        $dropHintSize: 15px;
-
-        display: flex;
-        flex: 1 1;
-        flex-direction: column;
-        overflow: hidden; // Needed to allow frames to collapse when sized down
-
-        &__drag-wrapper {
-            flex: 1 1 auto;
-            overflow: auto;
-
-            .is-editing & {
-                > * {
-                    pointer-events: none;
-                }
-            }
-        }
-
-        &__header {
-            flex: 0 0 auto;
-            margin-bottom: $interiorMargin;
-        }
-
-        &__size-indicator {
-            $size: 35px;
-
-            @include ellipsize();
-            background: $colorBtnBg;
-            border-top-left-radius: $controlCr;
-            color: $colorBtnFg;
-            display: inline-block;
-            padding: $interiorMarginSm 0;
-            position: absolute;
-            pointer-events: none;
-            text-align: center;
-            width: $size;
-
-            // Changed when layout is different, see below
-            border-top-right-radius: $controlCr;
-            bottom: 1px;
-            right: $sizeIndicatorM;
-        }
-
-        &__drop-hint {
-            flex: 0 0 $dropHintSize;
-            .c-drop-hint {
-                border-radius: $smallCr;
-            }
-        }
-
-        &__resize-handle {
-            $size: 2px;
-            $margin: 3px;
-            $marginHov: 0;
-            $grippyThickness: $size + 6;
-            $grippyLen: $grippyThickness * 2;
-
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 ($margin * 2) + $size;
-            transition: $transOut;
-
-            &:before {
-                // The visible resize line
-                background: $editUIColor;
-                content: '';
-                display: block;
-                flex: 1 1 auto;
-                min-height: $size; min-width: $size;
-            }
-
-            &.vertical {
-                padding: $margin $size;
-                &:hover{
-                    cursor: row-resize;
-                }
-            }
-
-            &.horizontal {
-                padding: $size $margin;
-                &:hover{
-                    cursor: col-resize;
-                }
-            }
-
-            &:hover {
-                transition: $transOut;
-                &:before {
-                    // The visible resize line
-                    background: $editUIColorHov;
-                }
-            }
-        }
-
-        // Hide the resize-handles in first and last c-fl-frame elements
-        &:first-child,
-        &:last-child {
-            .c-fl-frame__resize-handle {
-                display: none;
-            }
-        }
-
-        .c-fl--rows & {
-            flex-direction: row;
-
-            &__size-indicator {
-                border-bottom-left-radius: $controlCr;
-                border-top-right-radius: 0;
-                bottom: $sizeIndicatorM;
-                right: 1px;
-            }
-        }
-
-        &--first-in-container {
-            border: none;
-            flex: 0 0 0;
-            .c-fl-frame__drag-wrapper {
-                display: none;
-            }
-
-            &.is-dragging {
-                flex-basis: $dropHintSize;
-            }
-        }
-
-        .is-empty & {
-            &.c-fl-frame--first-in-container {
-                flex: 1 1 auto;
-            }
-
-            &__drop-hint {
-                flex: 1 0 100%;
-                margin: 0;
-            }
-        }
-
-        .c-object-view {
-            display: contents;
-        }
-    }
-</style>
-
 <script>
 import ContainerComponent  from './container.vue';
 import Container from '../utils/container';
diff --git a/src/plugins/folderView/components/GridItem.vue b/src/plugins/folderView/components/GridItem.vue
index a8fb21ca32..45495d8947 100644
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@@ -35,132 +35,6 @@
 </a>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            @include headerFont(1.2em);
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
 import objectLink from '../../../ui/mixins/object-link';
diff --git a/src/plugins/folderView/components/GridView.vue b/src/plugins/folderView/components/GridView.vue
index d5a36135f0..6c8e60c4b3 100644
--- a/src/plugins/folderView/components/GridView.vue
+++ b/src/plugins/folderView/components/GridView.vue
@@ -9,154 +9,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* GRID VIEW */
-    .l-grid-view {
-        display: flex;
-        flex-flow: column nowrap;
-        overflow: auto;
-
-        &__item {
-            flex: 0 0 auto;
-            + .l-grid-view__item { margin-top: $interiorMargin; }
-        }
-
-        body.desktop & {
-            flex-flow: row wrap;
-            &__item {
-                height: $gridItemDesk;
-                width: $gridItemDesk;
-                margin: 0 $interiorMargin $interiorMargin 0;
-            }
-        }
-    }
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            font-size: 1.2em;
-            font-weight: 400;
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 
 import compositionLoader from './composition-loader';
diff --git a/src/plugins/folderView/components/ListItem.vue b/src/plugins/folderView/components/ListItem.vue
index 03fbb8a9a8..7524d8b12d 100644
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@@ -28,48 +28,6 @@
 </tr>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* LIST ITEM */
-    .c-list-item {
-        &__name a {
-            display: flex;
-
-            > * + * { margin-left: $interiorMarginSm; }
-        }
-
-        &__type-icon {
-            // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
-            color: $colorKey;
-            display: inline-block;
-            width: 1em;
-            margin-right:$interiorMarginSm;
-        }
-
-        &__name-value {
-            @include ellipsize();
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                &:after {
-                    color: $colorIconAlias;
-                    content: $glyph-icon-link;
-                    font-family: symbolsfont;
-                    display: block;
-                    position: absolute;
-                    text-shadow: rgba(black, 0.5) 0 1px 2px;
-                    top: auto; left: -1px; bottom: 1px; right: auto;
-                    transform-origin: bottom left;
-                    transform: scale(0.65);
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 
 import moment from 'moment';
diff --git a/src/plugins/folderView/components/ListView.vue b/src/plugins/folderView/components/ListView.vue
index 436cea71e7..884392c047 100644
--- a/src/plugins/folderView/components/ListView.vue
+++ b/src/plugins/folderView/components/ListView.vue
@@ -61,46 +61,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* LIST VIEW */
-    .c-list-view {
-        overflow-x: auto !important;
-        overflow-y: auto;
-
-        tbody tr {
-            background: $colorListItemBg;
-            transition: $transOut;
-        }
-
-        body.desktop & {
-            tbody tr {
-                cursor: pointer;
-
-                &:hover {
-                    background: $colorListItemBgHov;
-                    transition: $transIn;
-                }
-            }
-        }
-
-        td {
-            $p: floor($interiorMargin * 1.5);
-            @include ellipsize();
-            line-height: 120%; // Needed for icon alignment
-            max-width: 0;
-            padding-top: $p;
-            padding-bottom: $p;
-            width: 25%;
-
-            &:not(.c-list-item__name) {
-                color: $colorItemFgDetails;
-            }
-        }
-    }
-</style>
-
 <script>
 import compositionLoader from './composition-loader';
 import ListItem from './ListItem.vue';
diff --git a/src/plugins/folderView/components/grid-item.scss b/src/plugins/folderView/components/grid-item.scss
new file mode 100644
index 0000000000..5ccc50b083
--- /dev/null
+++ b/src/plugins/folderView/components/grid-item.scss
@@ -0,0 +1,121 @@
+/******************************* GRID ITEMS */
+.c-grid-item {
+    // Mobile-first
+    @include button($bg: $colorItemBg, $fg: $colorItemFg);
+    cursor: pointer;
+    display: flex;
+    padding: $interiorMarginLg;
+
+    &__type-icon {
+        filter: $colorKeyFilter;
+        flex: 0 0 $gridItemMobile;
+        font-size: floor($gridItemMobile / 2);
+        margin-right: $interiorMarginLg;
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            @include isAlias();
+            color: $colorIconAliasForKeyFilter;
+        }
+    }
+
+    &__details {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        @include ellipsize();
+        color: $colorItemFg;
+        @include headerFont(1.2em);
+        margin-bottom: $interiorMarginSm;
+    }
+
+    &__metadata {
+        color: $colorItemFgDetails;
+        font-size: 0.9em;
+
+        body.mobile & {
+            [class*='__item-count'] {
+                &:before {
+                    content: ' - ';
+                }
+            }
+        }
+    }
+
+    &__controls {
+        color: $colorItemFgDetails;
+        flex: 0 0 64px;
+        font-size: 1.2em;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    body.desktop & {
+        $transOutMs: 300ms;
+        flex-flow: column nowrap;
+        transition: background $transOutMs ease-in-out;
+
+        &:hover {
+            background: $colorItemBgHov;
+            transition: $transIn;
+
+            .c-grid-item__type-icon {
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
+                transition: $transInBounce;
+            }
+        }
+
+        > * {
+            margin: 0; // Reset from mobile
+        }
+
+        &__controls {
+            align-items: start;
+            flex: 0 0 auto;
+            order: 1;
+            .c-info-button,
+            .c-pointer-icon { display: none; }
+        }
+
+        &__type-icon {
+            flex: 1 1 auto;
+            font-size: floor($gridItemDesk / 3);
+            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+            order: 2;
+            transform: scale(0.9);
+            transform-origin: center;
+            transition: all $transOutMs ease-in-out;
+        }
+
+        &__details {
+            flex: 0 0 auto;
+            justify-content: flex-end;
+            order: 3;
+        }
+
+        &__metadata {
+            display: flex;
+
+            &__type {
+                flex: 1 1 auto;
+                @include ellipsize();
+            }
+
+            &__item-count {
+                opacity: 0.7;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss
new file mode 100644
index 0000000000..e809dca574
--- /dev/null
+++ b/src/plugins/folderView/components/grid-view.scss
@@ -0,0 +1,143 @@
+/******************************* GRID VIEW */
+.l-grid-view {
+    display: flex;
+    flex-flow: column nowrap;
+    overflow: auto;
+
+    &__item {
+        flex: 0 0 auto;
+        + .l-grid-view__item { margin-top: $interiorMargin; }
+    }
+
+    body.desktop & {
+        flex-flow: row wrap;
+        &__item {
+            height: $gridItemDesk;
+            width: $gridItemDesk;
+            margin: 0 $interiorMargin $interiorMargin 0;
+        }
+    }
+}
+
+/******************************* GRID ITEMS */
+.c-grid-item {
+    // Mobile-first
+    @include button($bg: $colorItemBg, $fg: $colorItemFg);
+    cursor: pointer;
+    display: flex;
+    padding: $interiorMarginLg;
+
+    &__type-icon {
+        filter: $colorKeyFilter;
+        flex: 0 0 $gridItemMobile;
+        font-size: floor($gridItemMobile / 2);
+        margin-right: $interiorMarginLg;
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            @include isAlias();
+            color: $colorIconAliasForKeyFilter;
+        }
+    }
+
+    &__details {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        @include ellipsize();
+        color: $colorItemFg;
+        font-size: 1.2em;
+        font-weight: 400;
+        margin-bottom: $interiorMarginSm;
+    }
+
+    &__metadata {
+        color: $colorItemFgDetails;
+        font-size: 0.9em;
+
+        body.mobile & {
+            [class*='__item-count'] {
+                &:before {
+                    content: ' - ';
+                }
+            }
+        }
+    }
+
+    &__controls {
+        color: $colorItemFgDetails;
+        flex: 0 0 64px;
+        font-size: 1.2em;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    body.desktop & {
+        $transOutMs: 300ms;
+        flex-flow: column nowrap;
+        transition: background $transOutMs ease-in-out;
+
+        &:hover {
+            background: $colorItemBgHov;
+            transition: $transIn;
+
+            .c-grid-item__type-icon {
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
+                transition: $transInBounce;
+            }
+        }
+
+        > * {
+            margin: 0; // Reset from mobile
+        }
+
+        &__controls {
+            align-items: start;
+            flex: 0 0 auto;
+            order: 1;
+            .c-info-button,
+            .c-pointer-icon { display: none; }
+        }
+
+        &__type-icon {
+            flex: 1 1 auto;
+            font-size: floor($gridItemDesk / 3);
+            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+            order: 2;
+            transform: scale(0.9);
+            transform-origin: center;
+            transition: all $transOutMs ease-in-out;
+        }
+
+        &__details {
+            flex: 0 0 auto;
+            justify-content: flex-end;
+            order: 3;
+        }
+
+        &__metadata {
+            display: flex;
+
+            &__type {
+                flex: 1 1 auto;
+                @include ellipsize();
+            }
+
+            &__item-count {
+                opacity: 0.7;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
diff --git a/src/plugins/folderView/components/list-item.scss b/src/plugins/folderView/components/list-item.scss
new file mode 100644
index 0000000000..264a259a08
--- /dev/null
+++ b/src/plugins/folderView/components/list-item.scss
@@ -0,0 +1,37 @@
+/******************************* LIST ITEM */
+.c-list-item {
+    &__name a {
+        display: flex;
+
+        > * + * { margin-left: $interiorMarginSm; }
+    }
+
+    &__type-icon {
+        // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
+        color: $colorKey;
+        display: inline-block;
+        width: 1em;
+        margin-right:$interiorMarginSm;
+    }
+
+    &__name-value {
+        @include ellipsize();
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            &:after {
+                color: $colorIconAlias;
+                content: $glyph-icon-link;
+                font-family: symbolsfont;
+                display: block;
+                position: absolute;
+                text-shadow: rgba(black, 0.5) 0 1px 2px;
+                top: auto; left: -1px; bottom: 1px; right: auto;
+                transform-origin: bottom left;
+                transform: scale(0.65);
+            }
+        }
+    }
+}
diff --git a/src/plugins/folderView/components/list-view.scss b/src/plugins/folderView/components/list-view.scss
new file mode 100644
index 0000000000..90527e4313
--- /dev/null
+++ b/src/plugins/folderView/components/list-view.scss
@@ -0,0 +1,35 @@
+/******************************* LIST VIEW */
+.c-list-view {
+    overflow-x: auto !important;
+    overflow-y: auto;
+
+    tbody tr {
+        background: $colorListItemBg;
+        transition: $transOut;
+    }
+
+    body.desktop & {
+        tbody tr {
+            cursor: pointer;
+
+            &:hover {
+                background: $colorListItemBgHov;
+                transition: $transIn;
+            }
+        }
+    }
+
+    td {
+        $p: floor($interiorMargin * 1.5);
+        @include ellipsize();
+        line-height: 120%; // Needed for icon alignment
+        max-width: 0;
+        padding-top: $p;
+        padding-bottom: $p;
+        width: 25%;
+
+        &:not(.c-list-item__name) {
+            color: $colorItemFgDetails;
+        }
+    }
+}
diff --git a/src/plugins/notebook/res/templates/snapshotTemplate.html b/src/plugins/notebook/res/templates/snapshotTemplate.html
index 8ca8116ca6..5bd3220409 100644
--- a/src/plugins/notebook/res/templates/snapshotTemplate.html
+++ b/src/plugins/notebook/res/templates/snapshotTemplate.html
@@ -1,29 +1,29 @@
-<div class="u-contents">
-
-    <div class="t-snapshot abs l-view-header">
-        <div class="abs object-browse-bar l-flex-row">
-            <div class="left flex-elem l-flex-row grows">
-                <div class="object-header flex-elem l-flex-row grows">
-                    <div class="type-icon flex-elem embed-icon holder" v-bind:class="embed.cssClass"></div>
-                    <div class="title-label flex-elem holder flex-can-shrink">{{embed.name}}</div>
-                </div>
+<div class="c-notebook-snapshot">
+    <!-- parent container sets up this for flex column layout -->
+    <div class="c-notebook-snapshot__header l-browse-bar">
+        <div class="l-browse-bar__start">
+            <div class="l-browse-bar__object-name--w">
+                <span class="l-browse-bar__object-name"
+                    v-bind:class="embed.cssClass"
+                >
+                    {{embed.name}}
+                </span>
             </div>
         </div>
-    </div>
 
-    <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-        <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
-            SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
-        </div>
-        <a class="s-button icon-pencil" title="Annotate" @click="annotateSnapshot">
-            <span class="title-label">Annotate</span>
-        </a>
-    </div>
-
-    <div class="abs object-holder t-image-holder s-image-holder">
-        <div 
-            class="image-main s-image-main"
-            :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
+        <div class="l-browse-bar__end">
+            <div class="l-browse-bar__snapshot-datetime">
+                SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
+            </div>
+            <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
+                <span class="title-label">Annotate</span>
+            </a>
         </div>
     </div>
-</div>
\ No newline at end of file
+
+    <div class="c-notebook-snapshot__image">
+        <div class="image-main s-image-main"
+            :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+        ></div>
+    </div>
+</div>
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index cb64e4005b..e831676939 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -45,7 +45,10 @@ define([
     './objectMigration/plugin',
     './goToOriginalAction/plugin',
     './clearData/plugin',
-    './webPage/plugin'
+    './webPage/plugin',
+    './themes/espresso',
+    './themes/maelstrom',
+    './themes/snow'
 ], function (
     _,
     UTCTimeSystem,
@@ -71,7 +74,10 @@ define([
     ObjectMigration,
     GoToOriginalAction,
     ClearData,
-    WebPagePlugin
+    WebPagePlugin,
+    Espresso,
+    Maelstrom,
+    Snow
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -173,6 +179,9 @@ define([
     plugins.GoToOriginalAction = GoToOriginalAction.default;
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
+    plugins.Espresso = Espresso.default;
+    plugins.Maelstrom = Maelstrom.default;
+    plugins.Snow = Snow.default;
 
     return plugins;
 });
diff --git a/src/plugins/tabs/components/tabs.scss b/src/plugins/tabs/components/tabs.scss
new file mode 100644
index 0000000000..eb7bfbb410
--- /dev/null
+++ b/src/plugins/tabs/components/tabs.scss
@@ -0,0 +1,58 @@
+.c-tabs-view {
+    $h: 20px;
+    @include abs();
+    display: flex;
+    flex-flow: column nowrap;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__tabs-holder {
+        min-height: $h;
+    }
+
+    &__tab {
+        &:before {
+            margin-right: $interiorMarginSm;
+            opacity: 0.7;
+        }
+    }
+
+    &__object-holder {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+
+        &--hidden {
+            height: 1000px;
+            width: 1000px;
+            position: absolute;
+            left: -9999px;
+            top: -9999px;
+        }
+    }
+
+    &__object-name {
+        flex: 0 0 auto;
+        @include headerFont();
+        font-size: 1.2em !important;
+        margin: $interiorMargin 0 $interiorMarginLg 0;
+    }
+
+    &__object {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 oveflow bug fix
+    }
+
+    &__empty-message {
+        background: rgba($colorBodyFg, 0.1);
+        color: rgba($colorBodyFg, 0.7);
+        font-style: italic;
+        text-align: center;
+        line-height: $h;
+        width: 100%;
+    }
+}
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index 3db1607b3e..262f1bb217 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -55,69 +55,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base.scss';
-
-    .c-tabs-view {
-        $h: 20px;
-        @include abs();
-        display: flex;
-        flex-flow: column nowrap;
-
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
-        &__tabs-holder {
-            min-height: $h;
-        }
-
-        &__tab {
-            &:before {
-                margin-right: $interiorMarginSm;
-                opacity: 0.7;
-            }
-        }
-
-        &__object-holder {
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: column;
-
-            &--hidden {
-                height: 1000px;
-                width: 1000px;
-                position: absolute;
-                left: -9999px;
-                top: -9999px;
-            }
-        }
-
-        &__object-name {
-            flex: 0 0 auto;
-            @include headerFont();
-            font-size: 1.2em !important;
-            margin: $interiorMargin 0 $interiorMarginLg 0;
-        }
-
-        &__object {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-            height: 0; // Chrome 73 oveflow bug fix
-        }
-
-        &__empty-message {
-            background: rgba($colorBodyFg, 0.1);
-            color: rgba($colorBodyFg, 0.7);
-            font-style: italic;
-            text-align: center;
-            line-height: $h;
-            width: 100%;
-        }
-    }
-</style>
-
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
 import _ from 'lodash';
diff --git a/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue b/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
index 0231cc46bd..5a93fd324b 100644
--- a/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
+++ b/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
@@ -16,47 +16,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
-        @include userSelectNone();
-        background: $colorFilterBg;
-        color: $colorFilterFg;
-        display: flex;
-        align-items: center;
-        font-size: 0.9em;
-        margin-top: $interiorMarginSm;
-        padding: 2px;
-        text-transform: uppercase;
-
-        &:before {
-            font-family: symbolsfont-12px;
-            content: $glyph-icon-filter;
-            display: block;
-            font-size: 12px;
-            margin-right: $interiorMarginSm;
-        }
-
-        &__mixed {
-            margin-right: $interiorMarginSm;
-        }
-
-        &--mixed {
-            .c-filter-indication__mixed {
-                font-style: italic;
-            }
-        }
-
-        &__label {
-            + .c-filter-indication__label {
-                &:before {
-                    content: ',';
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 const FILTER_INDICATOR_LABEL = 'Filters:';
 const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
diff --git a/src/plugins/telemetryTable/components/table-cell.vue b/src/plugins/telemetryTable/components/table-cell.vue
index 387e923d55..c2758d4728 100644
--- a/src/plugins/telemetryTable/components/table-cell.vue
+++ b/src/plugins/telemetryTable/components/table-cell.vue
@@ -27,6 +27,7 @@
     {{ formattedValue }}
 </td>
 </template>
+
 <script>
 export default {
     inject: ['openmct'],
diff --git a/src/plugins/telemetryTable/components/table-configuration.vue b/src/plugins/telemetryTable/components/table-configuration.vue
index b92c18473e..cc47432ad8 100644
--- a/src/plugins/telemetryTable/components/table-configuration.vue
+++ b/src/plugins/telemetryTable/components/table-configuration.vue
@@ -51,9 +51,6 @@
 </div>
 </template>
 
-<style>
-</style>
-
 <script>
 import TelemetryTableColumn from '../TelemetryTableColumn';
 
diff --git a/src/plugins/telemetryTable/components/table-row.scss b/src/plugins/telemetryTable/components/table-row.scss
new file mode 100644
index 0000000000..f21b297f23
--- /dev/null
+++ b/src/plugins/telemetryTable/components/table-row.scss
@@ -0,0 +1,9 @@
+.noselect {
+-webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
+}
diff --git a/src/plugins/telemetryTable/components/table-row.vue b/src/plugins/telemetryTable/components/table-row.vue
index 8987c4179b..353b4cb942 100644
--- a/src/plugins/telemetryTable/components/table-row.vue
+++ b/src/plugins/telemetryTable/components/table-row.vue
@@ -42,18 +42,6 @@
 </tr>
 </template>
 
-<style>
-    .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-        -webkit-user-select: none; /* Safari */
-        -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Firefox */
-            -ms-user-select: none; /* Internet Explorer/Edge */
-                user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome and Opera */
-    }
-</style>
-
 <script>
 import TableCell from './table-cell.vue';
 
diff --git a/src/plugins/telemetryTable/components/table.scss b/src/plugins/telemetryTable/components/table.scss
new file mode 100644
index 0000000000..fc56f253fd
--- /dev/null
+++ b/src/plugins/telemetryTable/components/table.scss
@@ -0,0 +1,175 @@
+.c-telemetry-table__drop-target {
+    position: absolute;
+    width: 2px;
+    background-color: $editUIColor;
+    box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
+    z-index: 1;
+    pointer-events: none;
+}
+
+.c-telemetry-table {
+    // Table that displays telemetry in a scrolling body area
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    th, td {
+        display: block;
+        flex: 1 0 auto;
+        width: 100px;
+        vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
+    }
+
+    td {
+        color: $colorTelemFresh;
+    }
+
+    /******************************* WRAPPERS */
+    &__headers-w {
+        // Wraps __headers table
+        flex: 0 0 auto;
+        overflow: hidden;
+        background: $colorTabHeaderBg;
+    }
+
+    /******************************* TABLES */
+    &__headers,
+    &__body {
+        tr {
+            display: flex;
+            align-items: stretch;
+        }
+    }
+
+    &__headers {
+        // A table
+        thead {
+            display: block;
+        }
+
+        &__labels {
+            // Top row, has labels
+            .c-telemetry-table__headers__content {
+                // Holds __label, sort indicator and resize-hitarea
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+            }
+        }
+    }
+
+    &__headers__label {
+        overflow: hidden;
+        flex: 0 1 auto;
+    }
+
+    &__resize-hitarea {
+        // In table-column-header.vue
+        @include abs();
+        display: none; // Set to display: block in .is-editing section below
+        left: auto; right: -1 * $tabularTdPadLR;
+        width: $tableResizeColHitareaD;
+        cursor: col-resize;
+        transform: translateX(50%); // Move so this element sits over border between columns
+    }
+
+    /******************************* ELEMENTS */
+    &__scroll-forcer {
+        // Force horz scroll when needed; width set via JS
+        font-size: 0;
+        height: 1px; // Height 0 won't force scroll properly
+        position: relative;
+    }
+
+    /******************************* WRAPPERS */
+    &__body-w {
+        // Wraps __body table provides scrolling
+        flex: 1 1 100%;
+        height: 0; // Fixes Chrome 73 overflow bug
+        overflow-x: auto;
+        overflow-y: scroll;
+    }
+
+    /******************************* TABLES */
+    &__body {
+        // A table
+        flex: 1 1 100%;
+        overflow-x: auto;
+
+        tr {
+            display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
+            align-items: stretch;
+            position: absolute;
+            height: 18px; // Needed when a row has empty values in its cells
+
+            &.is-selected {
+                background-color: $colorSelectedBg !important;
+                color: $colorSelectedFg !important;
+                td {
+                    background: none !important;
+                    color: inherit !important;
+                }
+            }
+        }
+
+        td {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__sizing {
+        // A table
+        display: table;
+        z-index: -1;
+        visibility: hidden;
+        pointer-events: none;
+        position: absolute;
+
+        //Add some padding to allow for decorations such as limits indicator
+        tr {
+            display: table-row;
+        }
+
+        th, td {
+            display: table-cell;
+            padding-right: 10px;
+            padding-left: 10px;
+            white-space: nowrap;
+        }
+    }
+}
+
+/******************************* EDITING */
+.is-editing {
+    .c-telemetry-table__headers__labels {
+        th[draggable],
+        th[draggable] > * {
+            cursor: move;
+        }
+
+        th[draggable]:hover {
+            $b: $editFrameHovMovebarColorBg;
+            background: $b;
+            > * { background: $b; }
+        }
+    }
+
+    .c-telemetry-table__resize-hitarea {
+        display: block;
+    }
+}
+
+.paused {
+    border: 1px solid #ff9900;
+}
+
+/******************************* LEGACY */
+.s-status-taking-snapshot,
+.overlay.snapshot {
+    // Handle overflow-y issues with tables and html2canvas
+    // Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
+    .c-table__body-w { overflow: auto; }
+}
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
index 9a81dd13f3..0e41447750 100644
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@@ -198,186 +198,6 @@
 </div><!-- closes c-table-wrapper -->
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-telemetry-table__drop-target {
-        position: absolute;
-        width: 2px;
-        background-color: $editUIColor;
-        box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
-        z-index: 1;
-        pointer-events: none;
-    }
-
-    .c-telemetry-table {
-        // Table that displays telemetry in a scrolling body area
-        display: flex;
-        flex-flow: column nowrap;
-        justify-content: flex-start;
-        overflow: hidden;
-
-        th, td {
-            display: block;
-            flex: 1 0 auto;
-            width: 100px;
-            vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
-        }
-
-        td {
-            color: $colorTelemFresh;
-        }
-
-        /******************************* WRAPPERS */
-        &__headers-w {
-            // Wraps __headers table
-            flex: 0 0 auto;
-            overflow: hidden;
-            background: $colorTabHeaderBg;
-        }
-
-        /******************************* TABLES */
-        &__headers,
-        &__body {
-            tr {
-                display: flex;
-                align-items: stretch;
-            }
-        }
-
-        &__headers {
-            // A table
-            thead {
-                display: block;
-            }
-
-            &__labels {
-                // Top row, has labels
-                .c-telemetry-table__headers__content {
-                    // Holds __label, sort indicator and resize-hitarea
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                }
-            }
-        }
-
-        &__headers__label {
-            overflow: hidden;
-            flex: 0 1 auto;
-        }
-
-        &__resize-hitarea {
-            // In table-column-header.vue
-            @include abs();
-            display: none; // Set to display: block in .is-editing section below
-            left: auto; right: -1 * $tabularTdPadLR;
-            width: $tableResizeColHitareaD;
-            cursor: col-resize;
-            transform: translateX(50%); // Move so this element sits over border between columns
-        }
-
-        /******************************* ELEMENTS */
-        &__scroll-forcer {
-            // Force horz scroll when needed; width set via JS
-            font-size: 0;
-            height: 1px; // Height 0 won't force scroll properly
-            position: relative;
-        }
-
-        /******************************* WRAPPERS */
-        &__body-w {
-            // Wraps __body table provides scrolling
-            flex: 1 1 100%;
-            height: 0; // Fixes Chrome 73 overflow bug
-            overflow-x: auto;
-            overflow-y: scroll;
-        }
-
-        /******************************* TABLES */
-        &__body {
-            // A table
-            flex: 1 1 100%;
-            overflow-x: auto;
-
-            tr {
-                display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
-                align-items: stretch;
-                position: absolute;
-                height: 18px; // Needed when a row has empty values in its cells
-
-                &.is-selected {
-                    background-color: $colorSelectedBg !important;
-                    color: $colorSelectedFg !important;
-                    td {
-                        background: none !important;
-                        color: inherit !important;
-                    }
-                }
-            }
-
-            td {
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &__sizing {
-            // A table
-            display: table;
-            z-index: -1;
-            visibility: hidden;
-            pointer-events: none;
-            position: absolute;
-
-            //Add some padding to allow for decorations such as limits indicator
-            tr {
-                display: table-row;
-            }
-
-            th, td {
-                display: table-cell;
-                padding-right: 10px;
-                padding-left: 10px;
-                white-space: nowrap;
-            }
-        }
-    }
-
-    /******************************* EDITING */
-    .is-editing {
-        .c-telemetry-table__headers__labels {
-            th[draggable],
-            th[draggable] > * {
-                cursor: move;
-            }
-
-            th[draggable]:hover {
-                $b: $editFrameHovMovebarColorBg;
-                background: $b;
-                > * { background: $b; }
-            }
-        }
-
-        .c-telemetry-table__resize-hitarea {
-            display: block;
-        }
-    }
-
-    .paused {
-        border: 1px solid #ff9900;
-    }
-
-    /******************************* LEGACY */
-    .s-status-taking-snapshot,
-    .overlay.snapshot {
-        // Handle overflow-y issues with tables and html2canvas
-        // Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
-        .c-table__body-w { overflow: auto; }
-    }
-</style>
-
 <script>
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
diff --git a/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss b/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss
new file mode 100644
index 0000000000..818612287d
--- /dev/null
+++ b/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss
@@ -0,0 +1,37 @@
+.c-filter-indication {
+    @include userSelectNone();
+    background: $colorFilterBg;
+    color: $colorFilterFg;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    margin-top: $interiorMarginSm;
+    padding: 2px;
+    text-transform: uppercase;
+
+    &:before {
+        font-family: symbolsfont-12px;
+        content: $glyph-icon-filter;
+        display: block;
+        font-size: 12px;
+        margin-right: $interiorMarginSm;
+    }
+
+    &__mixed {
+        margin-right: $interiorMarginSm;
+    }
+
+    &--mixed {
+        .c-filter-indication__mixed {
+            font-style: italic;
+        }
+    }
+
+    &__label {
+        + .c-filter-indication__label {
+            &:before {
+                content: ',';
+            }
+        }
+    }
+}
diff --git a/src/plugins/themes/espresso-theme.scss b/src/plugins/themes/espresso-theme.scss
new file mode 100644
index 0000000000..ad09eaf996
--- /dev/null
+++ b/src/plugins/themes/espresso-theme.scss
@@ -0,0 +1,22 @@
+@import "~styles/vendor/normalize-min";
+@import "~styles/constants";
+@import "~styles/constants-mobile.scss";
+
+@import "~styles/constants-espresso";
+
+@import "~styles/mixins";
+@import "~styles/animations";
+@import "~styles/about";
+@import "~styles/glyphs";
+@import "~styles/global";
+@import "~styles/status";
+@import "~styles/controls";
+@import "~styles/forms";
+@import "~styles/table";
+@import "~styles/layout";
+@import "~styles/legacy";
+@import "~styles/legacy-plots";
+@import "~styles/plotly";
+@import "~styles/legacy-messages";
+
+@import "~styles/vue-styles.scss";
\ No newline at end of file
diff --git a/src/plugins/themes/espresso.js b/src/plugins/themes/espresso.js
new file mode 100644
index 0000000000..d403c67696
--- /dev/null
+++ b/src/plugins/themes/espresso.js
@@ -0,0 +1,7 @@
+import { installTheme } from './installTheme';
+
+export default function plugin() {
+    return function install(openmct) {
+        installTheme(openmct, 'espresso');
+    };
+}
diff --git a/src/plugins/themes/installTheme.js b/src/plugins/themes/installTheme.js
new file mode 100644
index 0000000000..5b7b3a30bf
--- /dev/null
+++ b/src/plugins/themes/installTheme.js
@@ -0,0 +1,18 @@
+const dataAttribute = 'theme';
+
+export const installTheme = (openmct, themeName) => {
+    const currentTheme = document.querySelector(`link[data-${dataAttribute}]`);
+    if (currentTheme) {
+        currentTheme.remove();
+    }
+
+    const newTheme = document.createElement('link');
+    newTheme.setAttribute('rel', 'stylesheet');
+
+    // eslint-disable-next-line no-undef
+    const href = `${openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}${themeName}Theme.css`;
+    newTheme.setAttribute('href', href);
+    newTheme.dataset[dataAttribute] = themeName;
+
+    document.head.appendChild(newTheme);
+}
diff --git a/src/plugins/themes/maelstrom-theme.scss b/src/plugins/themes/maelstrom-theme.scss
new file mode 100644
index 0000000000..f85bb9fbe6
--- /dev/null
+++ b/src/plugins/themes/maelstrom-theme.scss
@@ -0,0 +1,22 @@
+@import "~styles/vendor/normalize-min";
+@import "~styles/constants";
+@import "~styles/constants-mobile.scss";
+
+@import "~styles/constants-maelstrom";
+
+@import "~styles/mixins";
+@import "~styles/animations";
+@import "~styles/about";
+@import "~styles/glyphs";
+@import "~styles/global";
+@import "~styles/status";
+@import "~styles/controls";
+@import "~styles/forms";
+@import "~styles/table";
+@import "~styles/layout";
+@import "~styles/legacy";
+@import "~styles/legacy-plots";
+@import "~styles/plotly";
+@import "~styles/legacy-messages";
+
+@import "~styles/vue-styles.scss";
\ No newline at end of file
diff --git a/src/plugins/themes/maelstrom.js b/src/plugins/themes/maelstrom.js
new file mode 100644
index 0000000000..c551b1f729
--- /dev/null
+++ b/src/plugins/themes/maelstrom.js
@@ -0,0 +1,7 @@
+import { installTheme } from './installTheme';
+
+export default function plugin() {
+    return function install(openmct) {
+        installTheme(openmct, 'maelstrom');
+    };
+}
diff --git a/src/plugins/themes/snow-theme.scss b/src/plugins/themes/snow-theme.scss
new file mode 100644
index 0000000000..df9c10d384
--- /dev/null
+++ b/src/plugins/themes/snow-theme.scss
@@ -0,0 +1,22 @@
+@import "~styles/vendor/normalize-min";
+@import "~styles/constants";
+@import "~styles/constants-mobile.scss";
+
+@import "~styles/constants-snow";
+
+@import "~styles/mixins";
+@import "~styles/animations";
+@import "~styles/about";
+@import "~styles/glyphs";
+@import "~styles/global";
+@import "~styles/status";
+@import "~styles/controls";
+@import "~styles/forms";
+@import "~styles/table";
+@import "~styles/layout";
+@import "~styles/legacy";
+@import "~styles/legacy-plots";
+@import "~styles/plotly";
+@import "~styles/legacy-messages";
+
+@import "~styles/vue-styles.scss";
\ No newline at end of file
diff --git a/src/plugins/themes/snow.js b/src/plugins/themes/snow.js
new file mode 100644
index 0000000000..3befb82252
--- /dev/null
+++ b/src/plugins/themes/snow.js
@@ -0,0 +1,7 @@
+import { installTheme } from './installTheme';
+
+export default function plugin() {
+    return function install(openmct) {
+        installTheme(openmct, 'snow');
+    };
+}
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue
index 22ed131302..63c3ced731 100644
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -139,190 +139,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-input--submit {
-        // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
-        visibility: none;
-        height: 0;
-        width: 0;
-        padding: 0;
-    }
-
-    /*********************************************** CONDUCTOR LAYOUT */
-    .c-conductor {
-        &__time-bounds {
-            display: grid;
-            grid-column-gap: $interiorMargin;
-            grid-row-gap: $interiorMargin;
-            align-items: center;
-
-            // Default: fixed mode, desktop
-            grid-template-rows: 1fr;
-            grid-template-columns: 20px auto 1fr auto;
-            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
-        }
-
-        &__mode-icon {
-            grid-area: tc-mode-icon;
-        }
-
-        &__start-fixed,
-        &__start-delta {
-            grid-area: tc-start;
-            display: flex;
-        }
-
-        &__end-fixed,
-        &__end-delta {
-            grid-area: tc-end;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        &__ticks {
-            grid-area: tc-ticks;
-        }
-
-        &__controls {
-            grid-area: tc-controls;
-            display: flex;
-            align-items: center;
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        [class*='-delta'] {
-            &:before {
-                content: $glyph-icon-clock;
-                font-family: symbolsfont;
-            }
-        }
-
-        &.is-realtime-mode {
-            .c-conductor__time-bounds {
-                grid-template-columns: 20px auto 1fr auto auto;
-                grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
-            }
-
-            .c-conductor__end-fixed {
-                grid-area: tc-updated;
-            }
-        }
-
-        body.phone.portrait & {
-            .c-conductor__time-bounds {
-                grid-row-gap: $interiorMargin;
-                grid-template-rows: auto auto;
-                grid-template-columns: 20px auto auto;
-            }
-
-            .c-conductor__controls {
-                padding-left: 25px; // Line up visually with other controls
-            }
-
-            &__mode-icon {
-                grid-row: 1;
-            }
-
-            &__ticks,
-            &__zoom {
-                display: none;
-            }
-
-            &.is-fixed-mode {
-                [class*='__start-fixed'],
-                [class*='__end-fixed'] {
-                    [class*='__label'] {
-                        // Start and end are in separate columns; make the labels line up
-                        width: 30px;
-                    }
-                }
-
-                [class*='__end-input'] {
-                    justify-content: flex-start;
-                }
-
-                .c-conductor__time-bounds {
-                    grid-template-areas:
-                        "tc-mode-icon tc-start tc-start"
-                        "tc-mode-icon tc-end tc-end"
-                    }
-                }
-
-            &.is-realtime-mode {
-                .c-conductor__time-bounds {
-                    grid-template-areas:
-                        "tc-mode-icon tc-start tc-updated"
-                        "tc-mode-icon tc-end tc-end";
-                }
-
-                .c-conductor__end-fixed {
-                    justify-content: flex-end;
-                }
-            }
-        }
-    }
-
-    .c-conductor-input {
-        color: $colorInputFg;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-
-        &:before {
-            // Realtime-mode clock icon symbol
-            margin-right: $interiorMarginSm;
-        }
-
-        .c-direction-indicator {
-            // Holds realtime-mode + and - symbols
-            font-size: 0.7em;
-        }
-
-        input:invalid {
-            background: rgba($colorFormInvalid, 0.5);
-        }
-    }
-
-    .is-realtime-mode {
-        button {
-            @include themedButton($colorTimeBg);
-            color: $colorTimeFg;
-
-            &:hover {
-                background: $colorTimeHov !important;
-                color: $colorTimeFg !important;
-            }
-        }
-
-        .c-conductor-input {
-            &:before {
-                color: $colorTime;
-            }
-        }
-
-        .c-conductor__end-fixed {
-            // Displays last RT udpate
-            color: $colorTime;
-
-            input {
-                // Remove input look
-                background: none;
-                box-shadow: none;
-                color: $colorTime;
-                pointer-events: none;
-            }
-        }
-    }
-</style>
-
 <script>
 import ConductorMode from './ConductorMode.vue';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index f58cd52d4e..da7871b045 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -27,90 +27,6 @@
 ></div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-conductor-axis {
-        $h: 18px;
-        $tickYPos: ($h / 2) + 12px;
-
-        @include userSelectNone();
-        @include bgTicks($c: rgba($colorBodyFg, 0.4));
-        background-position: 0 50%;
-        background-size: 5px 2px;
-        border-radius: $controlCr;
-        height: $h;
-
-        svg {
-            text-rendering: geometricPrecision;
-            width: 100%;
-            height: 100%;
-            > g {
-                // Overall Tick holder
-                transform: translateY($tickYPos);
-                path {
-                    // Domain line
-                    display: none;
-                }
-
-                g {
-                    // Each tick. These move on drag.
-                    line {
-                        // Line beneath ticks
-                        display: none;
-                    }
-                }
-            }
-
-            text {
-                // Tick labels
-                fill: $colorBodyFg;
-                font-size: 1em;
-                paint-order: stroke;
-                font-weight: bold;
-                stroke: $colorBodyBg;
-                stroke-linecap: butt;
-                stroke-linejoin: bevel;
-                stroke-width: 6px;
-            }
-        }
-
-        body.desktop .is-fixed-mode & {
-            @include cursorGrab();
-            background-size: 3px 30%;
-            background-color: $colorBodyBgSubtle;
-            box-shadow: inset rgba(black, 0.4) 0 1px 1px;
-            transition: $transOut;
-
-            svg text {
-                fill: $colorBodyFg;
-                stroke: $colorBodyBgSubtle;
-                transition: $transOut;
-            }
-
-            &:hover,
-            &:active {
-                $c: $colorKeySubtle;
-                background-color: $c;
-                transition: $transIn;
-                svg text {
-                    stroke: $c;
-                    transition: $transIn;
-                }
-            }
-        }
-
-        .is-realtime-mode & {
-            $c: 1px solid rgba($colorTime, 0.7);
-            border-left: $c;
-            border-right: $c;
-            svg text {
-                fill: $colorTime;
-            }
-        }
-    }
-</style>
-
 <script>
 
 import * as d3Selection from 'd3-selection';
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index 00bcf097e5..070a711cc5 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -59,25 +59,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-conductor__mode-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>
 import toggleMixin from '../../ui/mixins/toggle-mixin';
 
diff --git a/src/plugins/timeConductor/ConductorModeIcon.vue b/src/plugins/timeConductor/ConductorModeIcon.vue
index 64022e76ea..d343f5a771 100644
--- a/src/plugins/timeConductor/ConductorModeIcon.vue
+++ b/src/plugins/timeConductor/ConductorModeIcon.vue
@@ -25,115 +25,3 @@
     <div class="hand-big"></div>
 </div>
 </template>
-
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @keyframes clock-hands {
-        0% { transform: translate(-50%, -50%) rotate(0deg); }
-        100% { transform: translate(-50%, -50%) rotate(360deg);  }
-    }
-
-    @keyframes clock-hands-sticky {
-        0% { transform: translate(-50%, -50%) rotate(0deg); }
-        7% { transform: translate(-50%, -50%) rotate(0deg); }
-        8% { transform: translate(-50%, -50%) rotate(30deg); }
-        15% { transform: translate(-50%, -50%) rotate(30deg); }
-        16% { transform: translate(-50%, -50%) rotate(60deg); }
-        24% { transform: translate(-50%, -50%) rotate(60deg); }
-        25% { transform: translate(-50%, -50%) rotate(90deg); }
-        32% { transform: translate(-50%, -50%) rotate(90deg); }
-        33% { transform: translate(-50%, -50%) rotate(120deg); }
-        40% { transform: translate(-50%, -50%) rotate(120deg); }
-        41% { transform: translate(-50%, -50%) rotate(150deg); }
-        49% { transform: translate(-50%, -50%) rotate(150deg); }
-        50% { transform: translate(-50%, -50%) rotate(180deg); }
-        57% { transform: translate(-50%, -50%) rotate(180deg); }
-        58% { transform: translate(-50%, -50%) rotate(210deg); }
-        65% { transform: translate(-50%, -50%) rotate(210deg); }
-        66% { transform: translate(-50%, -50%) rotate(240deg); }
-        74% { transform: translate(-50%, -50%) rotate(240deg); }
-        75% { transform: translate(-50%, -50%) rotate(270deg); }
-        82% { transform: translate(-50%, -50%) rotate(270deg); }
-        83% { transform: translate(-50%, -50%) rotate(300deg); }
-        90% { transform: translate(-50%, -50%) rotate(300deg); }
-        91% { transform: translate(-50%, -50%) rotate(330deg); }
-        99% { transform: translate(-50%, -50%) rotate(330deg); }
-        100% { transform: translate(-50%, -50%) rotate(360deg); }
-    }
-
-
-    .c-clock-symbol {
-        $c: $colorBtnBg; //$colorObjHdrIc;
-        $d: 18px;
-        height: $d;
-        width: $d;
-        position: relative;
-
-        &:before {
-            font-family: symbolsfont;
-            color: $c;
-            content: $glyph-icon-brackets;
-            font-size: $d;
-            line-height: normal;
-            display: block;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-        }
-
-        // Clock hands
-        div[class*="hand"] {
-            $handW: 2px;
-            $handH: $d * 0.4;
-            animation-iteration-count: infinite;
-            animation-timing-function: linear;
-            transform-origin: bottom;
-            position: absolute;
-            height: $handW;
-            width: $handW;
-            left: 50%;
-            top: 50%;
-            z-index: 2;
-            &:before {
-                background: $c;
-                content: '';
-                display: block;
-                position: absolute;
-                width: 100%;
-                bottom: -1px;
-            }
-            &.hand-little {
-                z-index: 2;
-                animation-duration: 12s;
-                transform: translate(-50%, -50%) rotate(120deg);
-                &:before {
-                    height: ceil($handH * 0.6);
-                }
-            }
-            &.hand-big {
-                z-index: 1;
-                animation-duration: 1s;
-                transform: translate(-50%, -50%);
-                &:before {
-                    height: $handH;
-                }
-            }
-        }
-
-        // Modes
-        .is-realtime-mode &,
-        .is-lad-mode & {
-            &:before {
-                // Brackets icon
-                color: $colorTime;
-            }
-            div[class*="hand"] {
-                animation-name: clock-hands;
-                &:before {
-                    background: $colorTime;
-                }
-            }
-        }
-    }
-</style>
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index 9ea52428e6..a28e1c939f 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -84,107 +84,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************************************** PICKER */
-    .c-datetime-picker {
-        @include userSelectNone();
-        padding: $interiorMarginLg !important;
-        display: flex !important; // Override .c-menu display: block;
-        flex-direction: column;
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
-        &__close-button {
-            display: none; // Only show when body.phone, see below.
-        }
-
-        &__pager {
-            flex: 0 0 auto;
-        }
-
-        &__calendar {
-            border-top: 1px solid $colorInteriorBorder;
-            flex: 1 1 auto;
-        }
-    }
-
-    .c-pager {
-        display: grid;
-        grid-column-gap: $interiorMargin;
-        grid-template-rows: 1fr;
-        grid-template-columns: auto 1fr auto;
-        align-items: center;
-
-        .c-icon-button {
-            font-size: 0.8em;
-        }
-
-        &__month-year {
-            text-align: center;
-        }
-    }
-
-    /******************************************************** CALENDAR */
-    .c-calendar {
-        display: grid;
-        grid-template-columns: repeat(7, min-content);
-        grid-template-rows: auto;
-        grid-gap: 1px;
-        height: 100%;
-
-        $mutedOpacity: 0.5;
-
-        ul {
-            display: contents;
-            &[class*='--header'] {
-                pointer-events: none;
-                li {
-                    opacity: $mutedOpacity;
-                }
-            }
-        }
-
-        li {
-            display: flex;
-            flex-direction: column;
-            justify-content: center !important;
-            padding: $interiorMargin;
-
-            &.is-in-month {
-                background: $colorMenuElementHilite;
-            }
-        }
-
-        &__day {
-            &--sub {
-                opacity: $mutedOpacity;
-                font-size: 0.8em;
-            }
-        }
-    }
-
-    /******************************************************** MOBILE */
-    body.phone {
-        .c-datetime-picker {
-            &.c-menu {
-                @include modalFullScreen();
-            }
-
-            &__close-button {
-                display: flex;
-                justify-content: flex-end;
-            }
-        }
-
-        .c-calendar {
-            grid-template-columns: repeat(7, auto);
-        }
-    }
-</style>
-
 <script>
 import moment from 'moment';
 import toggleMixin from '../../ui/mixins/toggle-mixin';
diff --git a/src/plugins/timeConductor/conductor-axis.scss b/src/plugins/timeConductor/conductor-axis.scss
new file mode 100644
index 0000000000..23ded63eaf
--- /dev/null
+++ b/src/plugins/timeConductor/conductor-axis.scss
@@ -0,0 +1,79 @@
+.c-conductor-axis {
+    $h: 18px;
+    $tickYPos: ($h / 2) + 12px;
+
+    @include userSelectNone();
+    @include bgTicks($c: rgba($colorBodyFg, 0.4));
+    background-position: 0 50%;
+    background-size: 5px 2px;
+    border-radius: $controlCr;
+    height: $h;
+
+    svg {
+        text-rendering: geometricPrecision;
+        width: 100%;
+        height: 100%;
+        > g {
+            // Overall Tick holder
+            transform: translateY($tickYPos);
+            path {
+                // Domain line
+                display: none;
+            }
+
+            g {
+                // Each tick. These move on drag.
+                line {
+                    // Line beneath ticks
+                    display: none;
+                }
+            }
+        }
+
+        text {
+            // Tick labels
+            fill: $colorBodyFg;
+            font-size: 1em;
+            paint-order: stroke;
+            font-weight: bold;
+            stroke: $colorBodyBg;
+            stroke-linecap: butt;
+            stroke-linejoin: bevel;
+            stroke-width: 6px;
+        }
+    }
+
+    body.desktop .is-fixed-mode & {
+        @include cursorGrab();
+        background-size: 3px 30%;
+        background-color: $colorBodyBgSubtle;
+        box-shadow: inset rgba(black, 0.4) 0 1px 1px;
+        transition: $transOut;
+
+        svg text {
+            fill: $colorBodyFg;
+            stroke: $colorBodyBgSubtle;
+            transition: $transOut;
+        }
+
+        &:hover,
+        &:active {
+            $c: $colorKeySubtle;
+            background-color: $c;
+            transition: $transIn;
+            svg text {
+                stroke: $c;
+                transition: $transIn;
+            }
+        }
+    }
+
+    .is-realtime-mode & {
+        $c: 1px solid rgba($colorTime, 0.7);
+        border-left: $c;
+        border-right: $c;
+        svg text {
+            fill: $colorTime;
+        }
+    }
+}
diff --git a/src/plugins/timeConductor/conductor-mode-icon.scss b/src/plugins/timeConductor/conductor-mode-icon.scss
new file mode 100644
index 0000000000..9306d023b9
--- /dev/null
+++ b/src/plugins/timeConductor/conductor-mode-icon.scss
@@ -0,0 +1,107 @@
+@keyframes clock-hands {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg);  }
+}
+
+@keyframes clock-hands-sticky {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    7% { transform: translate(-50%, -50%) rotate(0deg); }
+    8% { transform: translate(-50%, -50%) rotate(30deg); }
+    15% { transform: translate(-50%, -50%) rotate(30deg); }
+    16% { transform: translate(-50%, -50%) rotate(60deg); }
+    24% { transform: translate(-50%, -50%) rotate(60deg); }
+    25% { transform: translate(-50%, -50%) rotate(90deg); }
+    32% { transform: translate(-50%, -50%) rotate(90deg); }
+    33% { transform: translate(-50%, -50%) rotate(120deg); }
+    40% { transform: translate(-50%, -50%) rotate(120deg); }
+    41% { transform: translate(-50%, -50%) rotate(150deg); }
+    49% { transform: translate(-50%, -50%) rotate(150deg); }
+    50% { transform: translate(-50%, -50%) rotate(180deg); }
+    57% { transform: translate(-50%, -50%) rotate(180deg); }
+    58% { transform: translate(-50%, -50%) rotate(210deg); }
+    65% { transform: translate(-50%, -50%) rotate(210deg); }
+    66% { transform: translate(-50%, -50%) rotate(240deg); }
+    74% { transform: translate(-50%, -50%) rotate(240deg); }
+    75% { transform: translate(-50%, -50%) rotate(270deg); }
+    82% { transform: translate(-50%, -50%) rotate(270deg); }
+    83% { transform: translate(-50%, -50%) rotate(300deg); }
+    90% { transform: translate(-50%, -50%) rotate(300deg); }
+    91% { transform: translate(-50%, -50%) rotate(330deg); }
+    99% { transform: translate(-50%, -50%) rotate(330deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+
+.c-clock-symbol {
+    $c: $colorBtnBg; //$colorObjHdrIc;
+    $d: 18px;
+    height: $d;
+    width: $d;
+    position: relative;
+
+    &:before {
+        font-family: symbolsfont;
+        color: $c;
+        content: $glyph-icon-brackets;
+        font-size: $d;
+        line-height: normal;
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+
+    // Clock hands
+    div[class*="hand"] {
+        $handW: 2px;
+        $handH: $d * 0.4;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        transform-origin: bottom;
+        position: absolute;
+        height: $handW;
+        width: $handW;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        &:before {
+            background: $c;
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            bottom: -1px;
+        }
+        &.hand-little {
+            z-index: 2;
+            animation-duration: 12s;
+            transform: translate(-50%, -50%) rotate(120deg);
+            &:before {
+                height: ceil($handH * 0.6);
+            }
+        }
+        &.hand-big {
+            z-index: 1;
+            animation-duration: 1s;
+            transform: translate(-50%, -50%);
+            &:before {
+                height: $handH;
+            }
+        }
+    }
+
+    // Modes
+    .is-realtime-mode &,
+    .is-lad-mode & {
+        &:before {
+            // Brackets icon
+            color: $colorTime;
+        }
+        div[class*="hand"] {
+            animation-name: clock-hands;
+            &:before {
+                background: $colorTime;
+            }
+        }
+    }
+}
diff --git a/src/plugins/timeConductor/conductor-mode.scss b/src/plugins/timeConductor/conductor-mode.scss
new file mode 100644
index 0000000000..6939cb00cf
--- /dev/null
+++ b/src/plugins/timeConductor/conductor-mode.scss
@@ -0,0 +1,14 @@
+.c-conductor__mode-menu {
+    max-height: 80vh;
+    max-width: 500px;
+    min-height: 250px;
+    z-index: 70;
+
+    [class*="__icon"] {
+        filter: $colorKeyFilter;
+    }
+
+    [class*="__item-description"] {
+        min-width: 200px;
+    }
+}
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
new file mode 100644
index 0000000000..dc5c308477
--- /dev/null
+++ b/src/plugins/timeConductor/conductor.scss
@@ -0,0 +1,179 @@
+.c-input--submit {
+    // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
+    visibility: none;
+    height: 0;
+    width: 0;
+    padding: 0;
+}
+
+/*********************************************** CONDUCTOR LAYOUT */
+.c-conductor {
+    &__time-bounds {
+        display: grid;
+        grid-column-gap: $interiorMargin;
+        grid-row-gap: $interiorMargin;
+        align-items: center;
+
+        // Default: fixed mode, desktop
+        grid-template-rows: 1fr;
+        grid-template-columns: 20px auto 1fr auto;
+        grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
+    }
+
+    &__mode-icon {
+        grid-area: tc-mode-icon;
+    }
+
+    &__start-fixed,
+    &__start-delta {
+        grid-area: tc-start;
+        display: flex;
+    }
+
+    &__end-fixed,
+    &__end-delta {
+        grid-area: tc-end;
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__ticks {
+        grid-area: tc-ticks;
+    }
+
+    &__controls {
+        grid-area: tc-controls;
+        display: flex;
+        align-items: center;
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    [class*='-delta'] {
+        &:before {
+            content: $glyph-icon-clock;
+            font-family: symbolsfont;
+        }
+    }
+
+    &.is-realtime-mode {
+        .c-conductor__time-bounds {
+            grid-template-columns: 20px auto 1fr auto auto;
+            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
+        }
+
+        .c-conductor__end-fixed {
+            grid-area: tc-updated;
+        }
+    }
+
+    body.phone.portrait & {
+        .c-conductor__time-bounds {
+            grid-row-gap: $interiorMargin;
+            grid-template-rows: auto auto;
+            grid-template-columns: 20px auto auto;
+        }
+
+        .c-conductor__controls {
+            padding-left: 25px; // Line up visually with other controls
+        }
+
+        &__mode-icon {
+            grid-row: 1;
+        }
+
+        &__ticks,
+        &__zoom {
+            display: none;
+        }
+
+        &.is-fixed-mode {
+            [class*='__start-fixed'],
+            [class*='__end-fixed'] {
+                [class*='__label'] {
+                    // Start and end are in separate columns; make the labels line up
+                    width: 30px;
+                }
+            }
+
+            [class*='__end-input'] {
+                justify-content: flex-start;
+            }
+
+            .c-conductor__time-bounds {
+                grid-template-areas:
+                    "tc-mode-icon tc-start tc-start"
+                    "tc-mode-icon tc-end tc-end"
+                }
+            }
+
+        &.is-realtime-mode {
+            .c-conductor__time-bounds {
+                grid-template-areas:
+                    "tc-mode-icon tc-start tc-updated"
+                    "tc-mode-icon tc-end tc-end";
+            }
+
+            .c-conductor__end-fixed {
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+
+.c-conductor-input {
+    color: $colorInputFg;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
+    &:before {
+        // Realtime-mode clock icon symbol
+        margin-right: $interiorMarginSm;
+    }
+
+    .c-direction-indicator {
+        // Holds realtime-mode + and - symbols
+        font-size: 0.7em;
+    }
+
+    input:invalid {
+        background: rgba($colorFormInvalid, 0.5);
+    }
+}
+
+.is-realtime-mode {
+    button {
+        @include themedButton($colorTimeBg);
+        color: $colorTimeFg;
+
+        &:hover {
+            background: $colorTimeHov !important;
+            color: $colorTimeFg !important;
+        }
+    }
+
+    .c-conductor-input {
+        &:before {
+            color: $colorTime;
+        }
+    }
+
+    .c-conductor__end-fixed {
+        // Displays last RT udpate
+        color: $colorTime;
+
+        input {
+            // Remove input look
+            background: none;
+            box-shadow: none;
+            color: $colorTime;
+            pointer-events: none;
+        }
+    }
+}
diff --git a/src/plugins/timeConductor/date-picker.scss b/src/plugins/timeConductor/date-picker.scss
new file mode 100644
index 0000000000..f440c6ea3d
--- /dev/null
+++ b/src/plugins/timeConductor/date-picker.scss
@@ -0,0 +1,96 @@
+/******************************************************** PICKER */
+.c-datetime-picker {
+    @include userSelectNone();
+    padding: $interiorMarginLg !important;
+    display: flex !important; // Override .c-menu display: block;
+    flex-direction: column;
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__close-button {
+        display: none; // Only show when body.phone, see below.
+    }
+
+    &__pager {
+        flex: 0 0 auto;
+    }
+
+    &__calendar {
+        border-top: 1px solid $colorInteriorBorder;
+        flex: 1 1 auto;
+    }
+}
+
+.c-pager {
+    display: grid;
+    grid-column-gap: $interiorMargin;
+    grid-template-rows: 1fr;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+
+    .c-icon-button {
+        font-size: 0.8em;
+    }
+
+    &__month-year {
+        text-align: center;
+    }
+}
+
+/******************************************************** CALENDAR */
+.c-calendar {
+    display: grid;
+    grid-template-columns: repeat(7, min-content);
+    grid-template-rows: auto;
+    grid-gap: 1px;
+    height: 100%;
+
+    $mutedOpacity: 0.5;
+
+    ul {
+        display: contents;
+        &[class*='--header'] {
+            pointer-events: none;
+            li {
+                opacity: $mutedOpacity;
+            }
+        }
+    }
+
+    li {
+        display: flex;
+        flex-direction: column;
+        justify-content: center !important;
+        padding: $interiorMargin;
+
+        &.is-in-month {
+            background: $colorMenuElementHilite;
+        }
+    }
+
+    &__day {
+        &--sub {
+            opacity: $mutedOpacity;
+            font-size: 0.8em;
+        }
+    }
+}
+
+/******************************************************** MOBILE */
+body.phone {
+    .c-datetime-picker {
+        &.c-menu {
+            @include modalFullScreen();
+        }
+
+        &__close-button {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+
+    .c-calendar {
+        grid-template-columns: repeat(7, auto);
+    }
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
new file mode 100644
index 0000000000..2bc17c1dfb
--- /dev/null
+++ b/src/styles/_layout.scss
@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/************************** BROWSE BAR */
+.l-browse-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    [class*="__"] {
+        // Removes extraneous horizontal white space
+        display: inline-flex;
+    }
+
+    &__start {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        margin-right: $interiorMargin;
+        min-width: 0; // Forces interior to compress when pushed on
+    }
+
+    &__end {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+
+        [class*="__"] + [class*="__"] {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &__nav-to-parent-button,
+    &__disclosure-button {
+        flex: 0 0 auto;
+    }
+
+    &__nav-to-parent-button {
+        // This is an icon-button
+        $p: $interiorMargin;
+        margin-right: $interiorMargin;
+        padding-left: $p;
+        padding-right: $p;
+
+        .is-editing & {
+            display: none;
+        }
+    }
+
+    &__object-name--w {
+        align-items: center;
+        display: flex;
+        flex: 0 1 auto;
+        @include headerFont(1.4em);
+        min-width: 0;
+
+        &:before {
+            // Icon
+            opacity: 0.5;
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &__object-name {
+        flex: 0 1 auto;
+    }
+}
diff --git a/src/styles/core.scss b/src/styles/core.scss
index 7539b928fc..3c9057d9f6 100644
--- a/src/styles/core.scss
+++ b/src/styles/core.scss
@@ -29,9 +29,12 @@
 @import "global";
 @import "status";
 @import "controls";
+@import "layout";
 @import "forms";
 @import "table";
 @import "legacy";
 @import "legacy-plots";
 @import "plotly";
 @import "legacy-messages";
+
+@import "vue-styles.scss";
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index ec3f1748d5..3d1ef5ee48 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -25,7 +25,6 @@
 
 
 .c-notebook {
-    //@include test(orange);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -35,6 +34,24 @@
     bottom: 0px;
     left: 0px;
 
+    &-snapshot {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__header {
+            flex: 0 0 auto;
+        }
+
+        &__image {
+            flex: 1 1 auto;
+        }
+    }
+
     > [class*="__"] + [class*="__"] {
         margin-top: $interiorMargin;
     }
diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss
new file mode 100644
index 0000000000..7be6e05bcc
--- /dev/null
+++ b/src/styles/vue-styles.scss
@@ -0,0 +1,43 @@
+@import "../api/overlays/components/dialog-component.scss";
+@import "../api/overlays/components/overlay-component.scss";
+@import "../plugins/displayLayout/components/box-view.scss";
+@import "../plugins/displayLayout/components/display-layout.scss";
+@import "../plugins/displayLayout/components/edit-marquee.scss";
+@import "../plugins/displayLayout/components/image-view.scss";
+@import "../plugins/displayLayout/components/layout-frame.scss";
+@import "../plugins/displayLayout/components/telemetry-view.scss";
+@import "../plugins/displayLayout/components/text-view.scss";
+@import "../plugins/filters/components/filters-view.scss";
+@import "../plugins/filters/components/global-filters.scss";
+@import "../plugins/flexibleLayout/components/flexible-layout.scss";
+@import "../plugins/folderView/components/grid-item.scss";
+@import "../plugins/folderView/components/grid-view.scss";
+@import "../plugins/folderView/components/list-item.scss";
+@import "../plugins/folderView/components/list-view.scss";
+@import "../plugins/telemetryTable/components/table-row.scss";
+@import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss";
+@import "../plugins/tabs/components/tabs.scss";
+@import "../plugins/telemetryTable/components/table.scss";
+@import "../plugins/timeConductor/conductor.scss";
+@import "../plugins/timeConductor/conductor-axis.scss";
+@import "../plugins/timeConductor/conductor-mode.scss";
+@import "../plugins/timeConductor/conductor-mode-icon.scss";
+@import "../plugins/timeConductor/date-picker.scss";
+@import "../ui/components/object-frame.scss";
+@import "../ui/components/object-label.scss";
+@import "../ui/components/progress-bar.scss";
+@import "../ui/components/search.scss";
+@import "../ui/components/toggle-switch.scss";
+@import "../ui/inspector/elements.scss";
+@import "../ui/inspector/inspector.scss";
+@import "../ui/inspector/location.scss";
+@import "../ui/layout/app-logo.scss";
+@import "../ui/layout/create-button.scss";
+@import "../ui/layout/layout.scss";
+@import "../ui/layout/mct-tree.scss";
+@import "../ui/layout/mct-search.scss";
+@import "../ui/layout/pane.scss";
+@import "../ui/layout/status-bar/indicators.scss";
+@import "../ui/layout/status-bar/notification-banner.scss";
+@import "../ui/preview/preview.scss";
+@import "../ui/toolbar/components/toolbar-checkbox.scss";
diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index 1940afd6d0..411567a578 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -56,86 +56,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-so-view {
-        display: flex;
-        flex-direction: column;
-
-        /*************************** HEADER */
-        &__header {
-            flex: 0 0 auto;
-            display: flex;
-            align-items: center;
-            margin-bottom: $interiorMargin;
-
-            &__icon {
-                flex: 0 0 auto;
-                margin-right: $interiorMarginSm;
-                opacity: 0.5;
-            }
-
-            &__name {
-                @include headerFont(1em);
-                @include ellipsize();
-                flex: 0 1 auto;
-            }
-        }
-
-        &:not(.c-so-view--no-frame) {
-            background: $colorBodyBg;
-            border: $browseFrameBorder;
-            padding: $interiorMargin;
-        }
-
-        &--no-frame {
-            > .c-so-view__header {
-                display: none;
-            }
-
-            > .c-so-view__local-controls {
-                top: $interiorMarginSm; right: $interiorMarginSm;
-            }
-        }
-
-        &__local-controls {
-            position: absolute;
-            top: $interiorMargin; right: $interiorMargin;
-            z-index: 2;
-        }
-
-        &__view-large {
-            display: none;
-        }
-
-        &.has-complex-content {
-            > .c-so-view__view-large { display: block; }
-        }
-
-        /*************************** OBJECT VIEW */
-        &__object-view {
-            flex: 1 1 auto;
-            height: 0; // Chrome 73 overflow bug fix
-            overflow: auto;
-
-            .c-object-view {
-                .u-fills-container {
-                    // Expand component types that fill a container
-                    @include abs();
-                }
-            }
-        }
-
-        .c-click-icon,
-        .c-button {
-            // Shrink buttons a bit when they appear in a frame
-            font-size: 0.85em;
-            padding: 3px 5px;
-        }
-    }
-</style>
-
 <script>
 import ObjectView from './ObjectView.vue'
 import ContextMenuDropDown from './contextMenuDropDown.vue';
diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue
index 086ce869f2..5ed603facc 100644
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@@ -14,39 +14,6 @@
 </a>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-object-label {
-        // <a> tag and draggable element that holds type icon and name.
-        // Used mostly in trees and lists
-        border-radius: $controlCr;
-        display: flex;
-        align-items: center;
-        flex: 1 1 auto;
-        overflow: hidden;
-        padding: $interiorMarginSm 1px;
-        white-space: nowrap;
-
-        &__name {
-            @include ellipsize();
-            display: inline;
-            color: $colorItemTreeFg;
-            width: 100%;
-        }
-
-        &__type-icon {
-            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
-            display: block;
-            flex: 0 0 auto;
-            font-size: 1.3em;
-            margin-right: $interiorMarginSm;
-            color: $colorItemTreeIcon;
-            width: $treeTypeIconW;
-        }
-    }
-</style>
-
-
 <script>
 
 import ObjectLink from '../mixins/object-link';
diff --git a/src/ui/components/ProgressBar.vue b/src/ui/components/ProgressBar.vue
index 7c723c2261..f9f608d51d 100644
--- a/src/ui/components/ProgressBar.vue
+++ b/src/ui/components/ProgressBar.vue
@@ -17,54 +17,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************************************** PROGRESS BAR */
-    @keyframes progress {
-        100% { background-position: $progressAnimW center; }
-    }
-
-    @mixin progressAnim($c1, $c2, $size) {
-        $edge: 20%;
-        background-image: linear-gradient(-90deg,
-                $c1 0%, $c2 $edge,
-                $c2 $edge, $c1 100%
-        );
-        background-position: 0 center;
-        background-repeat: repeat-x;
-        background-size: $size 100%;
-    }
-
-    .c-progress-bar {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
-        &__holder {
-            background: $colorProgressBarHolder;
-            box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
-            flex: 1 1 auto;
-            padding: 1px;
-        }
-
-        &__bar {
-            @include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
-            animation: progress 1000ms linear infinite;
-            min-height: $progressBarMinH;
-            height: 100%;
-
-            &.--indeterminate {
-                width: 100% !important;
-            }
-        }
-    }
-</style>
-
 <script>
 export default {
     props: {
diff --git a/src/ui/components/ToggleSwitch.vue b/src/ui/components/ToggleSwitch.vue
index fa7a5b6671..793751e71a 100644
--- a/src/ui/components/ToggleSwitch.vue
+++ b/src/ui/components/ToggleSwitch.vue
@@ -10,60 +10,6 @@
 </label>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-toggle-switch {
-        $d: 12px;
-        $m: 2px;
-        $br: $d/1.5;
-        cursor: pointer;
-        overflow: hidden;
-        display: inline;
-        vertical-align: middle;
-
-        &__slider {
-            background: $colorBtnBg; // TODO: make discrete theme constants for these colors
-            border-radius: $br;
-            //box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px;
-            display: inline-block;
-            height: $d + ($m*2);
-            position: relative;
-            transform: translateY(2px); // TODO: get this to work without this kind of hack!
-            width: $d*2 + $m*2;
-
-            &:before {
-                // Knob
-                background: $colorBtnFg; // TODO: make discrete theme constants for these colors
-                border-radius: floor($br * 0.8);
-                box-shadow: rgba(black, 0.4) 0 0 2px;
-                content: '';
-                display: block;
-                position: absolute;
-                height: $d; width: $d;
-                top: $m; left: $m; right: auto;
-                transition: transform 100ms ease-in-out;
-            }
-        }
-
-        input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-
-            &:checked {
-                + .c-toggle-switch__slider {
-                    background: $colorKey; // TODO: make discrete theme constants for these colors
-                    &:before {
-                        transform: translateX(100%);
-                    }
-                }
-            }
-        }
-    }
-
-</style>
-
 <script>
 export default {
     inject: ['openmct'],
diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss
new file mode 100644
index 0000000000..579f54ad24
--- /dev/null
+++ b/src/ui/components/object-frame.scss
@@ -0,0 +1,75 @@
+.c-so-view {
+    display: flex;
+    flex-direction: column;
+
+    /*************************** HEADER */
+    &__header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        margin-bottom: $interiorMargin;
+
+        &__icon {
+            flex: 0 0 auto;
+            margin-right: $interiorMarginSm;
+            opacity: 0.5;
+        }
+
+        &__name {
+            @include headerFont(1em);
+            @include ellipsize();
+            flex: 0 1 auto;
+        }
+    }
+
+    &:not(.c-so-view--no-frame) {
+        background: $colorBodyBg;
+        border: $browseFrameBorder;
+        padding: $interiorMargin;
+    }
+
+    &--no-frame {
+        > .c-so-view__header {
+            display: none;
+        }
+
+        > .c-so-view__local-controls {
+            top: $interiorMarginSm; right: $interiorMarginSm;
+        }
+    }
+
+    &__local-controls {
+        position: absolute;
+        top: $interiorMargin; right: $interiorMargin;
+        z-index: 2;
+    }
+
+    &__view-large {
+        display: none;
+    }
+
+    &.has-complex-content {
+        > .c-so-view__view-large { display: block; }
+    }
+
+    /*************************** OBJECT VIEW */
+    &__object-view {
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 overflow bug fix
+        overflow: auto;
+
+        .c-object-view {
+            .u-fills-container {
+                // Expand component types that fill a container
+                @include abs();
+            }
+        }
+    }
+
+    .c-click-icon,
+    .c-button {
+        // Shrink buttons a bit when they appear in a frame
+        font-size: 0.85em;
+        padding: 3px 5px;
+    }
+}
diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss
new file mode 100644
index 0000000000..c2bd5e5a18
--- /dev/null
+++ b/src/ui/components/object-label.scss
@@ -0,0 +1,28 @@
+.c-object-label {
+    // <a> tag and draggable element that holds type icon and name.
+    // Used mostly in trees and lists
+    border-radius: $controlCr;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding: $interiorMarginSm 1px;
+    white-space: nowrap;
+
+    &__name {
+        @include ellipsize();
+        display: inline;
+        color: $colorItemTreeFg;
+        width: 100%;
+    }
+
+    &__type-icon {
+        // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+        display: block;
+        flex: 0 0 auto;
+        font-size: 1.3em;
+        margin-right: $interiorMarginSm;
+        color: $colorItemTreeIcon;
+        width: $treeTypeIconW;
+    }
+}
diff --git a/src/ui/components/progress-bar.scss b/src/ui/components/progress-bar.scss
new file mode 100644
index 0000000000..ce270bdbd8
--- /dev/null
+++ b/src/ui/components/progress-bar.scss
@@ -0,0 +1,43 @@
+/******************************************************** PROGRESS BAR */
+@keyframes progress {
+    100% { background-position: $progressAnimW center; }
+}
+
+@mixin progressAnim($c1, $c2, $size) {
+    $edge: 20%;
+    background-image: linear-gradient(-90deg,
+            $c1 0%, $c2 $edge,
+            $c2 $edge, $c1 100%
+    );
+    background-position: 0 center;
+    background-repeat: repeat-x;
+    background-size: $size 100%;
+}
+
+.c-progress-bar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__holder {
+        background: $colorProgressBarHolder;
+        box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
+        flex: 1 1 auto;
+        padding: 1px;
+    }
+
+    &__bar {
+        @include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
+        animation: progress 1000ms linear infinite;
+        min-height: $progressBarMinH;
+        height: 100%;
+
+        &.--indeterminate {
+            width: 100% !important;
+        }
+    }
+}
diff --git a/src/ui/components/search.scss b/src/ui/components/search.scss
new file mode 100644
index 0000000000..9062b56861
--- /dev/null
+++ b/src/ui/components/search.scss
@@ -0,0 +1,26 @@
+.c-search {
+    @include wrappedInput();
+
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    &:before {
+        // Mag glass icon
+        content: $glyph-icon-magnify;
+    }
+
+    &__clear-input {
+        display: none;
+    }
+
+    &.is-active {
+        .c-search__clear-input {
+            display: block;
+        }
+    }
+
+    input[type='text'],
+    input[type='search'] {
+        text-align: left;
+    }
+}
diff --git a/src/ui/components/search.vue b/src/ui/components/search.vue
index 19bc580ae8..21c00d49a9 100644
--- a/src/ui/components/search.vue
+++ b/src/ui/components/search.vue
@@ -18,37 +18,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-search {
-        @include wrappedInput();
-
-        padding-top: 2px;
-        padding-bottom: 2px;
-
-        &:before {
-            // Mag glass icon
-            content: $glyph-icon-magnify;
-        }
-
-        &__clear-input {
-            display: none;
-        }
-
-        &.is-active {
-            .c-search__clear-input {
-                display: block;
-            }
-        }
-
-        input[type='text'],
-        input[type='search'] {
-            text-align: left;
-        }
-    }
-</style>
-
 <script>
 /* Emits input and clear events */
 export default {
diff --git a/src/ui/components/toggle-switch.scss b/src/ui/components/toggle-switch.scss
new file mode 100644
index 0000000000..045cd827fa
--- /dev/null
+++ b/src/ui/components/toggle-switch.scss
@@ -0,0 +1,48 @@
+.c-toggle-switch {
+    $d: 12px;
+    $m: 2px;
+    $br: $d/1.5;
+    cursor: pointer;
+    overflow: hidden;
+    display: inline;
+    vertical-align: middle;
+
+    &__slider {
+        background: $colorBtnBg; // TODO: make discrete theme constants for these colors
+        border-radius: $br;
+        //box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px;
+        display: inline-block;
+        height: $d + ($m*2);
+        position: relative;
+        transform: translateY(2px); // TODO: get this to work without this kind of hack!
+        width: $d*2 + $m*2;
+
+        &:before {
+            // Knob
+            background: $colorBtnFg; // TODO: make discrete theme constants for these colors
+            border-radius: floor($br * 0.8);
+            box-shadow: rgba(black, 0.4) 0 0 2px;
+            content: '';
+            display: block;
+            position: absolute;
+            height: $d; width: $d;
+            top: $m; left: $m; right: auto;
+            transition: transform 100ms ease-in-out;
+        }
+    }
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+
+        &:checked {
+            + .c-toggle-switch__slider {
+                background: $colorKey; // TODO: make discrete theme constants for these colors
+                &:before {
+                    transform: translateX(100%);
+                }
+            }
+        }
+    }
+}
diff --git a/src/ui/inspector/Elements.vue b/src/ui/inspector/Elements.vue
index 3685d7e4e1..ddac7b4ad0 100644
--- a/src/ui/inspector/Elements.vue
+++ b/src/ui/inspector/Elements.vue
@@ -47,45 +47,7 @@
     </div>
 </div>
 </template>
-<style lang="scss">
-    @import "~styles/sass-base";
 
-    .c-elements-pool {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        flex: 1 1 auto !important;
-
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
-        &__search {
-            flex: 0 0 auto;
-        }
-
-        &__elements {
-            flex: 1 1 auto;
-            overflow: auto;
-            &.is-dragging {
-                li { opacity: 0.2; }
-            }
-        }
-
-        &__grippy {
-            $d: 8px;
-            @include grippy($c: $colorItemTreeVC, $dir: 'y');
-            flex: 0 0 auto;
-            margin-right: $interiorMarginSm;
-            transform: translateY(-2px);
-            width: $d; height: $d;
-        }
-    }
-
-    .js-last-place {
-        height: 10px;
-    }
-</style>
 <script>
 import _ from 'lodash';
 import Search from '../components/search.vue';
diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue
index 7183b3b983..ad05a2674d 100644
--- a/src/ui/inspector/Inspector.vue
+++ b/src/ui/inspector/Inspector.vue
@@ -19,165 +19,6 @@
 </multipane>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-inspector {
-        > [class*="__"] {
-            min-height: 50px;
-
-            + [class*="__"] {
-                margin-top: $interiorMargin;
-            }
-
-            > .l-pane__contents {
-                overflow: auto;
-
-                > * {
-                    // Fend off scrollbar
-                    margin-right: $interiorMarginSm;
-                }
-            }
-        }
-
-        &__elements {
-            height: 200px; // Initial height
-
-            .tree-item {
-                .t-object-label {
-                    // Elements pool is a flat list, so don't indent items.
-                    left: 0;
-                }
-            }
-        }
-
-        .c-color-swatch {
-            $d: 12px;
-            display: block;
-            flex: 0 0 auto;
-            width: $d;
-            height: $d;
-        }
-
-        .c-tree {
-            // When a tree is in the Inspector, remove scrolling and right pad
-            overflow: visible;
-            padding-right: 0;
-        }
-
-        /************************************************************** LEGACY */
-        .l-inspector-part {
-            display: contents;
-        }
-
-        h2 {
-            @include propertiesHeader();
-            font-size: 0.65rem;
-            grid-column: 1 / 3;
-        }
-
-        .c-tree .grid-properties {
-            margin-left: $treeItemIndent;
-        }
-    }
-
-    .c-properties {
-        display: grid;
-        grid-row-gap: 0;
-        grid-template-columns: 1fr 2fr;
-        align-items: start;
-        min-width: 150px;
-
-        [class*="header"] {
-            @include propertiesHeader();
-
-            &:not(:first-child) {
-                // Allow multiple headers within a component
-                margin-top: $interiorMarginLg;
-            }
-        }
-
-        [class*="span-all"],
-        [class*="header"] {
-            grid-column: 1 / 3;
-        }
-
-        + .c-properties {
-            margin-top: $interiorMarginLg;
-        }
-
-        &__section,
-        &__row {
-            display: contents;
-        }
-
-        &__row + &__row,
-        &__section + &__section {
-            [class*="__label"],
-            [class*="__value"] {
-                // 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
-                grid-column: 1 / 3;
-            }
-        }
-    }
-    /********************************************* LEGACY SUPPORT */
-    .c-inspector {
-        // FilterField.vue
-        .u-contents + .u-contents {
-            li.grid-row > * {
-                border-top: 1px solid $colorInspectorSectionHeaderBg;
-            }
-        }
-
-        li.grid-row + li.grid-row {
-            > * {
-                border-top: 1px solid $colorInspectorSectionHeaderBg;
-            }
-        }
-
-        li.grid-row .label {
-            color: $colorInspectorPropName;
-        }
-
-        li.grid-row .value {
-            color: $colorInspectorPropVal;
-            word-break: break-all;
-            &:first-child {
-                // If there is no preceding .label element, make value span columns
-                grid-column: 1 / 3;
-            }
-        }
-    }
-</style>
-
 <script>
 import multipane from '../layout/multipane.vue';
 import pane from '../layout/pane.vue';
diff --git a/src/ui/inspector/Location.vue b/src/ui/inspector/Location.vue
index 146aad7d6a..7258e994ad 100644
--- a/src/ui/inspector/Location.vue
+++ b/src/ui/inspector/Location.vue
@@ -37,49 +37,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-location {
-        display: flex;
-        flex-wrap: wrap;
-
-        &__item {
-            $m: $interiorMarginSm;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            margin: 0 $m $m 0;
-
-            &:not(:last-child) {
-                &:after {
-                    color: $colorInspectorPropName;
-                    content: $glyph-icon-arrow-right;
-                    font-family: symbolsfont;
-                    font-size: 0.7em;
-                    margin-left: $m;
-                    opacity: 0.8;
-                }
-            }
-
-            .c-object-label {
-                padding: 0;
-                transition: $transOut;
-
-                &__type-icon {
-                    width: auto;
-                    font-size: 1em;
-                }
-
-                &:hover {
-                    transition: $transIn;
-                    filter: $filterHov;
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import ObjectLabel from '../components/ObjectLabel.vue';
 
diff --git a/src/ui/inspector/Properties.vue b/src/ui/inspector/Properties.vue
index b6a529a866..49efd6790f 100644
--- a/src/ui/inspector/Properties.vue
+++ b/src/ui/inspector/Properties.vue
@@ -30,7 +30,7 @@
             <div class="c-properties__label">
                 Created
             </div>
-            <div class="c-properties__value c-ne__text">
+            <div class="c-properties__value">
                 {{ formatTime(item.created) }}
             </div>
         </li>
@@ -41,7 +41,7 @@
             <div class="c-properties__label">
                 Modified
             </div>
-            <div class="c-properties__value c-ne__text">
+            <div class="c-properties__value">
                 {{ formatTime(item.modified) }}
             </div>
         </li>
diff --git a/src/ui/inspector/elements.scss b/src/ui/inspector/elements.scss
new file mode 100644
index 0000000000..a92357ecf8
--- /dev/null
+++ b/src/ui/inspector/elements.scss
@@ -0,0 +1,35 @@
+.c-elements-pool {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex: 1 1 auto !important;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__search {
+        flex: 0 0 auto;
+    }
+
+    &__elements {
+        flex: 1 1 auto;
+        overflow: auto;
+        &.is-dragging {
+            li { opacity: 0.2; }
+        }
+    }
+
+    &__grippy {
+        $d: 8px;
+        @include grippy($c: $colorItemTreeVC, $dir: 'y');
+        flex: 0 0 auto;
+        margin-right: $interiorMarginSm;
+        transform: translateY(-2px);
+        width: $d; height: $d;
+    }
+}
+
+.js-last-place {
+    height: 10px;
+}
diff --git a/src/ui/inspector/inspector.scss b/src/ui/inspector/inspector.scss
new file mode 100644
index 0000000000..73e9316fd5
--- /dev/null
+++ b/src/ui/inspector/inspector.scss
@@ -0,0 +1,154 @@
+.c-inspector {
+    > [class*="__"] {
+        min-height: 50px;
+
+        + [class*="__"] {
+            margin-top: $interiorMargin;
+        }
+
+        > .l-pane__contents {
+            overflow: auto;
+
+            > * {
+                // Fend off scrollbar
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    &__elements {
+        height: 200px; // Initial height
+
+        .tree-item {
+            .t-object-label {
+                // Elements pool is a flat list, so don't indent items.
+                left: 0;
+            }
+        }
+    }
+
+    .c-color-swatch {
+        $d: 12px;
+        display: block;
+        flex: 0 0 auto;
+        width: $d;
+        height: $d;
+    }
+
+    .c-tree {
+        // When a tree is in the Inspector, remove scrolling and right pad
+        overflow: visible;
+        padding-right: 0;
+    }
+
+    /************************************************************** LEGACY */
+    .l-inspector-part {
+        display: contents;
+    }
+
+    h2 {
+        @include propertiesHeader();
+        font-size: 0.65rem;
+        grid-column: 1 / 3;
+    }
+
+    .c-tree .grid-properties {
+        margin-left: $treeItemIndent;
+    }
+}
+
+.c-properties {
+    display: grid;
+    grid-row-gap: 0;
+    grid-template-columns: 1fr 2fr;
+    align-items: start;
+    min-width: 150px;
+
+    [class*="header"] {
+        @include propertiesHeader();
+
+        &:not(:first-child) {
+            // Allow multiple headers within a component
+            margin-top: $interiorMarginLg;
+        }
+    }
+
+    [class*="span-all"],
+    [class*="header"] {
+        grid-column: 1 / 3;
+    }
+
+    + .c-properties {
+        margin-top: $interiorMarginLg;
+    }
+
+    &__section,
+    &__row {
+        display: contents;
+    }
+
+    &__row + &__row,
+    &__section + &__section {
+        [class*="__label"],
+        [class*="__value"] {
+            // 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
+            grid-column: 1 / 3;
+        }
+    }
+}
+/********************************************* LEGACY SUPPORT */
+.c-inspector {
+    // FilterField.vue
+    .u-contents + .u-contents {
+        li.grid-row > * {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
+        }
+    }
+
+    li.grid-row + li.grid-row {
+        > * {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
+        }
+    }
+
+    li.grid-row .label {
+        color: $colorInspectorPropName;
+    }
+
+    li.grid-row .value {
+        color: $colorInspectorPropVal;
+        word-break: break-all;
+        &:first-child {
+            // If there is no preceding .label element, make value span columns
+            grid-column: 1 / 3;
+        }
+    }
+}
diff --git a/src/ui/inspector/location.scss b/src/ui/inspector/location.scss
new file mode 100644
index 0000000000..085dcae861
--- /dev/null
+++ b/src/ui/inspector/location.scss
@@ -0,0 +1,38 @@
+.c-location {
+    display: flex;
+    flex-wrap: wrap;
+
+    &__item {
+        $m: $interiorMarginSm;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        margin: 0 $m $m 0;
+
+        &:not(:last-child) {
+            &:after {
+                color: $colorInspectorPropName;
+                content: $glyph-icon-arrow-right;
+                font-family: symbolsfont;
+                font-size: 0.7em;
+                margin-left: $m;
+                opacity: 0.8;
+            }
+        }
+
+        .c-object-label {
+            padding: 0;
+            transition: $transOut;
+
+            &__type-icon {
+                width: auto;
+                font-size: 1em;
+            }
+
+            &:hover {
+                transition: $transIn;
+                filter: $filterHov;
+            }
+        }
+    }
+}
diff --git a/src/ui/layout/AppLogo.vue b/src/ui/layout/AppLogo.vue
index 6a02e1f2b5..aac916f206 100644
--- a/src/ui/layout/AppLogo.vue
+++ b/src/ui/layout/AppLogo.vue
@@ -26,14 +26,7 @@
     @click="launchAbout"
 ></div>
 </template>
-<style lang="scss">
-.l-shell__app-logo {
-    cursor: pointer;
-    width: 70px;
-    height: 20px;
-    background: url('assets/images/logo-openmct.svg') center no-repeat;
-}
-</style>
+
 <script>
 import AboutDialog from './AboutDialog.vue';
 import Vue from 'vue';
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index 31085fe108..a473b21bb8 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -276,71 +276,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .l-browse-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        [class*="__"] {
-            // Removes extraneous horizontal white space
-            display: inline-flex;
-        }
-
-        &__start {
-            display: flex;
-            align-items: center;
-            flex: 1 1 auto;
-            margin-right: $interiorMargin;
-            min-width: 0; // Forces interior to compress when pushed on
-        }
-
-        &__end {
-            display: flex;
-            align-items: center;
-            flex: 0 0 auto;
-
-            [class*="__"] + [class*="__"] {
-                margin-left: $interiorMarginSm;
-            }
-        }
-
-        &__nav-to-parent-button,
-        &__disclosure-button {
-            flex: 0 0 auto;
-        }
-
-        &__nav-to-parent-button {
-            // This is an icon-button
-            $p: $interiorMargin;
-            margin-right: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-
-            .is-editing & {
-                display: none;
-            }
-        }
-
-        &__object-name--w {
-            align-items: center;
-            display: flex;
-            flex: 0 1 auto;
-            @include headerFont(1.4em);
-            min-width: 0;
-
-            &:before {
-                // Icon
-                opacity: 0.5;
-                margin-right: $interiorMargin;
-            }
-        }
-
-        &__object-name {
-            flex: 0 1 auto;
-        }
-    }
-</style>
diff --git a/src/ui/layout/CreateButton.vue b/src/ui/layout/CreateButton.vue
index 60ecb1d6d6..e29a5ee4ad 100644
--- a/src/ui/layout/CreateButton.vue
+++ b/src/ui/layout/CreateButton.vue
@@ -37,40 +37,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-create-button,
-    .c-create-menu {
-        font-size: 1.1em;
-    }
-
-    .c-create-button {
-        .is-editing & {
-            @include disabled();
-        }
-
-        .c-button__label {
-            text-transform: $createBtnTextTransform;
-        }
-    }
-
-    .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>
 import CreateAction from '../../../platform/commonUI/edit/src/creation/CreateAction';
 import objectUtils from '../../api/objects/object-utils';
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index a60a5c6dd6..03f8dd8f52 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -81,250 +81,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* SHELL */
-    .l-shell {
-        position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        overflow: hidden;
-
-        &__pane-tree {
-            width: 40%;
-
-            [class*="collapse-button"] {
-                // For mobile, collapse button becomes menu icon
-                body.mobile & {
-                    @include cClickIconButton();
-                    color: $colorKey !important;
-                    position: absolute;
-                    right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
-                    top: 0;
-                    transform: translateX(100%);
-                    width: $mobileMenuIconD;
-                    z-index: 2;
-
-                    &:before {
-                        content: $glyph-icon-menu-hamburger;
-                    }
-                }
-            }
-        }
-
-        &__pane-tree,
-        &__pane-inspector,
-        &__pane-main {
-            .l-pane__contents {
-                display: flex;
-                flex-flow: column nowrap;
-                overflow-x: hidden;
-
-                > * {
-                    flex: 0 0 auto;
-                    + * {
-                        margin-top: $interiorMarginLg;
-                    }
-                }
-            }
-        }
-
-        body.mobile & {
-            &__pane-tree {
-                background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
-
-                &[class*="--collapsed"] {
-                    [class*="collapse-button"] {
-                        right: -1 * nth($shellPanePad, 2);
-                    }
-                }
-            }
-        }
-
-        body.phone.portrait & {
-            &__pane-tree {
-                width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
-
-                + .l-pane {
-                    // Hide pane-main when this pane is expanded
-                    opacity: 0;
-                    pointer-events: none;
-                }
-
-                &[class*="--collapsed"] + .l-pane {
-                    // Show pane-main when tree is collapsed
-                    opacity: 1;
-                    pointer-events: inherit;
-                    transition: opacity 250ms ease 250ms;
-                }
-            }
-        }
-
-        &__head,
-        &__pane-inspector {
-            body.mobile & {
-                display: none;
-            }
-        }
-
-        &__head,
-        &__status {
-            flex: 0 0 auto;
-            display: flex;
-        }
-
-        /******************************* HEAD */
-        &__main-view-browse-bar {
-            flex: 0 0 auto;
-        }
-
-        body.mobile & .l-shell__main-view-browse-bar {
-            margin-left: $mobileMenuIconD; // Make room for the hamburger!
-        }
-
-        &__head {
-            align-items: stretch;
-            background: $colorHeadBg;
-            justify-content: space-between;
-            padding: $interiorMargin $interiorMargin + 2;
-
-            > [class*="__"] + [class*="__"] {
-                margin-left: $interiorMargin;
-            }
-
-            [class*='__head__collapse-button'] {
-                align-self: start;
-                flex: 0 0 auto;
-                margin-top: 6px;
-
-                &:before {
-                    content: $glyph-icon-arrow-down;
-                    font-size: 1.1em;
-                }
-            }
-
-            &-section {
-                // Subdivides elements across the head
-                display: flex;
-                flex: 0 1 auto;
-                padding: 0 $interiorMargin;
-            }
-
-            &--expanded {
-                .c-indicator__label {
-                    transition: none !important;
-                }
-
-                [class*='__head__collapse-button'] {
-                    &:before {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            $brdr: 1px solid $colorInteriorBorder;
-            border-right: $brdr;
-            border-left: $brdr;
-            align-items: start;
-        }
-
-        &__create-button,
-        &__app-logo {
-            flex: 0 0 auto;
-        }
-
-        &__create-button { margin-right: $interiorMarginLg; }
-
-        &__indicators {
-            flex: 1 1 auto;
-            flex-wrap: wrap;
-            justify-content: flex-end;
-            [class*='indicator-clock'] { order: 90; }
-
-            .c-indicator .label {
-                font-size: 0.9em;
-            }
-        }
-
-        /******************************* MAIN AREA */
-        &__main-container {
-            // Wrapper for main views
-            flex: 1 1 auto !important;
-            height: 0; // Chrome 73 overflow bug fix
-            overflow: auto;
-        }
-
-        &__tree {
-            // Tree component within __pane-tree
-            flex: 1 1 auto !important;
-        }
-
-        &__time-conductor {
-            border-top: 1px solid $colorInteriorBorder;
-            padding-top: $interiorMargin;
-        }
-
-        &__main {
-            > .l-pane {
-                padding: nth($shellPanePad, 1) nth($shellPanePad, 2);
-            }
-        }
-
-        body.desktop & {
-            &__main {
-                // Top and bottom padding in container that holds tree, __pane-main and Inspector
-                padding: $shellMainPad;
-                min-height: 0;
-
-                > .l-pane {
-                    padding-top: 0;
-                    padding-bottom: 0;
-                }
-            }
-
-            &__pane-tree,
-            &__pane-inspector {
-                max-width: 30%;
-            }
-
-            &__pane-tree {
-                width: 300px;
-            }
-
-            &__pane-inspector {
-                width: 200px;
-            }
-        }
-
-        &__toolbar {
-            $p: $interiorMargin;
-            background: $editUIBaseColor;
-            border-radius: $basicCr;
-            height: $p + 24px; // Need to standardize the height
-            padding: $p;
-        }
-    }
-
-    .is-editing {
-        .l-shell__main-container {
-            $m: 3px;
-            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
-            margin-left: $m;
-            margin-right: $m;
-
-            &[s-selected] {
-                // Provide a clearer selection context articulation for the main edit area
-                box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
-            }
-        }
-    }
-
-</style>
-
 <script>
 import Inspector from '../inspector/Inspector.vue';
 import MctTree from './mct-tree.vue';
diff --git a/src/ui/layout/MCTSearch.vue b/src/ui/layout/MCTSearch.vue
index 4724d6e1b1..7e8244efa8 100644
--- a/src/ui/layout/MCTSearch.vue
+++ b/src/ui/layout/MCTSearch.vue
@@ -7,21 +7,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/constants";
-
-    /******************************* SEARCH */
-    .c-search {
-        input[type=search] {
-            width: 100%;
-        }
-
-        &--major {
-            display: flex;
-        }
-    }
-</style>
-
 <script>
 export default {
 }
diff --git a/src/ui/layout/app-logo.scss b/src/ui/layout/app-logo.scss
new file mode 100644
index 0000000000..8677a2b99d
--- /dev/null
+++ b/src/ui/layout/app-logo.scss
@@ -0,0 +1,6 @@
+.l-shell__app-logo {
+    cursor: pointer;
+    width: 70px;
+    height: 20px;
+    background: url('assets/images/logo-openmct.svg') center no-repeat;
+}
\ No newline at end of file
diff --git a/src/ui/layout/create-button.scss b/src/ui/layout/create-button.scss
new file mode 100644
index 0000000000..51552fbe72
--- /dev/null
+++ b/src/ui/layout/create-button.scss
@@ -0,0 +1,29 @@
+.c-create-button,
+.c-create-menu {
+    font-size: 1.1em;
+}
+
+.c-create-button {
+    .is-editing & {
+        @include disabled();
+    }
+
+    .c-button__label {
+        text-transform: $createBtnTextTransform;
+    }
+}
+
+.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;
+    }
+}
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
new file mode 100644
index 0000000000..f61bb8081c
--- /dev/null
+++ b/src/ui/layout/layout.scss
@@ -0,0 +1,238 @@
+/******************************* SHELL */
+.l-shell {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    overflow: hidden;
+
+    &__pane-tree {
+        width: 40%;
+
+        [class*="collapse-button"] {
+            // For mobile, collapse button becomes menu icon
+            body.mobile & {
+                @include cClickIconButton();
+                color: $colorKey !important;
+                position: absolute;
+                right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
+                top: 0;
+                transform: translateX(100%);
+                width: $mobileMenuIconD;
+                z-index: 2;
+
+                &:before {
+                    content: $glyph-icon-menu-hamburger;
+                }
+            }
+        }
+    }
+
+    &__pane-tree,
+    &__pane-inspector,
+    &__pane-main {
+        .l-pane__contents {
+            display: flex;
+            flex-flow: column nowrap;
+            overflow-x: hidden;
+
+            > * {
+                flex: 0 0 auto;
+                + * {
+                    margin-top: $interiorMarginLg;
+                }
+            }
+        }
+    }
+
+    body.mobile & {
+        &__pane-tree {
+            background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
+
+            &[class*="--collapsed"] {
+                [class*="collapse-button"] {
+                    right: -1 * nth($shellPanePad, 2);
+                }
+            }
+        }
+    }
+
+    body.phone.portrait & {
+        &__pane-tree {
+            width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
+
+            + .l-pane {
+                // Hide pane-main when this pane is expanded
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            &[class*="--collapsed"] + .l-pane {
+                // Show pane-main when tree is collapsed
+                opacity: 1;
+                pointer-events: inherit;
+                transition: opacity 250ms ease 250ms;
+            }
+        }
+    }
+
+    &__head,
+    &__pane-inspector {
+        body.mobile & {
+            display: none;
+        }
+    }
+
+    &__head,
+    &__status {
+        flex: 0 0 auto;
+        display: flex;
+    }
+
+    /******************************* HEAD */
+    &__main-view-browse-bar {
+        flex: 0 0 auto;
+    }
+
+    body.mobile & .l-shell__main-view-browse-bar {
+        margin-left: $mobileMenuIconD; // Make room for the hamburger!
+    }
+
+    &__head {
+        align-items: stretch;
+        background: $colorHeadBg;
+        justify-content: space-between;
+        padding: $interiorMargin $interiorMargin + 2;
+
+        > [class*="__"] + [class*="__"] {
+            margin-left: $interiorMargin;
+        }
+
+        [class*='__head__collapse-button'] {
+            align-self: start;
+            flex: 0 0 auto;
+            margin-top: 6px;
+
+            &:before {
+                content: $glyph-icon-arrow-down;
+                font-size: 1.1em;
+            }
+        }
+
+        &-section {
+            // Subdivides elements across the head
+            display: flex;
+            flex: 0 1 auto;
+            padding: 0 $interiorMargin;
+        }
+
+        &--expanded {
+            .c-indicator__label {
+                transition: none !important;
+            }
+
+            [class*='__head__collapse-button'] {
+                &:before {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
+    &__controls {
+        $brdr: 1px solid $colorInteriorBorder;
+        border-right: $brdr;
+        border-left: $brdr;
+        align-items: start;
+    }
+
+    &__create-button,
+    &__app-logo {
+        flex: 0 0 auto;
+    }
+
+    &__create-button { margin-right: $interiorMarginLg; }
+
+    &__indicators {
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        [class*='indicator-clock'] { order: 90; }
+
+        .c-indicator .label {
+            font-size: 0.9em;
+        }
+    }
+
+    /******************************* MAIN AREA */
+    &__main-container {
+        // Wrapper for main views
+        flex: 1 1 auto !important;
+        height: 0; // Chrome 73 overflow bug fix
+        overflow: auto;
+    }
+
+    &__tree {
+        // Tree component within __pane-tree
+        flex: 1 1 auto !important;
+    }
+
+    &__time-conductor {
+        border-top: 1px solid $colorInteriorBorder;
+        padding-top: $interiorMargin;
+    }
+
+    &__main {
+        > .l-pane {
+            padding: nth($shellPanePad, 1) nth($shellPanePad, 2);
+        }
+    }
+
+    body.desktop & {
+        &__main {
+            // Top and bottom padding in container that holds tree, __pane-main and Inspector
+            padding: $shellMainPad;
+            min-height: 0;
+
+            > .l-pane {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+        }
+
+        &__pane-tree,
+        &__pane-inspector {
+            max-width: 30%;
+        }
+
+        &__pane-tree {
+            width: 300px;
+        }
+
+        &__pane-inspector {
+            width: 200px;
+        }
+    }
+
+    &__toolbar {
+        $p: $interiorMargin;
+        background: $editUIBaseColor;
+        border-radius: $basicCr;
+        height: $p + 24px; // Need to standardize the height
+        padding: $p;
+    }
+}
+
+.is-editing {
+    .l-shell__main-container {
+        $m: 3px;
+        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
+        margin-left: $m;
+        margin-right: $m;
+
+        &[s-selected] {
+            // Provide a clearer selection context articulation for the main edit area
+            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
+        }
+    }
+}
diff --git a/src/ui/layout/mct-search.scss b/src/ui/layout/mct-search.scss
new file mode 100644
index 0000000000..a6b1a8f18c
--- /dev/null
+++ b/src/ui/layout/mct-search.scss
@@ -0,0 +1,10 @@
+/******************************* SEARCH */
+.c-search {
+    input[type=search] {
+        width: 100%;
+    }
+
+    &--major {
+        display: flex;
+    }
+}
diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss
new file mode 100644
index 0000000000..b94896d2c8
--- /dev/null
+++ b/src/ui/layout/mct-tree.scss
@@ -0,0 +1,138 @@
+.c-tree-and-search {
+    display: flex;
+    flex-direction: column;
+    padding-right: $interiorMarginSm;
+    overflow: auto;
+
+    > * + * { margin-top: $interiorMargin; }
+
+    &__search {
+        flex: 0 0 auto;
+    }
+
+    &__loading {
+        flex: 1 1 auto;
+    }
+
+    &__no-results {
+        font-style: italic;
+        opacity: 0.6;
+    }
+
+    &__tree {
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 overflow bug fix
+    }
+}
+
+.c-tree {
+    @include userSelectNone();
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: $interiorMargin;
+
+    li {
+        position: relative;
+        &.c-tree__item-h { display: block; }
+    }
+
+    .c-tree {
+        margin-left: 15px;
+    }
+
+    &__item {
+        $aPad: $interiorMarginSm;
+        border-radius: $controlCr;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        line-height: 110%;
+        padding: $interiorMargin - $aPad;
+        transition: background 150ms ease;
+
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+
+        &:hover {
+            background: $colorItemTreeHoverBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeHoverFg;
+            }
+        }
+
+        &.is-navigated-object,
+        &.is-selected {
+            background: $colorItemTreeSelectedBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeSelectedFg;
+            }
+        }
+
+        &.is-being-edited {
+            background: $colorItemTreeEditingBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeEditingIcon;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeEditingFg;
+                font-style: italic;
+            }
+        }
+
+        // Object labels in trees
+        &__label {
+            // <a> tag that holds type icon and name.
+            // Draggable element.
+            /*border-radius: $controlCr;
+            display: flex;
+            align-items: center;
+            flex: 1 1 auto;
+            overflow: hidden;
+            padding: $aPad;
+            white-space: nowrap;*/
+        }
+
+        &__name {
+           // @include ellipsize();
+           // display: inline;
+            color: $colorItemTreeFg;
+          //  width: 100%;
+        }
+
+        &__type-icon {
+            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+           // display: block;
+         //   flex: 0 0 auto;
+          //  font-size: 1.3em;
+          //  margin-right: $interiorMarginSm;
+            color: $colorItemTreeIcon;
+          //  width: $treeTypeIconW;
+        }
+
+        &.is-alias {
+            // Object is an alias to an original.
+            [class*='__type-icon'] {
+                @include isAlias();
+            }
+        }
+
+        body.mobile & {
+            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
+            height: $mobileTreeItemH;
+            margin-bottom: $interiorMarginSm;
+            [class*="view-control"] {
+                width: ceil($mobileTreeItemH * 0.5);
+            }
+        }
+    }
+}
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index 21efc1b6c7..55236f2689 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -53,149 +53,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-tree-and-search {
-        display: flex;
-        flex-direction: column;
-        padding-right: $interiorMarginSm;
-        overflow: auto;
-
-        > * + * { margin-top: $interiorMargin; }
-
-        &__search {
-            flex: 0 0 auto;
-        }
-
-        &__loading {
-            flex: 1 1 auto;
-        }
-
-        &__no-results {
-            font-style: italic;
-            opacity: 0.6;
-        }
-
-        &__tree {
-            flex: 1 1 auto;
-            height: 0; // Chrome 73 overflow bug fix
-        }
-    }
-
-    .c-tree {
-        @include userSelectNone();
-        overflow-x: hidden;
-        overflow-y: auto;
-        padding-right: $interiorMargin;
-
-        li {
-            position: relative;
-            &.c-tree__item-h { display: block; }
-        }
-
-        .c-tree {
-            margin-left: 15px;
-        }
-
-        &__item {
-            $aPad: $interiorMarginSm;
-            border-radius: $controlCr;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            line-height: 110%;
-            padding: $interiorMargin - $aPad;
-            transition: background 150ms ease;
-
-            > * + * {
-                margin-left: $interiorMarginSm;
-            }
-
-            &:hover {
-                background: $colorItemTreeHoverBg;
-                .c-tree__item__type-icon:before {
-                    color: $colorItemTreeIconHover;
-                }
-
-                .c-tree__item__name {
-                    color: $colorItemTreeHoverFg;
-                }
-            }
-
-            &.is-navigated-object,
-            &.is-selected {
-                background: $colorItemTreeSelectedBg;
-                .c-tree__item__type-icon:before {
-                    color: $colorItemTreeIconHover;
-                }
-
-                .c-tree__item__name {
-                    color: $colorItemTreeSelectedFg;
-                }
-            }
-
-            &.is-being-edited {
-                background: $colorItemTreeEditingBg;
-                .c-tree__item__type-icon:before {
-                    color: $colorItemTreeEditingIcon;
-                }
-
-                .c-tree__item__name {
-                    color: $colorItemTreeEditingFg;
-                    font-style: italic;
-                }
-            }
-
-            // Object labels in trees
-            &__label {
-                // <a> tag that holds type icon and name.
-                // Draggable element.
-                /*border-radius: $controlCr;
-                display: flex;
-                align-items: center;
-                flex: 1 1 auto;
-                overflow: hidden;
-                padding: $aPad;
-                white-space: nowrap;*/
-            }
-
-            &__name {
-               // @include ellipsize();
-               // display: inline;
-                color: $colorItemTreeFg;
-              //  width: 100%;
-            }
-
-            &__type-icon {
-                // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
-               // display: block;
-             //   flex: 0 0 auto;
-              //  font-size: 1.3em;
-              //  margin-right: $interiorMarginSm;
-                color: $colorItemTreeIcon;
-              //  width: $treeTypeIconW;
-            }
-
-            &.is-alias {
-                // Object is an alias to an original.
-                [class*='__type-icon'] {
-                    @include isAlias();
-                }
-            }
-
-            body.mobile & {
-                @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
-                height: $mobileTreeItemH;
-                margin-bottom: $interiorMarginSm;
-                [class*="view-control"] {
-                    width: ceil($mobileTreeItemH * 0.5);
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import treeItem from './tree-item.vue'
 import search from '../components/search.vue';
diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss
new file mode 100644
index 0000000000..9e4126b119
--- /dev/null
+++ b/src/ui/layout/pane.scss
@@ -0,0 +1,312 @@
+/**************************** BASE - MOBILE AND DESKTOP */
+.l-multipane {
+    display: flex;
+    flex: 1 1 auto;
+
+    &--horizontal,
+    > .l-pane {
+        flex-flow: row nowrap;
+    }
+
+    &--vertical,
+    > .l-pane  {
+        flex-flow: column nowrap;
+    }
+
+    &--vertical {
+        height: 100%;
+    }
+}
+
+.l-pane {
+    backface-visibility: hidden;
+    display: flex;
+    min-width: 0px;
+    min-height: 0px;
+    opacity: 1;
+    pointer-events: inherit;
+
+    &__handle,
+    &__label {
+        // __handle and __label don't appear in mobile
+        display: none;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        margin-bottom: $interiorMargin;
+    }
+
+    &--reacts {
+        // This is the pane that doesn't hold the handle
+        // It reacts to other panes that are able to resize
+        flex: 1 1 0;
+    }
+
+    &--collapsed {
+        flex-basis: 0px !important;
+        transition: all 350ms ease;
+
+        .l-pane__contents {
+            transition: opacity 150ms ease;
+            opacity: 0;
+            pointer-events: none;
+            overflow: hidden;
+
+            > * {
+                min-width: 0 !important;
+                min-height: 0 !important;
+            }
+        }
+    }
+
+    &[class*="--horizontal"] {
+        &.l-pane--collapsed {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+        }
+    }
+
+    &[class*="--vertical"] {
+        &.l-pane--collapsed {
+            padding-top: 0 !important;
+            padding-top: 0 !important;
+        }
+    }
+
+    /************************ CONTENTS */
+    &__contents {
+        flex: 1 1 100%;
+        opacity: 1;
+        pointer-events: inherit;
+        transition: opacity 250ms ease 250ms;
+
+        .l-pane__contents {
+            // Don't pad all nested __contents
+            padding: 0;
+        }
+
+        > [class*="__"] + [class*="__"] {
+        }
+    }
+
+    /************************************************ DESKTOP STYLES */
+    body.desktop & {
+        &__handle {
+            background: $colorSplitterBg;
+            display: block;
+            position: absolute;
+            transition: $transOut;
+
+            &:before {
+                // Extended hit area
+                content: '';
+                display: block;
+                position: absolute;
+                z-index: -1;
+            }
+
+            &:hover {
+                background: $colorSplitterHover;
+                transition: $transIn;
+            }
+        }
+
+        &__header {
+            font-size: floor(12px * .9);
+        }
+
+        &__label {
+            // Name of the pane
+            @include ellipsize();
+            @include userSelectNone();
+            color: $splitterBtnLabelColorFg;
+            display: block;
+            pointer-events: none;
+            text-transform: uppercase;
+            transform-origin: top left;
+            flex: 1 1 auto;
+        }
+
+        &--resizing {
+            // User is dragging the handle and resizing a pane
+            @include userSelectNone();
+
+            + .l-pane {
+                @include userSelectNone();
+            }
+
+            .l-pane {
+                &__handle {
+                    background: $colorSplitterHover;
+                }
+            }
+        }
+
+        &[class*="--collapsed"] {
+            /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
+            $d: nth($splitterBtnD, 1);
+            flex-basis: $d;
+            min-width: $d;
+            min-height: $d;
+
+            > .l-pane__handle {
+                display: none;
+            }
+
+            .l-pane__header {
+                &:hover {
+                    color: $splitterCollapsedBtnColorFgHov;
+                    .l-pane__label {
+                        color: inherit;
+                    }
+                    .l-pane__collapse-button {
+                        background: $splitterCollapsedBtnColorBgHov;
+                        color: inherit;
+                        transition: $transIn;
+                    }
+                }
+            }
+
+            .l-pane__collapse-button {
+                background: $splitterCollapsedBtnColorBg;
+                color: $splitterCollapsedBtnColorFg;
+            }
+        }
+
+        &[class*="--horizontal"] {
+            > .l-pane__handle {
+                cursor: col-resize;
+                top: 0;
+                bottom: 0;
+                width: $splitterHandleD;
+
+                &:before {
+                    // Extended hit area
+                    top: 0;
+                    right: $splitterHandleHitMargin * -1;
+                    bottom: 0;
+                    left: $splitterHandleHitMargin * -1;
+                }
+            }
+
+            .l-pane__collapse-button {
+                &:before {
+                    content: $glyph-icon-arrow-right-equilateral;
+                }
+            }
+
+            &[class*="--collapsed"] {
+                /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
+                [class*="__header"] {
+                    @include abs();
+                    margin: 0;
+                }
+
+                [class*="label"] {
+                    position: absolute;
+                    transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
+                    left: 3px;
+                    top: 0;
+                    z-index: 1;
+                }
+
+                .l-pane__collapse-button {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
+                    position: absolute;
+                    top: 0; right: 0; bottom: 0; left: 0;
+                    height: auto; width: 100%;
+                    padding: 0;
+
+                    &:before {
+                        position: absolute;
+                        top: 5px;
+                    }
+                }
+            }
+
+            /************************** Horizontal Splitter Before */
+            // Inspector pane
+            &[class*="-before"] {
+                > .l-pane__handle {
+                    left: 0;
+                    transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
+                }
+
+                &[class*="--collapsed"] {
+                    .l-pane__collapse-button {
+                        transform: scaleX(-1);
+                    }
+                }
+            }
+
+            /************************** Horizontal Splitter After */
+            // Tree pane
+            &[class*="-after"] {
+                > .l-pane__handle {
+                    right: 0;
+                    transform: translateX(floor($splitterHandleD / 2));
+                }
+
+                &:not([class*="--collapsed"]) {
+                    .l-pane__collapse-button {
+                        transform: scaleX(-1);
+                    }
+                }
+            }
+        }
+
+        &[class*="--vertical"] {
+            > .l-pane__handle {
+                cursor: row-resize;
+                left: 0;
+                right: 0;
+                height: $splitterHandleD;
+
+                &:before {
+                    // Extended hit area
+                    left: 0;
+                    top: $splitterHandleHitMargin * -1;
+                    right: 0;
+                    bottom: $splitterHandleHitMargin * -1;
+                }
+            }
+
+            /************************** Vertical Splitter Before */
+            // Pane collapses downward. Used by Elements pool in Inspector
+            &[class*="-before"] {
+                > .l-pane__handle {
+                    top: 0;
+                    transform: translateY(floor($splitterHandleD / -1));
+                }
+
+                .l-pane__collapse-button:before {
+                    content: $glyph-icon-arrow-down;
+                }
+
+                &.l-pane--collapsed {
+                    > .l-pane__collapse-button {
+                        transform: scaleY(-1);
+                    }
+                }
+            }
+
+            /************************** Vertical Splitter After */
+            // Pane collapses upward. Not sure we'll ever use this...
+            &[class*="-after"] {
+                > .l-pane__handle {
+                    bottom: 0;
+                    transform: translateY(floor($splitterHandleD / 1));
+                }
+
+                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
+                    &:after {
+                        transform: scaleY(-1);
+                    }
+                }
+            }
+        }
+    } // Ends .body.desktop
+} // Ends .l-pane
diff --git a/src/ui/layout/pane.vue b/src/ui/layout/pane.vue
index a47090393e..78b9c9ef9b 100644
--- a/src/ui/layout/pane.vue
+++ b/src/ui/layout/pane.vue
@@ -33,323 +33,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /**************************** BASE - MOBILE AND DESKTOP */
-    .l-multipane {
-        display: flex;
-        flex: 1 1 auto;
-
-        &--horizontal,
-        > .l-pane {
-            flex-flow: row nowrap;
-        }
-
-        &--vertical,
-        > .l-pane  {
-            flex-flow: column nowrap;
-        }
-
-        &--vertical {
-            height: 100%;
-        }
-    }
-
-    .l-pane {
-        backface-visibility: hidden;
-        display: flex;
-        min-width: 0px;
-        min-height: 0px;
-        opacity: 1;
-        pointer-events: inherit;
-
-        &__handle,
-        &__label {
-            // __handle and __label don't appear in mobile
-            display: none;
-        }
-
-        &__header {
-            display: flex;
-            align-items: center;
-            margin-bottom: $interiorMargin;
-        }
-
-        &--reacts {
-            // This is the pane that doesn't hold the handle
-            // It reacts to other panes that are able to resize
-            flex: 1 1 0;
-        }
-
-        &--collapsed {
-            flex-basis: 0px !important;
-            transition: all 350ms ease;
-
-            .l-pane__contents {
-                transition: opacity 150ms ease;
-                opacity: 0;
-                pointer-events: none;
-                overflow: hidden;
-
-                > * {
-                    min-width: 0 !important;
-                    min-height: 0 !important;
-                }
-            }
-        }
-
-        &[class*="--horizontal"] {
-            &.l-pane--collapsed {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-        }
-
-        &[class*="--vertical"] {
-            &.l-pane--collapsed {
-                padding-top: 0 !important;
-                padding-top: 0 !important;
-            }
-        }
-
-        /************************ CONTENTS */
-        &__contents {
-            flex: 1 1 100%;
-            opacity: 1;
-            pointer-events: inherit;
-            transition: opacity 250ms ease 250ms;
-
-            .l-pane__contents {
-                // Don't pad all nested __contents
-                padding: 0;
-            }
-
-            > [class*="__"] + [class*="__"] {
-            }
-        }
-
-        /************************************************ DESKTOP STYLES */
-        body.desktop & {
-            &__handle {
-                background: $colorSplitterBg;
-                display: block;
-                position: absolute;
-                transition: $transOut;
-
-                &:before {
-                    // Extended hit area
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    z-index: -1;
-                }
-
-                &:hover {
-                    background: $colorSplitterHover;
-                    transition: $transIn;
-                }
-            }
-
-            &__header {
-                font-size: floor(12px * .9);
-            }
-
-            &__label {
-                // Name of the pane
-                @include ellipsize();
-                @include userSelectNone();
-                color: $splitterBtnLabelColorFg;
-                display: block;
-                pointer-events: none;
-                text-transform: uppercase;
-                transform-origin: top left;
-                flex: 1 1 auto;
-            }
-
-            &--resizing {
-                // User is dragging the handle and resizing a pane
-                @include userSelectNone();
-
-                + .l-pane {
-                    @include userSelectNone();
-                }
-
-                .l-pane {
-                    &__handle {
-                        background: $colorSplitterHover;
-                    }
-                }
-            }
-
-            &[class*="--collapsed"] {
-                /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
-                $d: nth($splitterBtnD, 1);
-                flex-basis: $d;
-                min-width: $d;
-                min-height: $d;
-
-                > .l-pane__handle {
-                    display: none;
-                }
-
-                .l-pane__header {
-                    &:hover {
-                        color: $splitterCollapsedBtnColorFgHov;
-                        .l-pane__label {
-                            color: inherit;
-                        }
-                        .l-pane__collapse-button {
-                            background: $splitterCollapsedBtnColorBgHov;
-                            color: inherit;
-                            transition: $transIn;
-                        }
-                    }
-                }
-
-                .l-pane__collapse-button {
-                    background: $splitterCollapsedBtnColorBg;
-                    color: $splitterCollapsedBtnColorFg;
-                }
-            }
-
-            &[class*="--horizontal"] {
-                > .l-pane__handle {
-                    cursor: col-resize;
-                    top: 0;
-                    bottom: 0;
-                    width: $splitterHandleD;
-
-                    &:before {
-                        // Extended hit area
-                        top: 0;
-                        right: $splitterHandleHitMargin * -1;
-                        bottom: 0;
-                        left: $splitterHandleHitMargin * -1;
-                    }
-                }
-
-                .l-pane__collapse-button {
-                    &:before {
-                        content: $glyph-icon-arrow-right-equilateral;
-                    }
-                }
-
-                &[class*="--collapsed"] {
-                    /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
-                    [class*="__header"] {
-                        @include abs();
-                        margin: 0;
-                    }
-
-                    [class*="label"] {
-                        position: absolute;
-                        transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
-                        left: 3px;
-                        top: 0;
-                        z-index: 1;
-                    }
-
-                    .l-pane__collapse-button {
-                        border-top-left-radius: 0;
-                        border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
-                        position: absolute;
-                        top: 0; right: 0; bottom: 0; left: 0;
-                        height: auto; width: 100%;
-                        padding: 0;
-
-                        &:before {
-                            position: absolute;
-                            top: 5px;
-                        }
-                    }
-                }
-
-                /************************** Horizontal Splitter Before */
-                // Inspector pane
-                &[class*="-before"] {
-                    > .l-pane__handle {
-                        left: 0;
-                        transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
-                    }
-
-                    &[class*="--collapsed"] {
-                        .l-pane__collapse-button {
-                            transform: scaleX(-1);
-                        }
-                    }
-                }
-
-                /************************** Horizontal Splitter After */
-                // Tree pane
-                &[class*="-after"] {
-                    > .l-pane__handle {
-                        right: 0;
-                        transform: translateX(floor($splitterHandleD / 2));
-                    }
-
-                    &:not([class*="--collapsed"]) {
-                        .l-pane__collapse-button {
-                            transform: scaleX(-1);
-                        }
-                    }
-                }
-            }
-
-            &[class*="--vertical"] {
-                > .l-pane__handle {
-                    cursor: row-resize;
-                    left: 0;
-                    right: 0;
-                    height: $splitterHandleD;
-
-                    &:before {
-                        // Extended hit area
-                        left: 0;
-                        top: $splitterHandleHitMargin * -1;
-                        right: 0;
-                        bottom: $splitterHandleHitMargin * -1;
-                    }
-                }
-
-                /************************** Vertical Splitter Before */
-                // Pane collapses downward. Used by Elements pool in Inspector
-                &[class*="-before"] {
-                    > .l-pane__handle {
-                        top: 0;
-                        transform: translateY(floor($splitterHandleD / -1));
-                    }
-
-                    .l-pane__collapse-button:before {
-                        content: $glyph-icon-arrow-down;
-                    }
-
-                    &.l-pane--collapsed {
-                        > .l-pane__collapse-button {
-                            transform: scaleY(-1);
-                        }
-                    }
-                }
-
-                /************************** Vertical Splitter After */
-                // Pane collapses upward. Not sure we'll ever use this...
-                &[class*="-after"] {
-                    > .l-pane__handle {
-                        bottom: 0;
-                        transform: translateY(floor($splitterHandleD / 1));
-                    }
-
-                    &:not(.l-pane--collapsed) > .l-pane__collapse-button {
-                        &:after {
-                            transform: scaleY(-1);
-                        }
-                    }
-                }
-            }
-        } // Ends .body.desktop
-    } // Ends .l-pane
-</style>
-
 <script>
 const COLLAPSE_THRESHOLD_PX = 40;
 
diff --git a/src/ui/layout/status-bar/Indicators.vue b/src/ui/layout/status-bar/Indicators.vue
index 7f2c9f4bf7..70707fb6b9 100644
--- a/src/ui/layout/status-bar/Indicators.vue
+++ b/src/ui/layout/status-bar/Indicators.vue
@@ -20,138 +20,6 @@
 <div></div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-indicator {
-        @include cControl();
-        @include cClickIconButtonLayout();
-        button { text-transform: uppercase; }
-
-        background: none !important;
-        border-radius: $controlCr;
-        overflow: visible;
-        position: relative;
-        text-transform: uppercase;
-
-
-        &.no-minify {
-            // For items that cannot be minified
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-
-            > *,
-            &:before {
-                flex: 1 1 auto;
-            }
-
-            &:before {
-                margin-right: $interiorMarginSm;
-            }
-        }
-
-        &:not(.no-minify) {
-            &:before {
-                margin-right: 0 !important;
-            }
-        }
-    }
-
-    .c-indicator__label {
-        // Label element. Appears as a hover bubble element when Indicators are minified;
-        // Appears as an inline element when not.
-        display: inline-block;
-        transition:none;
-        white-space: nowrap;
-
-        a,
-        button,
-        s-button,
-        .c-button {
-            // Make <a> in label look like buttons
-            transition: $transIn;
-            background: transparent;
-            border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
-            border-radius: $controlCr;
-            box-sizing: border-box;
-            color: inherit;
-            font-size: inherit;
-            height: auto;
-            line-height: normal;
-            padding: 0 2px;
-            &:hover {
-                background: rgba($colorIndicatorMenuFg, 0.1);
-                border-color: rgba($colorIndicatorMenuFg, 0.75);
-                color: $colorIndicatorMenuFgHov;
-            }
-        }
-
-        [class*='icon-'] {
-            // If any elements within label include the class 'icon-*' then deal with their :before's
-            &:before {
-                font-size: 0.8em;
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    .c-indicator__count {
-        display: none; // Only displays when Indicator is minified, see below
-    }
-
-    [class*='minify-indicators'] {
-        // All styles for minified Indicators should go in here
-        .c-indicator:not(.no-minify) {
-            @include hover() {
-                background: $colorIndicatorBgHov;
-                .c-indicator__label {
-                    box-shadow: $colorIndicatorMenuBgShdw;
-                    transform: scale(1.0);
-                    transition: all 100ms ease-out 100ms;
-                }
-            }
-            .c-indicator__label {
-                transition: all 250ms ease-in 200ms;
-                background: $colorIndicatorMenuBg;
-                color: $colorIndicatorMenuFg;
-                border-radius: $controlCr;
-                right: 0;
-                top: 130%;
-                padding: $interiorMargin $interiorMargin;
-                position: absolute;
-                transform-origin: 90% 0;
-                transform: scale(0.0);
-                overflow: visible;
-                z-index: 50;
-
-                &:before {
-                    // Infobubble-style arrow element
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    bottom: 100%;
-                    right: 8px;
-                    @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
-                }
-            }
-
-            .c-indicator__count {
-                display: inline-block;
-                margin-left: $interiorMarginSm;
-            }
-        }
-    }
-
-    /* Mobile */
-    // Hide the clock indicator when we're phone portrait
-    body.phone.portrait {
-        .c-indicator.t-indicator-clock {
-            display: none;
-        }
-    }
-</style>
-
 <script>
 export default {
     inject: ['openmct'],
diff --git a/src/ui/layout/status-bar/NotificationBanner.vue b/src/ui/layout/status-bar/NotificationBanner.vue
index b962d023ac..49fdd927fc 100644
--- a/src/ui/layout/status-bar/NotificationBanner.vue
+++ b/src/ui/layout/status-bar/NotificationBanner.vue
@@ -41,85 +41,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
-        $bgPb: 10%;
-        $bgPbD: 10%;
-        background-color: darken($bg, $bgPb);
-        color: $fg;
-        &:hover {
-            background-color: darken($bg, $bgPb - $bgPbD);
-        }
-        .s-action {
-            background-color: darken($bg, $bgPb + $bgPbD);
-            &:hover {
-                background-color: darken($bg, $bgPb);
-            }
-        }
-    }
-
-    .c-message-banner {
-        $closeBtnSize: 7px;
-
-        border-radius: $controlCr;
-        @include statusBannerColors($colorStatusDefault, $colorStatusFg);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        left: 50%;
-        top: 50%;
-        max-width: 50%;
-        max-height: 25px;
-        padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
-        position: absolute;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        &.ok {
-            @include statusBannerColors($colorOk, $colorOkFg);
-        }
-
-        &.info {
-            @include statusBannerColors($colorInfo, $colorInfoFg);
-        }
-        &.caution,
-        &.warning,
-        &.alert {
-            @include statusBannerColors($colorWarningLo,$colorWarningLoFg);
-        }
-        &.error {
-            @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
-        }
-
-        &__message {
-            @include ellipsize();
-            flex: 1 1 auto;
-        }
-
-        &__progress-bar {
-            flex: 0 0 auto;
-            width: 70px;
-
-            // Only show the progress bar
-            .c-progress-bar {
-                &__text {
-                    display: none;
-                }
-            }
-        }
-
-        &__close-button {
-            font-size: 1.25em;
-        }
-    }
-</style>
-
 <script>
 import ProgressBar from '../../components/ProgressBar.vue';
 let activeNotification = undefined;
diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
new file mode 100644
index 0000000000..5427055efe
--- /dev/null
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -0,0 +1,127 @@
+.c-indicator {
+    @include cControl();
+    @include cClickIconButtonLayout();
+    button { text-transform: uppercase; }
+
+    background: none !important;
+    border-radius: $controlCr;
+    overflow: visible;
+    position: relative;
+    text-transform: uppercase;
+
+
+    &.no-minify {
+        // For items that cannot be minified
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        > *,
+        &:before {
+            flex: 1 1 auto;
+        }
+
+        &:before {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &:not(.no-minify) {
+        &:before {
+            margin-right: 0 !important;
+        }
+    }
+}
+
+.c-indicator__label {
+    // Label element. Appears as a hover bubble element when Indicators are minified;
+    // Appears as an inline element when not.
+    display: inline-block;
+    transition:none;
+    white-space: nowrap;
+
+    a,
+    button,
+    s-button,
+    .c-button {
+        // Make <a> in label look like buttons
+        transition: $transIn;
+        background: transparent;
+        border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
+        border-radius: $controlCr;
+        box-sizing: border-box;
+        color: inherit;
+        font-size: inherit;
+        height: auto;
+        line-height: normal;
+        padding: 0 2px;
+        &:hover {
+            background: rgba($colorIndicatorMenuFg, 0.1);
+            border-color: rgba($colorIndicatorMenuFg, 0.75);
+            color: $colorIndicatorMenuFgHov;
+        }
+    }
+
+    [class*='icon-'] {
+        // If any elements within label include the class 'icon-*' then deal with their :before's
+        &:before {
+            font-size: 0.8em;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}
+
+.c-indicator__count {
+    display: none; // Only displays when Indicator is minified, see below
+}
+
+[class*='minify-indicators'] {
+    // All styles for minified Indicators should go in here
+    .c-indicator:not(.no-minify) {
+        @include hover() {
+            background: $colorIndicatorBgHov;
+            .c-indicator__label {
+                box-shadow: $colorIndicatorMenuBgShdw;
+                transform: scale(1.0);
+                transition: all 100ms ease-out 100ms;
+            }
+        }
+        .c-indicator__label {
+            transition: all 250ms ease-in 200ms;
+            background: $colorIndicatorMenuBg;
+            color: $colorIndicatorMenuFg;
+            border-radius: $controlCr;
+            right: 0;
+            top: 130%;
+            padding: $interiorMargin $interiorMargin;
+            position: absolute;
+            transform-origin: 90% 0;
+            transform: scale(0.0);
+            overflow: visible;
+            z-index: 50;
+
+            &:before {
+                // Infobubble-style arrow element
+                content: '';
+                display: block;
+                position: absolute;
+                bottom: 100%;
+                right: 8px;
+                @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
+            }
+        }
+
+        .c-indicator__count {
+            display: inline-block;
+            margin-left: $interiorMarginSm;
+        }
+    }
+}
+
+/* Mobile */
+// Hide the clock indicator when we're phone portrait
+body.phone.portrait {
+    .c-indicator.t-indicator-clock {
+        display: none;
+    }
+}
diff --git a/src/ui/layout/status-bar/notification-banner.scss b/src/ui/layout/status-bar/notification-banner.scss
new file mode 100644
index 0000000000..1247aa4387
--- /dev/null
+++ b/src/ui/layout/status-bar/notification-banner.scss
@@ -0,0 +1,74 @@
+@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
+    $bgPb: 10%;
+    $bgPbD: 10%;
+    background-color: darken($bg, $bgPb);
+    color: $fg;
+    &:hover {
+        background-color: darken($bg, $bgPb - $bgPbD);
+    }
+    .s-action {
+        background-color: darken($bg, $bgPb + $bgPbD);
+        &:hover {
+            background-color: darken($bg, $bgPb);
+        }
+    }
+}
+
+.c-message-banner {
+    $closeBtnSize: 7px;
+
+    border-radius: $controlCr;
+    @include statusBannerColors($colorStatusDefault, $colorStatusFg);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    left: 50%;
+    top: 50%;
+    max-width: 50%;
+    max-height: 25px;
+    padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    &.ok {
+        @include statusBannerColors($colorOk, $colorOkFg);
+    }
+
+    &.info {
+        @include statusBannerColors($colorInfo, $colorInfoFg);
+    }
+    &.caution,
+    &.warning,
+    &.alert {
+        @include statusBannerColors($colorWarningLo,$colorWarningLoFg);
+    }
+    &.error {
+        @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
+    }
+
+    &__message {
+        @include ellipsize();
+        flex: 1 1 auto;
+    }
+
+    &__progress-bar {
+        flex: 0 0 auto;
+        width: 70px;
+
+        // Only show the progress bar
+        .c-progress-bar {
+            &__text {
+                display: none;
+            }
+        }
+    }
+
+    &__close-button {
+        font-size: 1.25em;
+    }
+}
diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue
index 61a4a33643..ca78928d1d 100644
--- a/src/ui/preview/Preview.vue
+++ b/src/ui/preview/Preview.vue
@@ -54,37 +54,6 @@
     </div>
 </div>
 </template>
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .l-preview-window {
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
-
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
-        &__object-name {
-            flex: 0 0 auto;
-        }
-
-        &__object-view {
-            background: $colorBodyBg;
-            border: 1px solid $colorInteriorBorder;
-            flex: 1 1 auto;
-            overflow: auto;
-            padding: $interiorMargin;
-
-            > div:not([class]) {
-                // Target an immediate child div without a class and make it display: contents
-                display: contents;
-            }
-        }
-    }
-</style>
 
 <script>
 import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
diff --git a/src/ui/preview/preview.scss b/src/ui/preview/preview.scss
new file mode 100644
index 0000000000..4515294557
--- /dev/null
+++ b/src/ui/preview/preview.scss
@@ -0,0 +1,27 @@
+.l-preview-window {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__object-name {
+        flex: 0 0 auto;
+    }
+
+    &__object-view {
+        background: $colorBodyBg;
+        border: 1px solid $colorInteriorBorder;
+        flex: 1 1 auto;
+        overflow: auto;
+        padding: $interiorMargin;
+
+        > div:not([class]) {
+            // Target an immediate child div without a class and make it display: contents
+            display: contents;
+        }
+    }
+}
diff --git a/src/ui/toolbar/components/toolbar-checkbox.scss b/src/ui/toolbar/components/toolbar-checkbox.scss
new file mode 100644
index 0000000000..1614a97076
--- /dev/null
+++ b/src/ui/toolbar/components/toolbar-checkbox.scss
@@ -0,0 +1,45 @@
+.c-custom-checkbox {
+    $d: 14px;
+    display: flex;
+    align-items: center;
+
+    label {
+        @include userSelectNone();
+        display: flex;
+        align-items: center;
+    }
+
+    &__box {
+        @include nice-input();
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: $d;
+        width: $d;
+        height: $d;
+        margin-right: $interiorMarginSm;
+    }
+
+    input {
+        opacity: 0;
+        position: absolute;
+
+        &:checked + label > .c-custom-checkbox__box {
+            background: $colorKey;
+            &:before {
+                color: $colorKeyFg;
+                content: $glyph-icon-check;
+                font-family: symbolsfont;
+                font-size: 0.6em;
+            }
+        }
+
+        &:not(:disabled) + label {
+            cursor: pointer;
+        }
+
+        &:disabled + label {
+            opacity: 0.5;
+        }
+    }
+}
diff --git a/src/ui/toolbar/components/toolbar-checkbox.vue b/src/ui/toolbar/components/toolbar-checkbox.vue
index c05c3a4ff4..4e918a233b 100644
--- a/src/ui/toolbar/components/toolbar-checkbox.vue
+++ b/src/ui/toolbar/components/toolbar-checkbox.vue
@@ -18,58 +18,7 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-custom-checkbox {
-        $d: 14px;
-        display: flex;
-        align-items: center;
-
-        label {
-            @include userSelectNone();
-            display: flex;
-            align-items: center;
-        }
-
-        &__box {
-            @include nice-input();
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            line-height: $d;
-            width: $d;
-            height: $d;
-            margin-right: $interiorMarginSm;
-        }
-
-        input {
-            opacity: 0;
-            position: absolute;
-
-            &:checked + label > .c-custom-checkbox__box {
-                background: $colorKey;
-                &:before {
-                    color: $colorKeyFg;
-                    content: $glyph-icon-check;
-                    font-family: symbolsfont;
-                    font-size: 0.6em;
-                }
-            }
-
-            &:not(:disabled) + label {
-                cursor: pointer;
-            }
-
-            &:disabled + label {
-                opacity: 0.5;
-            }
-        }
-    }
-</style>
-
 <script>
-
 let uniqueId = 100;
 
 export default {
diff --git a/webpack.config.js b/webpack.config.js
index edc594f21b..c935beafb1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const bourbon = require('node-bourbon');
 const packageDefinition = require('./package.json');
 
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@@ -20,6 +19,9 @@ const webpackConfig = {
     mode: devMode ? 'development' : 'production',
     entry: {
         openmct: './openmct.js',
+        espressoTheme: './src/plugins/themes/espresso-theme.scss',
+        snowTheme: './src/plugins/themes/snow-theme.scss',
+        maelstromTheme: './src/plugins/themes/maelstrom-theme.scss'
     },
     output: {
         filename: '[name].js',
@@ -48,12 +50,13 @@ const webpackConfig = {
             __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
             __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
             __OPENMCT_REVISION__: `'${gitRevision}'`,
-            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`
+            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
+            __OPENMCT_ROOT_RELATIVE__: `'${devMode ? 'dist/' : ''}'`
         }),
         new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
-            path: 'assets/styles/',
-            filename: '[name].css'
+            filename: '[name].css',
+            chunkFilename: '[name].css'
         }),
         new CopyWebpackPlugin([
             {
@@ -73,14 +76,9 @@ const webpackConfig = {
             {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
-                    devMode ? 'style-loader': MiniCssExtractPlugin.loader,
+                    MiniCssExtractPlugin.loader,
                     'css-loader',
-                    {
-                        loader: 'fast-sass-loader',
-                        options: {
-                            includePaths: bourbon.includePaths
-                        }
-                    }
+                    'fast-sass-loader'
                 ]
             },
             {