diff --git a/angular.json b/angular.json
index 114d212..6317d16 100644
--- a/angular.json
+++ b/angular.json
@@ -29,6 +29,11 @@
             "styles": [
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -85,6 +90,11 @@
             "styles": [
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": [],
             "assets": [
               "src/favicon.ico",
@@ -177,8 +187,13 @@
               "projects/market/src/assets"
             ],
             "styles": [
-              "projects/market/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -249,8 +264,13 @@
             "tsConfig": "projects/market/tsconfig.spec.json",
             "karmaConfig": "projects/market/karma.conf.js",
             "styles": [
-              "projects/market/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": [],
             "assets": [
               "projects/market/src/favicon.ico",
@@ -343,8 +363,13 @@
               "projects/sso/src/assets"
             ],
             "styles": [
-              "projects/sso/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -415,8 +440,13 @@
             "tsConfig": "projects/sso/tsconfig.spec.json",
             "karmaConfig": "projects/sso/karma.conf.js",
             "styles": [
-              "projects/sso/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": [],
             "assets": [
               "projects/sso/src/favicon.ico",
@@ -544,8 +574,13 @@
               "projects/account/src/assets"
             ],
             "styles": [
-              "projects/account/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -600,8 +635,13 @@
             "tsConfig": "projects/account/tsconfig.spec.json",
             "karmaConfig": "projects/account/karma.conf.js",
             "styles": [
-              "projects/account/src/styles.scss"
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+                "includePaths": [
+                    "./src/stylesheets"
+                ]
+            },
             "scripts": [],
             "assets": [
               "projects/account/src/favicon.ico",
@@ -653,4 +693,4 @@
     }
   },
   "defaultProject": "internet"
-}
\ No newline at end of file
+}
diff --git a/projects/market/src/app/app.component.html b/projects/market/src/app/app.component.html
index 9641929..247b98d 100644
--- a/projects/market/src/app/app.component.html
+++ b/projects/market/src/app/app.component.html
@@ -6,7 +6,7 @@
         Inject the marketplace app into the <mat-sidenav-content> component
         of the global navigation menu library.
     -->
-    <div appBody class="app-body">
+    <div appBody id="app-body">
         <router-outlet></router-outlet>
     </div>
 </globalnav-sidenav>
diff --git a/projects/market/src/app/app.component.scss b/projects/market/src/app/app.component.scss
index 263bf03..9065c29 100644
--- a/projects/market/src/app/app.component.scss
+++ b/projects/market/src/app/app.component.scss
@@ -1,6 +1,4 @@
-@import '../stylesheets/global';
-
-.app-body {
+#app-body {
     margin-left: 3vw;
     margin-right: 3vw;
     margin-top: 30px;
diff --git a/projects/market/src/app/skills/install-button/install-button.component.html b/projects/market/src/app/skills/install-button/install-button.component.html
index 1495b60..4b8704e 100644
--- a/projects/market/src/app/skills/install-button/install-button.component.html
+++ b/projects/market/src/app/skills/install-button/install-button.component.html
@@ -6,7 +6,7 @@
         fxLayout="row"
         fxLayoutAlign="center center"
         mat-flat-button
-        class="uninstall-button"
+        id="uninstall-button"
         (click)="uninstallSkill()"
         [ngStyle]="installButtonStyle"
     >
@@ -20,7 +20,7 @@
         fxLayout="row"
         fxLayoutAlign="center center"
         mat-flat-button
-        class="installed-button"
+        id="installed-button"
         [disabled]="true"
         [ngStyle]="installButtonStyle"
     >
@@ -34,10 +34,10 @@
         fxLayout="row"
         fxLayoutAlign="center center"
         mat-flat-button
-        class="installing-button"
+        id="installing-button"
         [ngStyle]="installButtonStyle"
     >
-        <div class="installing-spinner"></div>
+        <div id="installing-spinner"></div>
         ADDING...
     </button>
 
@@ -47,10 +47,10 @@
         fxLayout="row"
         fxLayoutAlign="center center"
         mat-flat-button
-        class="uninstalling-button"
+        id="uninstalling-button"
         [ngStyle]="installButtonStyle"
     >
-        <div class="uninstalling-spinner"></div>
+        <div id="uninstalling-spinner"></div>
         REMOVING...
     </button>
 
@@ -59,7 +59,7 @@
         *ngSwitchDefault
         fxLayout="row"
         fxLayoutAlign="center center"
-        class="install-button"
+        id="install-button"
         mat-flat-button
         (click)="install_skill()"
         [ngStyle]="installButtonStyle"
@@ -68,4 +68,4 @@
         <span>ADD</span>
     </button>
 
-</ng-container>
\ No newline at end of file
+</ng-container>
diff --git a/projects/market/src/app/skills/install-button/install-button.component.scss b/projects/market/src/app/skills/install-button/install-button.component.scss
index 728f150..470317d 100644
--- a/projects/market/src/app/skills/install-button/install-button.component.scss
+++ b/projects/market/src/app/skills/install-button/install-button.component.scss
@@ -1,4 +1,4 @@
-@import '../../../stylesheets/global.scss';
+@import 'mycroft-colors';
 
 @mixin install-status {
     border-radius: 4px;
@@ -24,22 +24,22 @@ fa-icon {
     opacity: 0.6;
 }
 
-.install-button {
+#install-button {
     @include install-status;
     background-color: $mycroft-primary ;
     color: $mycroft-white;
 }
-.install-button:hover {
+#install-button:hover {
     @include install-status;
     background-color: $mycroft-tertiary-green;
     color: $mycroft-secondary;
 }
 
-.installed-button {
+#installed-button {
     @include install-status;
 }
 
-.installing-button {
+#installing-button {
     @include install-status;
     background-color: $mycroft-tertiary-green;
     color: $mycroft-secondary;
@@ -49,14 +49,14 @@ fa-icon {
         margin-top: 7px;
     }
 }
-.installing-spinner {
+#installing-spinner {
     @include spinner-common;
     border-right-color: $mycroft-secondary;
     border-top-color: $mycroft-secondary;
 }
 
 
-.uninstall-button {
+#uninstall-button {
     @include install-status;
     background-color: $mycroft-dark-grey;
     color: $mycroft-white;
@@ -68,12 +68,12 @@ fa-icon {
     color: $mycroft-white;
 }
 
-.uninstalling-button {
+#uninstalling-button {
     @include install-status;
     background-color: #eb5757;
     color: $mycroft-white;
 }
-.uninstalling-spinner {
+#uninstalling-spinner {
     @include spinner-common;
     border-right-color: $mycroft-white;
     border-top-color: $mycroft-white;
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
index 580b1fa..1403341 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
@@ -1,6 +1,7 @@
-@import '../../../../stylesheets/global';
+@import 'mycroft-colors';
+@import "components/text";
 
-.skill-detail-body {
+#skill-detail-body {
     background-color: $mycroft-white;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
@@ -9,26 +10,31 @@
     padding-left: 4vw;
     padding-right: 4vw;
     padding-top: 3vh;
+
     .mat-subheading-1 {
         color: $mycroft-dark-grey;
         font-variant: small-caps;
         font-weight: 500;
         margin-bottom: 5px;
     }
+
     .mat-body-1 {
         color: $mycroft-secondary;
     }
-    .kde-icon {
+
+    #kde-icon {
         height: 40px;
         width: 40px;
     }
-    .skill-detail-section {
+
+    #skill-detail-section {
         margin-bottom: 30px;
     }
-    .skill-detail-body-left {
+
+    #skill-detail-body-left {
         min-width: 340px;
         margin-right: 50px;
-        .skill-trigger {
+        #skill-trigger {
             @include skill-trigger;
             @include ellipsis-overflow;
             margin-right: 10px;
@@ -36,7 +42,8 @@
             max-width: 340px;
         }
     }
-    .skill-detail-body-right {
+
+    #skill-detail-body-right {
         margin-right: 20px;
         white-space: nowrap;
         img {
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
index 1288fe0..a81d3a8 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
+++ b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
@@ -1,8 +1,8 @@
     <!-- Header block -->
-    <div class="skill-detail-header" fxLayout="row wrap">
+    <div id="skill-detail-header" fxLayout="row wrap">
 
         <!-- Left Side -->
-        <div class="skill-detail-header-left" fxFlex>
+        <div id="skill-detail-header-left" fxFlex>
             <!-- there cannot be an icon and an icon_image.  show the
                  image if it exists otherwise show the icon -->
             <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
@@ -19,13 +19,13 @@
         </div>
 
         <!-- Right Side -->
-        <div class="skill-detail-header-right" fxFlex="20">
+        <div id="skill-detail-header-right" fxFlex="20">
             <market-skill-install-button [skill]="skill" [component]="'skillDetail'">
             </market-skill-install-button>
             <div>
                 <button
                     mat-icon-button
-                    class="github-button"
+                    id="github-button"
                     (click)="navigateToGithubRepo(skill.repositoryUrl)"
                 >
                     <fa-icon [icon]="githubIcon"></fa-icon>
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
index f8d7e91..527f5e4 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
@@ -1,6 +1,7 @@
-@import '../../../../stylesheets/global';
+@import 'mycroft-colors';
+@import "components/buttons";
 
-.skill-detail-header {
+#skill-detail-header {
     background-color: #f7f9fa;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
@@ -8,7 +9,7 @@
     padding-left: 4vw;
     padding-right: 4vw;
     padding-top: 4vh;
-    .skill-detail-header-left {
+    #skill-detail-header-left {
         color: $mycroft-secondary;
         margin-right: 50px;
         min-width: 340px;
@@ -25,18 +26,20 @@
             margin-top: 0;
         }
     }
-    .skill-detail-header-right {
+
+    #skill-detail-header-right {
         margin-right: 20px;
-        .install-button {
+
+        #install-button {
             @include action-button;
             width: 140px;
-        }
-        .install-button:hover {
-            background-color: $mycroft-tertiary-green;
-            color: $mycroft-secondary;
+            &:hover {
+                background-color: $mycroft-tertiary-green;
+                color: $mycroft-secondary;
+            }
         }
 
-        .github-button {
+        #github-button {
             color: $mycroft-dark-grey;
             font-weight: normal;
             width: 135px;
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail.component.html b/projects/market/src/app/skills/skill-detail/skill-detail.component.html
index 4d25d7a..038ebbf 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail.component.html
+++ b/projects/market/src/app/skills/skill-detail/skill-detail.component.html
@@ -1,10 +1,10 @@
-<div class="navigate-back">
+<div id="navigate-back">
     <button mat-icon-button [routerLink]="['/skills']">
         <fa-icon [icon]="backArrow"></fa-icon>
         Back to Skill Listing
     </button>
 </div>
-<div class="skill-detail" *ngIf="skill$ | async as skill">
+<div id="skill-detail" *ngIf="skill$ | async as skill">
     <market-skill-detail-header [skill]="skill"></market-skill-detail-header>
     <market-skill-detail-body [skill]="skill"></market-skill-detail-body>
 </div>
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
index fc14cc7..a368c6f 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
@@ -1,18 +1,18 @@
-@import '../../../stylesheets/global';
+@import 'mycroft-colors';
 
 @mixin skill-detail-size {
     margin: 0 auto;
     max-width: 1000px;
 }
 
-.navigate-back {
+#navigate-back {
     @include skill-detail-size;
     color: $mycroft-dark-grey;
     padding-bottom: 10px;
 }
 
-.skill-detail {
+#skill-detail {
     @include skill-detail-size;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     border-radius: 10px;
-}
\ No newline at end of file
+}
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.html b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
index 9946b36..a1090e6 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
@@ -1,9 +1,9 @@
-<div fxLayout="row" fxLayoutAlign="space-between start" class="card-header">
+<div fxLayout="row" fxLayoutAlign="space-between start" id="card-header">
 
     <!-- Show a Mycroft icon in the upper left corner of the skill card
     if the skill is written by the Mycroft staff.
     -->
-    <div class="mycroft-icon">
+    <div id="mycroft-icon">
         <img
             src="../../../../assets/mycroft-logo.svg"
             *ngIf="skill.isMycroftMade"
@@ -12,7 +12,7 @@
     </div>
 
     <!-- Show the icon corresponding to the skill on the card -->
-    <div class="skill-icon">
+    <div id="skill-icon">
         <fa
             *ngIf="!skill.iconImage"
             [ngStyle]="{'color': skill.icon.color}"
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Show a check mark icon in the upper right corner when skill is installed -->
-    <div class="installed-icon">
+    <div id="installed-icon">
         <fa-icon
             *ngIf="isInstalled"
             [icon]="installedIcon"
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
index 7821ab4..1ec47c3 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
@@ -1,17 +1,20 @@
-@import '../../../../stylesheets/global.scss';
+@import 'mycroft-colors';
 
-.card-header {
+#card-header {
     margin-bottom: 16px;
 }
-.mycroft-icon {
+
+#mycroft-icon {
     width: 20px;
     img {
         height: 20px;
         width: 20px;
     }
 }
-.installed-icon {
+
+#installed-icon {
     width: 20px;
+
     fa-icon {
         color: $mycroft-tertiary-green;
         font-size: 20px;
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.html b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.html
index 97101bf..6760396 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.html
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.html
@@ -7,7 +7,7 @@
             {{skill.title ? skill.title : '&nbsp;'}}
         </mat-card-title>
         <mat-card-subtitle fxLayoutAlign="center">
-            <div class="skill-trigger">
+            <div id="skill-trigger">
                 <fa-icon [icon]="voiceIcon"></fa-icon>
                 {{skill.trigger}}
             </div>
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
index fc14479..bf5d5e3 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
@@ -1,4 +1,5 @@
-@import '../../../../stylesheets/global.scss';
+@import 'mycroft-colors';
+@import "components/text";
 
 @mixin card-width {
     width: 320px;
@@ -6,10 +7,16 @@
 
 mat-card {
     @include card-width;
+
+    &:hover {
+      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+    }
+
     border-radius: 10px;
     cursor: pointer;
     margin: 10px;
     padding: 18px;
+
     mat-card-title {
         @include ellipsis-overflow;
         color: $mycroft-secondary;
@@ -18,27 +25,26 @@ mat-card {
         margin-bottom: 16px;
         text-align: center;
     }
+
     mat-card-subtitle {
-        .skill-trigger {
+        #skill-trigger {
             @include ellipsis-overflow;
             @include skill-trigger;
         }
     }
+
     mat-card-content {
         color: $mycroft-secondary;
         @include ellipsis-overflow;
         text-align: center;
     }
+
     mat-card-actions {
         margin-left: 0;
         margin-bottom: 0;
     }
 }
 
-mat-card:hover{
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
-}
-
 .login-snackbar {
     text-align: center;
 }
diff --git a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.html b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.html
index 154f1e8..a82740d 100644
--- a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.html
+++ b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.html
@@ -1,6 +1,6 @@
 <!-- Search bar at top of skill listing page -->
-<div fxLayout="row" fxLayoutAlign="center" class="skill-toolbar">
-    <div fxFlex="60" (keydown.enter)="searchSkills()" class="search-field">
+<div fxLayout="row" fxLayoutAlign="center" id="skill-toolbar">
+    <div fxFlex="60" (keydown.enter)="searchSkills()" id="search-field">
         <mat-form-field>
             <input matInput placeholder="Search Skills" type="text" [(ngModel)]="searchTerm">
             <button mat-icon-button matSuffix="">
@@ -12,7 +12,7 @@
 
 <!-- Back to all skills button shown when skill listing is filtered -->
 <div *ngIf="showBackButton">
-    <button mat-icon-button class="back-button" (click)="clearSearch()">
+    <button mat-icon-button id="back-button" (click)="clearSearch()">
         <fa-icon [icon]="backArrow"></fa-icon>
         All Skills
     </button>
diff --git a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
index 99d20ae..34dbca8 100644
--- a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
@@ -1,12 +1,13 @@
-@import '../../../../stylesheets/global';
+@import 'mycroft-colors';
 
 fa-icon {
     color: $mycroft-dark-grey;
 }
 
-.skill-toolbar {
+#skill-toolbar {
     margin-left: 15px;
-    .search-field {
+
+    #search-field {
         background-color: white;
         border-radius: 10px;
         color: $mycroft-dark-grey;
@@ -14,8 +15,15 @@ fa-icon {
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 10px;
+
         mat-form-field {
             width: 100%;
         }
     }
 }
+
+#back-button {
+    color: $mycroft-dark-grey;
+    margin-left: 20px;
+    width: 100px;
+}
diff --git a/projects/market/src/app/skills/skill-summary/skill-summary.component.html b/projects/market/src/app/skills/skill-summary/skill-summary.component.html
index 6472b6b..ca955bf 100644
--- a/projects/market/src/app/skills/skill-summary/skill-summary.component.html
+++ b/projects/market/src/app/skills/skill-summary/skill-summary.component.html
@@ -1,5 +1,5 @@
 <market-skill-search (searchResults)="showSearchResults($event)"></market-skill-search>
-<div class="skill-category" *ngFor="let category of skillCategories">
+<div id="skill-category" *ngFor="let category of skillCategories">
     <mat-toolbar align="center">{{category}}</mat-toolbar>
     <div fxLayout="row wrap">
         <ng-container *ngFor="let skill of filterSkillsByCategory(category)">
diff --git a/projects/market/src/app/skills/skill-summary/skill-summary.component.scss b/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
index 7ad775c..72dbdbc 100644
--- a/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
@@ -1,22 +1,17 @@
-@import '../../../stylesheets/global';
+@import 'mycroft-colors';
 
-.skill-category {
+#skill-category {
     background-color: $market-background;
+
     mat-toolbar {
         background-color: $market-background;
         color: $mycroft-dark-grey;
         font-size: xx-large;
         margin-top: 20px;
         padding-left: 10px;
+
         fa-icon {
             margin-right: 15px;
         }
     }
 }
-
-.back-button {
-    color: $mycroft-dark-grey;
-    margin-left: 20px;
-    width: 100px;
-}
-
diff --git a/projects/market/src/stylesheets/global.scss b/projects/market/src/stylesheets/global.scss
deleted file mode 100644
index 1c0e701..0000000
--- a/projects/market/src/stylesheets/global.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "base/mycroft-colors";
-@import "components/buttons";
-@import "components/text";
\ No newline at end of file
diff --git a/projects/sso/src/app/app.component.scss b/projects/sso/src/app/app.component.scss
index 2718fdd..59dfa7b 100644
--- a/projects/sso/src/app/app.component.scss
+++ b/projects/sso/src/app/app.component.scss
@@ -1,4 +1,4 @@
-@import "../stylesheets/global";
+@import "mycroft-colors";
 
 /* Split the screen in half */
 .split {
@@ -40,4 +40,4 @@ img {
     margin-bottom: 50px;
     margin-top: 50px;
     width: 600px;
-}
\ No newline at end of file
+}
diff --git a/projects/sso/src/app/background/background.component.html b/projects/sso/src/app/background/background.component.html
index 304e0ba..f24596c 100644
--- a/projects/sso/src/app/background/background.component.html
+++ b/projects/sso/src/app/background/background.component.html
@@ -1,5 +1,5 @@
-<div class="split top"></div>
-<div class="split bottom"></div>
+<div id="top-half"></div>
+<div id="bottom-half"></div>
 <div fxLayout="column" fxLayoutAlign="center center">
     <div align="center">
         <img src="../../assets/mycroft-ai-no-logo.svg"/>
diff --git a/projects/sso/src/app/background/background.component.scss b/projects/sso/src/app/background/background.component.scss
index 572dc6f..3e912e3 100644
--- a/projects/sso/src/app/background/background.component.scss
+++ b/projects/sso/src/app/background/background.component.scss
@@ -1,7 +1,7 @@
-@import "../../stylesheets/global";
+@import "mycroft-colors";
 
 /* Split the screen in half */
-.split {
+@mixin half-screen {
     height: 50%;
     left: 0;
     overflow-x: hidden;
@@ -12,13 +12,15 @@
 }
 
 /* Top Half */
-.top {
+#top-half {
+    @include half-screen;
     top: 0;
     background-color: $mycroft-primary;
 }
 
 /* Bottom Half */
-.bottom {
+#bottom-half {
+    @include half-screen;
     bottom: 0;
     background-color: #e5e5e5;
 }
diff --git a/projects/sso/src/app/login/antisocial/antisocial.component.html b/projects/sso/src/app/login/antisocial/antisocial.component.html
index 0ed4c1c..e270dee 100644
--- a/projects/sso/src/app/login/antisocial/antisocial.component.html
+++ b/projects/sso/src/app/login/antisocial/antisocial.component.html
@@ -28,6 +28,6 @@
         >
         <mat-hint>Forgot password?</mat-hint>
     </mat-form-field>
-    <button mat-button type="submit" class="login-button">LOG IN</button>
+    <button mat-button type="submit">LOG IN</button>
 </form>
 <div class="mat-body-2" *ngIf="authFailed">Invalid username/password combination; try again</div>
diff --git a/projects/sso/src/app/login/antisocial/antisocial.component.scss b/projects/sso/src/app/login/antisocial/antisocial.component.scss
index e67a060..ba12041 100644
--- a/projects/sso/src/app/login/antisocial/antisocial.component.scss
+++ b/projects/sso/src/app/login/antisocial/antisocial.component.scss
@@ -1,36 +1,37 @@
-@import '../../../stylesheets/global';
-
-button {
-    @include login-button;
-}
+@import 'mycroft-colors';
+@import "components/buttons";
 
 form {
     background-color: $mycroft-white;
     border-radius: 10px;
     padding: 20px;
+
     fa-icon {
         color: $mycroft-dark-grey;
         margin-right: 15px;
     }
+
     mat-checkbox {
         color: $mycroft-dark-grey;
     }
-    .forgot-password {
+    #forgot-password {
         margin-left: 30px;
     }
+
     button {
-        background-color: $mycroft-primary;
+        @include action-button;
         margin-top: 30px;
         text-align: center;
-    }
-    button:hover {
-        background-color: $mycroft-tertiary-green;
-        color: $mycroft-secondary;
+
+        &:hover {
+            background-color: $mycroft-tertiary-green;
+            color: $mycroft-secondary;
+        }
     }
 
 }
 
 .mat-body-2 {
-    color: $mycroft-tertiary-red;
+    color: red;
     padding: 15px;
 }
diff --git a/projects/sso/src/app/login/login.component.html b/projects/sso/src/app/login/login.component.html
index de496af..cddcef2 100644
--- a/projects/sso/src/app/login/login.component.html
+++ b/projects/sso/src/app/login/login.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="center center">
-    <div class="login-options">
+    <div id="login-options">
         <sso-social-login></sso-social-login>
         <div class="mat-subheading-2">OR</div>
         <sso-antisocial-login></sso-antisocial-login>
diff --git a/projects/sso/src/app/login/login.component.scss b/projects/sso/src/app/login/login.component.scss
index a0e0bd9..e721181 100644
--- a/projects/sso/src/app/login/login.component.scss
+++ b/projects/sso/src/app/login/login.component.scss
@@ -1,6 +1,6 @@
-@import '../../stylesheets/global';
+@import 'mycroft-colors';
 
-.login-options {
+#login-options {
     background-color: $mycroft-white;
     border-radius: 10px;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/projects/sso/src/app/login/social/social.component.html b/projects/sso/src/app/login/social/social.component.html
index 2f9182b..25d0557 100644
--- a/projects/sso/src/app/login/social/social.component.html
+++ b/projects/sso/src/app/login/social/social.component.html
@@ -1,13 +1,13 @@
-<div class="social" fxLayout="column" fxLayoutAlign="center center">
-    <button mat-button class="google-button"  (click)="authenticateGoogle()">
+<div id="social" fxLayout="column" fxLayoutAlign="center center">
+    <button mat-button id="google-button"  (click)="authenticateGoogle()">
         <img src="../../../assets/google-logo.svg">
         Log in with Google
     </button>
-    <button mat-button class="facebook-button" (click)="authenticateFacebook()">
+    <button mat-button id="facebook-button" (click)="authenticateFacebook()">
         <fa-icon [icon]="facebookIcon"></fa-icon>
         Continue with Facebook
     </button>
-    <button mat-button class="github-button" (click)="authenticateGithub()">
+    <button mat-button id="github-button" (click)="authenticateGithub()">
         <fa-icon [icon]="githubIcon"></fa-icon>
         Log in with GitHub
     </button>
diff --git a/projects/sso/src/app/login/social/social.component.scss b/projects/sso/src/app/login/social/social.component.scss
index 488fcdf..f3d0aa1 100644
--- a/projects/sso/src/app/login/social/social.component.scss
+++ b/projects/sso/src/app/login/social/social.component.scss
@@ -1,10 +1,14 @@
-@import '../../../stylesheets/global';
+@import 'mycroft-colors';
 
-button {
-    @include login-button;
+@mixin login-button {
+    border-radius: 4px;
+    color: $mycroft-white;
+    font-weight: normal;
+    text-align: left;
+    width: 280px;
 }
 
-.social {
+#social {
     padding: 20px;
     button {
         margin-bottom: 15px;
@@ -13,15 +17,18 @@ button {
         margin-right: 15px;
         font-size: 28px;
     }
-    .facebook-button {
+    #facebook-button {
+        @include login-button;
         background-color: #3b5998;
         padding-left: 5px;
     }
-    .github-button {
+    #github-button {
+        @include login-button;
         background-color: #333333;
         padding-left: 5px;
     }
-    .google-button {
+    #google-button {
+        @include login-button;
         background-color: #4285F4;
         padding-left: 1px;
         img {
diff --git a/projects/sso/src/app/logout/logout.component.html b/projects/sso/src/app/logout/logout.component.html
index 0e61cc9..b03954b 100644
--- a/projects/sso/src/app/logout/logout.component.html
+++ b/projects/sso/src/app/logout/logout.component.html
@@ -1,4 +1,4 @@
 <div class="mat-h3">
-    <div class="logout-spinner"></div>
+    <div id="logout-spinner"></div>
     LOGGING OUT
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/sso/src/app/logout/logout.component.scss b/projects/sso/src/app/logout/logout.component.scss
index 9382cfb..3d25be9 100644
--- a/projects/sso/src/app/logout/logout.component.scss
+++ b/projects/sso/src/app/logout/logout.component.scss
@@ -1,4 +1,4 @@
-@import "../../stylesheets/global";
+@import "mycroft-colors";
 
 // The angular material spinner was limiting in color choices we built our own
 @mixin spinner-common {
@@ -21,8 +21,8 @@
     text-align: center;
 }
 
-.logout-spinner {
+#logout-spinner {
     @include spinner-common;
     border-right-color: $mycroft-secondary;
     border-top-color: $mycroft-secondary;
-}
\ No newline at end of file
+}
diff --git a/projects/sso/src/stylesheets/base/_mycroft-colors.scss b/projects/sso/src/stylesheets/base/_mycroft-colors.scss
deleted file mode 100644
index 8b30400..0000000
--- a/projects/sso/src/stylesheets/base/_mycroft-colors.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// These are the official Mycroft colors as defined by the design team.
-$mycroft-primary: #22a7f0;
-$mycroft-secondary: #2c3e50;
-$mycroft-tertiary-blue: #81cfe0;
-$mycroft-tertiary-green: #36d7b7;
-$mycroft-tertiary-yellow: #c8f7c5;
-$mycroft-tertiary-red: #ec644b;
-$mycroft-tertiary-orange: #e9d460;
-$mycroft-white: #ffffff;
-$mycroft-black: #000000;
-$mycroft-dark-grey: #6c7a89;
-$mycroft-light-grey: #bdc3c7;
-$mycroft-blue-grey: #e4f1fe;
-$market-background: #e5e5e5;
diff --git a/projects/sso/src/stylesheets/components/_buttons.scss b/projects/sso/src/stylesheets/components/_buttons.scss
deleted file mode 100644
index 2d080ec..0000000
--- a/projects/sso/src/stylesheets/components/_buttons.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../base/mycroft-colors";
-
-@mixin login-button {
-    border-radius: 4px;
-    color: $mycroft-white;
-    font-weight: normal;
-    text-align: left;
-    width: 280px;
-}
diff --git a/projects/sso/src/stylesheets/global.scss b/projects/sso/src/stylesheets/global.scss
deleted file mode 100644
index 53465cc..0000000
--- a/projects/sso/src/stylesheets/global.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'base/mycroft-colors';
-@import "components/buttons";
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..e10fbd8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,92 @@
+
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/theming';
+
+// Be sure that you only ever include 'mat-core' mixin once!
+// it should not be included for each theme.
+@include mat-core();
+
+// Mycroft palette defined using http://mcg.mbitson.com
+$mycroft-color-primary: (
+    50 : #e4f4fd,
+    100 : #bde5fb,
+    200 : #91d3f8,
+    300 : #64c1f5,
+    400 : #43b4f2,
+    500 : #22a7f0,
+    600 : #1e9fee,
+    700 : #1996ec,
+    800 : #148ce9,
+    900 : #0c7ce5,
+    A100 : #ffffff,
+    A200 : #dcedff,
+    A400 : #a9d2ff,
+    A700 : #90c5ff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$mycroft-color-secondary: (
+    50 : #e6e8ea,
+    100 : #c0c5cb,
+    200 : #969fa8,
+    300 : #6b7885,
+    400 : #4c5b6a,
+    500 : #2c3e50,
+    600 : #273849,
+    700 : #213040,
+    800 : #1b2837,
+    900 : #101b27,
+    A100 : #68abff,
+    A200 : #358fff,
+    A400 : #0272ff,
+    A700 : #0067e7,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+
+// mandatory stuff for theming
+$mycroft-palette-primary: mat-palette($mycroft-color-primary);
+$mycroft-palette-accent:  mat-palette($mycroft-color-secondary);
+
+// include the custom theme components into a theme object
+$mycroft-theme: mat-light-theme($mycroft-palette-primary, $mycroft-palette-accent);
+
+// include the custom theme object into the angular material theme
+@include angular-material-theme($mycroft-theme);
+
+.mycroft-snackbar {
+    width: 500px;
+}
+.mycroft-snackbar .mat-simple-snackbar-action {
+    color: #22a7f0
+}
diff --git a/projects/market/src/stylesheets/base/_mycroft-colors.scss b/src/stylesheets/_mycroft-colors.scss
similarity index 100%
rename from projects/market/src/stylesheets/base/_mycroft-colors.scss
rename to src/stylesheets/_mycroft-colors.scss
diff --git a/projects/market/src/stylesheets/components/_buttons.scss b/src/stylesheets/components/_buttons.scss
similarity index 78%
rename from projects/market/src/stylesheets/components/_buttons.scss
rename to src/stylesheets/components/_buttons.scss
index 3de55e0..cd4f255 100644
--- a/projects/market/src/stylesheets/components/_buttons.scss
+++ b/src/stylesheets/components/_buttons.scss
@@ -1,9 +1,10 @@
-@import "../base/mycroft-colors";
+@import "mycroft-colors";
 $button-border-radius: 4px;
 
 @mixin action-button {
     border-radius: $button-border-radius;
     background-color: $mycroft-primary;
     color: $mycroft-white;
+    font-weight: normal;
     letter-spacing: 0.5px;
 }
diff --git a/projects/market/src/stylesheets/components/_text.scss b/src/stylesheets/components/_text.scss
similarity index 92%
rename from projects/market/src/stylesheets/components/_text.scss
rename to src/stylesheets/components/_text.scss
index 404727b..6c19ef4 100644
--- a/projects/market/src/stylesheets/components/_text.scss
+++ b/src/stylesheets/components/_text.scss
@@ -1,4 +1,4 @@
-@import "../base/mycroft-colors";
+@import "../mycroft-colors";
 
 @mixin ellipsis-overflow {
     overflow: hidden;