diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html
index ffb16a6..e271d4e 100644
--- a/frontend/src/app/components/students/student-register/student-register.component.html
+++ b/frontend/src/app/components/students/student-register/student-register.component.html
@@ -28,8 +28,7 @@
       <button
         mat-button
         matStepperNext
-        [disabled]="zeroFormGroup.status == 'INVALID'"
-        (click)="onClick()">
+        [disabled]="zeroFormGroup.status == 'INVALID'">
         Next
       </button>
     </div>
diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss
index 773b918..4d84e8a 100644
--- a/frontend/src/app/components/students/student-register/student-register.component.scss
+++ b/frontend/src/app/components/students/student-register/student-register.component.scss
@@ -15,9 +15,9 @@ button {
   color: white;
 }
 
-button {
-  background-color: #0366d6;
-}
+//button {
+//  background-color: #0366d6;
+//}
 
 ::selection {
   color: white;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 52a4aad..1a2401a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,19 +1,49 @@
 /* Provide sufficient contrast against white background */
 
+@use "@angular/material" as mat;
 @import '~bootstrap-icons/font/bootstrap-icons.css';
+@include mat.core();
 
-a {
-  color: #0366d6;
-}
+$my-primary: mat.define-palette(mat.$blue-palette);
+$my-accent: mat.define-palette(mat.$gray-palette);
 
-code {
-  color: #e01a76;
-}
 
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
+$my-theme: mat.define-light-theme((
+  color: (
+    primary: $my-primary,
+    accent: $my-accent,
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+// Emit theme-dependent styles for common features used across multiple components.
+@include mat.core-theme($my-theme);
+
+// Emit styles for MatButton based on `$my-theme`. Because the configuration
+// passed to `define-light-theme` omits typography, `button-theme` will not
+// emit any typography styles.
+@include mat.all-component-colors($my-theme);
+@include mat.button-color($my-theme);
+// Include the theme mixins for other components you use here.
+//a {
+//  color: #0366d6;
+//}
+//
+//code {
+//  color: #e01a76;
+//}
+//
+//.btn-primary {
+//  color: #fff;
+//  background-color: #1b6ec2;
+//  border-color: #1861ac;
+//}
+
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  background-color: rgb(245, 126, 32);
 }
 
 html,
@@ -21,30 +51,25 @@ body {
   height: 100%;
 }
 
-body {
-  background-color: rgb(245, 126, 32);
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
 
-.mat-form-field-subscript-wrapper {
-  font-size: 95%;
-}
-
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
-  background-color: #0366d6 !important;
-}
-mat-checkbox-checked {
-  border-color: white;
-}
-mat-checkbox {
-  color: white;
-  margin-bottom: 16px;
-}
-.mat-step-header .mat-step-icon-selected,
-.mat-step-icon-state-edit {
-  background-color: #0366d6 !important;
-}
+//.mat-form-field-subscript-wrapper {
+//  font-size: 95%;
+//}
+//
+//.mat-checkbox-checked.mat-accent .mat-checkbox-background {
+//  background-color: #0366d6 !important;
+//}
+//mat-checkbox-checked {
+//  border-color: white;
+//}
+//mat-checkbox {
+//  color: white;
+//  margin-bottom: 16px;
+//}
+//.mat-step-header .mat-step-icon-selected,
+//.mat-step-icon-state-edit {
+//  background-color: #0366d6 !important;
+//}
 
 // customize datepicker
 //.mat-datepicker-content-container {
@@ -98,11 +123,3 @@ mat-checkbox {
 //    background-color: #1b6ec2;
 //    border-color: #1861ac;
 //}
-html,
-body {
-  height: 100%;
-}
-body {
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}