diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0c4b92c7..df0d0672 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -25,7 +25,7 @@ const routes: Routes = [
     {path:'screen', component: CurrentScreenComponent},
     {path:'dashboard', component: DashboardComponent},
     {path:'applyLeave', component: ApplyLeaveComponent},
-    {path:'flexiLeave', component: FlexiLeaveComponent},
+    {path:'flexi', component: FlexiLeaveComponent},
     {path:'attendance', component: AttendanceComponent},
     {path:'odpnr', component: OdpnrComponent},
     {path:'notices', component: NoticesComponent},
diff --git a/src/app/apply-leave/apply-leave.component.scss b/src/app/apply-leave/apply-leave.component.scss
index 6d7d62ed..14b94dc1 100644
--- a/src/app/apply-leave/apply-leave.component.scss
+++ b/src/app/apply-leave/apply-leave.component.scss
@@ -22,6 +22,7 @@ button {
 }
 .title {
     text-align: center;
+    color:#0b5fa4;
 }
 .right-section {
     width: 48%;
diff --git a/src/app/attendance/attendance.component.scss b/src/app/attendance/attendance.component.scss
index 7f2bb455..f0eacd7d 100644
--- a/src/app/attendance/attendance.component.scss
+++ b/src/app/attendance/attendance.component.scss
@@ -43,4 +43,5 @@
 .title {
   text-align: center;
   margin:2%;
+  color:#0b5fa4;
 }
\ No newline at end of file
diff --git a/src/app/flexi-leave/flexi-leave.component.html b/src/app/flexi-leave/flexi-leave.component.html
index 39e9da2c..3255e625 100644
--- a/src/app/flexi-leave/flexi-leave.component.html
+++ b/src/app/flexi-leave/flexi-leave.component.html
@@ -1,8 +1,6 @@
 <div class="page-container" id="flexi-leave">
-    <div class="align-middle">
-            <p class="txt-content font-body-xsmall-bold">{{languageConstants.april}}</p>
-            <p class="txt-content font-body-xsmall-bold">2021</p>
-            <p class="txt-content font-body-xsmall-bold number-txt">{{languageConstants.flexi}}</p>
+    <div class="align-middle title">
+            <p class="txt-content font-body-xsmall-bold">{{languageConstants.april}}<br/>2021<br/>{{languageConstants.flexi}}</p>
     </div>
     <div class="flex-column leave-status">
         <div class="width-90 margin-5">
diff --git a/src/app/flexi-leave/flexi-leave.component.scss b/src/app/flexi-leave/flexi-leave.component.scss
index a6b2ac3e..3d8fe329 100644
--- a/src/app/flexi-leave/flexi-leave.component.scss
+++ b/src/app/flexi-leave/flexi-leave.component.scss
@@ -1,18 +1,55 @@
-@import '../../styles.scss';
-#flexi-leave{
-    .align-middle{
-        @include flex-box(column, top);
-        text-align: center;
-        padding-bottom: 5px;
-        width: 90%;
-        margin: 0% auto;
-        padding: 5%;
-    }
-    .leave-status{
-        background-color: $clr-mania;
-         .width-90{
-           width: 90%;
-           margin: 5% auto;
-         }
-      }
-}
\ No newline at end of file
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #b4e8fd;
+}
+
+.font-body-xsmall-bold {
+  font-size: 0.812rem;
+  line-height: 1.125rem;
+  letter-spacing: 1px;
+  font-family: "Raleway VariableFont";
+  text-transform: uppercase;
+}
+
+.flex-row {
+  flex-direction: row;
+  display: flex;
+  width: 100%;
+}
+
+button {
+  border-radius: 10px;
+  font-size: 0.938rem;
+  width: 98%;
+  background: #0b5fa4 0 0 no-repeat padding-box !important;
+  margin: 2%;
+}
+
+.align-middle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  text-align: center;
+  padding-bottom: 5px;
+  width: 90%;
+  margin: 0% auto;
+  padding: 5%;
+}
+
+.leave-status {
+  background-color: #b4e8fd;
+
+  .width-90 {
+    width: 90%;
+    margin: 5% auto;
+  }
+}
+
+.title {
+  text-align: center;
+  color: #0b5fa4;
+}
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 0c3d9de2..10ecc37d 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -1,8 +1,8 @@
 @import '../../styles.scss';
 #home-screen{
-  background-color: $clr-mania;
+  background-color: #b4e8fd;
   .main-container {
-    background: $clr-mania;
+    background: #b4e8fd;
     padding: 0%;
     margin-bottom: 20%;
     overflow-x: clip;
@@ -20,7 +20,7 @@
       }
       .card {
         width: 100%;
-        background: $clr-mania;
+        background: #b4e8fd;
         float: left;
   
         ul{
diff --git a/src/app/odpnr/odpnr.component.scss b/src/app/odpnr/odpnr.component.scss
index a6d95d94..25b8724e 100644
--- a/src/app/odpnr/odpnr.component.scss
+++ b/src/app/odpnr/odpnr.component.scss
@@ -1,11 +1,11 @@
 @import '../../styles.scss';
 .main-container {
-  background: $clr-mania;
+  background: #b4e8fd;
   padding: 0%;
   margin-bottom: 20%;
   height: 100%;
   .content {
-    background: $clr-mania;
+    background: #b4e8fd;
     width: 100%;
     @include flex-box(column, center, center);
     .clear-content{
@@ -18,7 +18,7 @@
     }
     .card {
       width: 100%;
-      background: $clr-mania;
+      background: #b4e8fd;
       float: left;
       min-height: 250px;
       .user-input{
@@ -112,7 +112,7 @@
       }
     }
    .leave-status{
-     background-color: $clr-mania;
+     background-color: #b4e8fd;
     //   .width-90{
     //     width: 100%;
     //     margin: 5% auto;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 4425ddac..524bf511 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -28,7 +28,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: $clr-mania;
+  background-color: #b4e8fd;
 }
 
 .main-container {