diff --git a/projects/sso/src/app/app.component.scss b/projects/sso/src/app/app.component.scss
index 59dfa7b..863e03a 100644
--- a/projects/sso/src/app/app.component.scss
+++ b/projects/sso/src/app/app.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import "mycroft-colors";
 
 /* Split the screen in half */
@@ -14,7 +15,7 @@
 /* Top Half */
 .top {
     top: 0;
-    background-color: $mycroft-primary;
+    background-color: mat-color($mycroft-primary);
 }
 
 /* Bottom Half */
@@ -30,7 +31,7 @@ mat-tab-group {
 }
 
 .login-options {
-    background-color: $mycroft-white;
+    background-color: mat-contrast($mycroft-primary, 500);
     border-radius: 10px;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     width: 320px;
diff --git a/projects/sso/src/app/background/background.component.scss b/projects/sso/src/app/background/background.component.scss
index 3e912e3..f70dd0d 100644
--- a/projects/sso/src/app/background/background.component.scss
+++ b/projects/sso/src/app/background/background.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import "mycroft-colors";
 
 /* Split the screen in half */
@@ -15,7 +16,7 @@
 #top-half {
     @include half-screen;
     top: 0;
-    background-color: $mycroft-primary;
+    background-color: mat-color($mycroft-primary);
 }
 
 /* Bottom Half */
diff --git a/projects/sso/src/app/login/antisocial/antisocial.component.scss b/projects/sso/src/app/login/antisocial/antisocial.component.scss
index ba12041..e871e11 100644
--- a/projects/sso/src/app/login/antisocial/antisocial.component.scss
+++ b/projects/sso/src/app/login/antisocial/antisocial.component.scss
@@ -1,32 +1,27 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 @import "components/buttons";
 
 form {
-    background-color: $mycroft-white;
     border-radius: 10px;
     padding: 20px;
 
     fa-icon {
-        color: $mycroft-dark-grey;
+        color: mat-color($mycroft-accent, A700);
         margin-right: 15px;
     }
 
     mat-checkbox {
-        color: $mycroft-dark-grey;
+        color: mat-color($mycroft-accent, A700);
     }
     #forgot-password {
         margin-left: 30px;
     }
 
     button {
-        @include action-button;
+        @include action-button-primary;
         margin-top: 30px;
         text-align: center;
-
-        &:hover {
-            background-color: $mycroft-tertiary-green;
-            color: $mycroft-secondary;
-        }
     }
 
 }
diff --git a/projects/sso/src/app/login/login.component.scss b/projects/sso/src/app/login/login.component.scss
index e721181..d9bece0 100644
--- a/projects/sso/src/app/login/login.component.scss
+++ b/projects/sso/src/app/login/login.component.scss
@@ -1,14 +1,15 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 #login-options {
-    background-color: $mycroft-white;
+    background-color: mat-contrast($mycroft-primary, 500);
     border-radius: 10px;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     width: 320px;
 }
 
 .mat-subheading-2 {
-    color: $mycroft-dark-grey;
+    color: mat-color($mycroft-accent, A700);
     margin-bottom: -15px;
     margin-top: -15px;
     text-align: center;
diff --git a/projects/sso/src/app/login/social/social.component.scss b/projects/sso/src/app/login/social/social.component.scss
index f3d0aa1..7314e98 100644
--- a/projects/sso/src/app/login/social/social.component.scss
+++ b/projects/sso/src/app/login/social/social.component.scss
@@ -1,8 +1,9 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 @mixin login-button {
     border-radius: 4px;
-    color: $mycroft-white;
+    color: mat-contrast($mycroft-primary, 500);
     font-weight: normal;
     text-align: left;
     width: 280px;
diff --git a/projects/sso/src/app/logout/logout.component.scss b/projects/sso/src/app/logout/logout.component.scss
index 3d25be9..d17f817 100644
--- a/projects/sso/src/app/logout/logout.component.scss
+++ b/projects/sso/src/app/logout/logout.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import "mycroft-colors";
 
 // The angular material spinner was limiting in color choices we built our own
@@ -15,7 +16,7 @@
 }
 
 .mat-h3 {
-    color: $mycroft-secondary;
+    color: mat-color($mycroft-accent);
     font-size: 40px;
     margin-top: 50px;
     text-align: center;
@@ -23,6 +24,6 @@
 
 #logout-spinner {
     @include spinner-common;
-    border-right-color: $mycroft-secondary;
-    border-top-color: $mycroft-secondary;
+    border-right-color: mat-color($mycroft-accent);
+    border-top-color: mat-color($mycroft-accent);
 }