diff --git a/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.html b/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.html
index fdc5913..bc1f85c 100644
--- a/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.html
+++ b/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.html
@@ -6,12 +6,14 @@
         <mat-card class="mat-elevation-z0">
             <h2 class="mat-h2">Log In With...</h2>
             <p class="mat-body">{{federatedLoginText}}</p>
-            <sso-google-button (googleToken)="onFederatedLogin($event)"></sso-google-button>
-            <sso-facebook-button (facebookToken)="onFederatedLogin($event)"></sso-facebook-button>
-            <sso-github-button [newAccount]="true"></sso-github-button>
-            <p [hidden]="!federatedErrorMessage" id="federated-error" class="mat-body">
-                {{federatedErrorMessage}}
-            </p>
+            <div id="federated-buttons">
+                <sso-google-button (googleToken)="onFederatedLogin($event)"></sso-google-button>
+                <sso-facebook-button (facebookToken)="onFederatedLogin($event)"></sso-facebook-button>
+                <sso-github-button [newAccount]="true"></sso-github-button>
+                <p [hidden]="!federatedErrorMessage" id="federated-error" class="mat-body">
+                    {{federatedErrorMessage}}
+                </p>
+            </div>
         </mat-card>
 
         <h1 class="mat-h1">OR</h1>
diff --git a/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.scss b/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.scss
index 272a926..cad5176 100644
--- a/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.scss
+++ b/projects/sso/src/app/modules/new-account/authentication-step/authentication-step.component.scss
@@ -1,5 +1,5 @@
-@import "@angular/material/theming";
-@import "src/stylesheets/mycroft-theme";
+@use "@angular/material" as mat;
+@use "mycroft-theme" as theme;
 
 mat-card {
     margin-left: auto;
@@ -7,7 +7,7 @@ mat-card {
     max-width: 800px;
 
     mat-card-title {
-        color: mat-color($mycroft-primary);
+        color: mat.get-color-from-palette(theme.$mycroft-primary, 500);
     }
 
     mat-card {
@@ -15,16 +15,16 @@ mat-card {
         max-width: 400px;
 
         .mat-h2 {
-            color: mat-color($mycroft-accent, A700);
+            color: mat.get-color-from-palette(theme.$mycroft-accent, A700);
             font-size: 20px;
         }
         #federated-error {
-            color: mat-color($mycroft-warn)
+            color: mat.get-color-from-palette(theme.$mycroft-warn, 500);
         }
     }
 
     .mat-h1 {
-        color: mat-color($mycroft-primary);
+        color: mat.get-color-from-palette(theme.$mycroft-primary, 500);
         padding: 32px;
     }
 }