diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 088dcf0..fb732ae 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -1,16 +1,45 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.head {
+  color:rgba(41, 46, 50, 0.679);
+  padding-left: 10px;
+  padding-right: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+  display: flex; 
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  height: 50px;
+  margin-bottom: 10px;
+}
+
 #topbar {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   height: 57px;
-  margin-bottom: 20px;
+  margin-bottom: 50px;
 
-  border: dashed green 1px;
 }
 
 
 .restartButton {
   width: 60px;
+  background-color: white;
+  border: none;
+  border: solid 1px rgba(94, 94, 94, 0.18);
+  color: #000000a7;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.restartButton:hover {
+  color: #000000;
+  background-color: rgb(243, 243, 243);
 }
 
 .example-radio-group {
@@ -165,7 +194,7 @@
 
 .mat-button-toggle-checked {
   background-color: #ef6c00;
-
+  color: white;
 }
 
 .dot-badge {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 53fbc89..2fd600c 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,5 +1,24 @@
+<div class="head">
+  <h2>Change Calendar</h2>
+
+  <!-- User -->
+  <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
+    <h3 *ngIf="userId"
+      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.706);">
+      <mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
+    </h3>
+    <h3 *ngIf="errorService.rsso"
+      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
+        style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
+    <h3 *ngIf="!errorService.rsso &&rssoInit"
+      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
+        style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
+  </div>
+
+</div>
 <div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
 
+
   <!-- Date Range Picker  -->
   <div style="display: flex; gap: 10px;">
     <div style="display: flex;">
@@ -64,18 +83,7 @@
 
   </div>
 
-  <!-- User -->
-  <div style="display: flex; justify-content: center; align-items: center; border: dashed blue 1px;">
-    <h3 *ngIf="userId" style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;">
-      <mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
-    </h3>
-    <h3 *ngIf="errorService.rsso"
-      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
-        style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
-    <h3 *ngIf="!errorService.rsso &&rssoInit"
-      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
-        style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
-  </div>
+