diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index b854298..c24fa50 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -26,6 +26,7 @@ import {MatInputModule} from "@angular/material/input";
 import {MatButtonModule} from "@angular/material/button";
 import {MatRadioModule} from "@angular/material/radio";
 import {MatSelectModule} from "@angular/material/select";
+import {MatIconModule} from "@angular/material/icon";
 
 @NgModule({
   declarations: [
@@ -59,7 +60,7 @@ import {MatSelectModule} from "@angular/material/select";
     MatInputModule,
     MatButtonModule,
     MatRadioModule,
-    MatSelectModule
+    MatSelectModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
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 2b7ea5d..f106320 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
@@ -3,6 +3,7 @@
 <!--</button>-->
 
 <mat-stepper linear #stepper>
+  <!--  Step 1-->
   <mat-step [stepControl]="firstFormGroup" class="firstStep">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Personal Information</ng-template>
@@ -11,54 +12,70 @@
 
           <mat-form-field appearance="fill">
             <mat-label>Name</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="firstName" placeholder="First name" required>
           </mat-form-field>
 
           <mat-form-field appearance="fill">
             <mat-label>Surname</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="lastName" placeholder="Last name" required>
           </mat-form-field>
 
+
           <mat-form-field appearance="fill">
             <mat-label>Birthdate</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput [matDatepicker]="birthdatePicker" formControlName="birthdate" required>
+            <mat-hint>MM/DD/YYYY</mat-hint>
+            <mat-datepicker-toggle matSuffix [for]="birthdatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #birthdatePicker startView="multi-year"></mat-datepicker>
           </mat-form-field>
 
+
           <mat-form-field>
             <mat-label>Gender</mat-label>
             <mat-select>
-              <mat-option>Male</mat-option>
-              <mat-option value="valid">Female</mat-option>
-              <mat-option value="invalid">Divers</mat-option>
+              <mat-option value="male">Male</mat-option>
+              <mat-option value="female">Female</mat-option>
+              <mat-option value="divers">Divers</mat-option>
             </mat-select>
           </mat-form-field>
 
         </div>
         <div class="rightContainer">
+
           <mat-form-field appearance="fill">
             <mat-label>Address</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="address" required>
           </mat-form-field>
+
           <mat-form-field appearance="fill">
             <mat-label>Postal Code</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="postalCode" required>
           </mat-form-field>
+
           <mat-form-field appearance="fill">
             <mat-label>Phone</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="phone" required>
           </mat-form-field>
+
           <mat-form-field appearance="fill">
             <mat-label>E-Mail</mat-label>
-            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            <input matInput formControlName="email" required>
+            <mat-error>Invalid E-Mail Address</mat-error>
           </mat-form-field>
         </div>
       </div>
 
       <div>
-        <button mat-button matStepperNext>Next</button>
+        <button (click)="onClick()">test</button>
+      </div>
+
+      <div>
+        <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>
       </div>
     </form>
   </mat-step>
+
+  <!--  Step 2-->
   <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>
@@ -67,12 +84,17 @@
         <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
                required>
       </mat-form-field>
+      <div>
+        <button (click)="onClick()">test2</button>
+      </div>
       <div>
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button matStepperNext>Next</button>
       </div>
     </form>
   </mat-step>
+
+  <!--  Step 3-->
   <mat-step>
     <ng-template matStepLabel>Done</ng-template>
     <p>You are now done.</p>
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 108e669..ab91878 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
@@ -41,3 +41,4 @@ button {
   flex-direction: column;
   width: 45%;
 }
+
diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts
index 0535a98..f09c2f6 100644
--- a/frontend/src/app/components/students/student-register/student-register.component.ts
+++ b/frontend/src/app/components/students/student-register/student-register.component.ts
@@ -16,10 +16,20 @@ export class StudentRegisterComponent implements OnInit {
 
   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
-      firstCtrl: ['', Validators.required],
+      firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
+      lastName: ['', Validators.required],
+      birthdate: ['', Validators.required],
+      postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
+      address: ['', Validators.required],
+      phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
+      email: ['', [Validators.required, Validators.email]],
     });
     this.secondFormGroup = this._formBuilder.group({
       secondCtrl: ['', Validators.required],
     });
   }
+
+  onClick() {
+    console.log(this.firstFormGroup)
+  }
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 433c4b5..1a7a681 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -26,45 +26,63 @@ body {
     font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-.mat-calendar-body-cell-content {
-    background-color: #1861ac;
-    color: #fff;
-    font-weight: bold;
-    font-size: 2em;
+.mat-form-field-subscript-wrapper {
+  font-size: 95%;
 }
 
-.mat-calendar-table {
-    border: 1px solid white;
-}
+// customize datepicker
+//.mat-datepicker-content-container {
+//  background:transparent;
+//}
+//.mat-datepicker-content {
+//  color: black;
+//}
+//.mat-calendar-body-cell-content, .mat-calendar-body-label{
+//  color: black;
+// }
 
-.mat-calendar-table-header {
 
-    tr {
-        th {
-            padding-top: 2em;
-        }
 
-        th.mat-calendar-table-header-divider {
-            padding: 0;
-        }
-    }
-}
-
-.mat-calendar-controls,
-.mat-calendar-table-header,
-.mat-calendar-body-label {
-    color: #fff;
-    font-size: 2em;
-}
-
-.mat-calendar-previous-button,
-.mat-calendar-next-button,
-.mat-calendar-period-button {
-    font-size: 2em;
-    height: 2em;
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;    
-}
+//
+//.mat-calendar-body-cell-content {
+//    background-color: #1861ac;
+//    color: #fff;
+//    font-weight: bold;
+//    font-size: 2em;
+//}
+//
+//.mat-calendar-table {
+//    border: 1px solid white;
+//}
+//
+//.mat-calendar-table-header {
+//
+//    tr {
+//        th {
+//            padding-top: 2em;
+//        }
+//
+//        th.mat-calendar-table-header-divider {
+//            padding: 0;
+//        }
+//    }
+//}
+//
+//.mat-calendar-controls,
+//.mat-calendar-table-header,
+//.mat-calendar-body-label {
+//    color: #fff;
+//    font-size: 2em;
+//}
+//
+//.mat-calendar-previous-button,
+//.mat-calendar-next-button,
+//.mat-calendar-period-button {
+//    font-size: 2em;
+//    height: 2em;
+//    color: #fff;
+//    background-color: #1b6ec2;
+//    border-color: #1861ac;
+//}
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }