diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.html b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
index 256d271c9..22d535f0b 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.html
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
@@ -1,31 +1,31 @@
 <div class="card-body">
-    <div class="scroll">
-        <div class="accordion" id="accordionActivities">
-            <div *ngIf="activities?.length > 0; else notShow">
-                <div class="card" *ngFor="let activity of activities; let rowIndex = index">
-                    <div class="card-header">
-                        <h2 class="mb-0">
-                            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
-                                {{activity.name}}
-                            </a>
-                            <div class="btn-group float-right" role="group">
-                                <i class="far fa-edit btn btn-link"></i>
-                                <i class="far fa-trash-alt btn btn-link"></i>
-                            </div>
-                        </h2>
-                    </div>
+  <div class="scroll">
+    <div class="accordion" id="accordionActivities">
+      <div *ngIf="activities?.length > 0; else notShow">
+        <div class="card" *ngFor="let activity of activities; let rowIndex = index">
+          <div class="card-header style-list-project">
+            <h2 class="mb-0">
+              <a type="button" data-toggle="collapse" [attr.data-target]="'#row' + rowIndex">
+                {{ activity.name }}
+              </a>
+              <div class="btn-group float-right" role="group">
+                <i class="far fa-edit btn btn-link text-white"></i>
+                <i class="far fa-trash-alt btn btn-link text-white"></i>
+              </div>
+            </h2>
+          </div>
 
-                    <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
-                        <div class="card-body">
-                            <h5>Description:</h5>
-                            <p>{{activity.description}}</p>
-                        </div>
-                    </div>
-                </div>
+          <div [id]="'row' + rowIndex" class="collapse" data-parent="#accordionActivities">
+            <div class="card-body">
+              <h5>Description:</h5>
+              <p>{{ activity.description }}</p>
             </div>
-            <ng-template #notShow>
-                <app-empty-state></app-empty-state>
-            </ng-template>
+          </div>
         </div>
+      </div>
+      <ng-template #notShow>
+        <app-empty-state></app-empty-state>
+      </ng-template>
     </div>
+  </div>
 </div>
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
index e69de29bb..0c625698f 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
@@ -0,0 +1,6 @@
+@import '../../../../../styles/colors.scss';
+
+.style-list-project {
+  background-image: $background-gradient-items;
+  color: white;
+}
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.html b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
index 511a9867a..1d1b74d2f 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.html
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
@@ -23,7 +23,7 @@ <h1 class="card-title">Activity</h1>
 
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
+        <button class="btn save-button-style mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
       </div>
     </div>
   </form>
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.scss b/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
index e69de29bb..b38a23340 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.save-button-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}
diff --git a/src/app/modules/home/home.component.html b/src/app/modules/home/home.component.html
index 924cf8b51..316323697 100644
--- a/src/app/modules/home/home.component.html
+++ b/src/app/modules/home/home.component.html
@@ -1,5 +1,3 @@
-<app-navbar></app-navbar>
-
 <app-sidebar>
-    <router-outlet></router-outlet>
-</app-sidebar>
\ No newline at end of file
+  <router-outlet></router-outlet>
+</app-sidebar>
diff --git a/src/app/modules/project-management/components/create-project/create-project.component.html b/src/app/modules/project-management/components/create-project/create-project.component.html
index f13ec9b88..5f59426d4 100644
--- a/src/app/modules/project-management/components/create-project/create-project.component.html
+++ b/src/app/modules/project-management/components/create-project/create-project.component.html
@@ -54,10 +54,12 @@ <h1 class="card-title">Project</h1>
     </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
+        <button class="btn save-button-style mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
       </div>
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">Cancel</button>
+        <button class="btn cancel-button-style mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">
+          Cancel
+        </button>
       </div>
     </div>
   </form>
diff --git a/src/app/modules/project-management/components/create-project/create-project.component.scss b/src/app/modules/project-management/components/create-project/create-project.component.scss
index e69de29bb..4a2250b63 100644
--- a/src/app/modules/project-management/components/create-project/create-project.component.scss
+++ b/src/app/modules/project-management/components/create-project/create-project.component.scss
@@ -0,0 +1,15 @@
+@import '../../../../../styles/colors.scss';
+
+.save-button-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}
+
+.item-list-hover:link {
+  background-color: green;
+}
diff --git a/src/app/modules/project-management/components/project-list/project-list.component.html b/src/app/modules/project-management/components/project-list/project-list.component.html
index 4765d5255..b98bc11b4 100644
--- a/src/app/modules/project-management/components/project-list/project-list.component.html
+++ b/src/app/modules/project-management/components/project-list/project-list.component.html
@@ -5,7 +5,7 @@
     <div class="accordion" id="accordionProject">
       <div *ngIf="projects?.length > 0; else notShow">
         <div class="card" *ngFor="let project of projects | filterProject: filterProjects; let rowIndex = index">
-          <div class="card-header">
+          <div class="card-header style-list-project">
             <h2 class="mb-0">
               <a
                 type="button"
@@ -16,12 +16,12 @@ <h2 class="mb-0">
                 {{ project.name }}
               </a>
               <div class="btn-group float-right" role="group">
-                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
+                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link text-white"></i>
                 <i
                   (click)="openModal(project)"
                   data-toggle="modal"
                   data-target="#deleteModal"
-                  class="far fa-trash-alt btn btn-link"
+                  class="far fa-trash-alt btn btn-link text-white"
                 ></i>
               </div>
             </h2>
diff --git a/src/app/modules/project-management/components/project-list/project-list.component.scss b/src/app/modules/project-management/components/project-list/project-list.component.scss
index ea2de12c3..daa7b0035 100644
--- a/src/app/modules/project-management/components/project-list/project-list.component.scss
+++ b/src/app/modules/project-management/components/project-list/project-list.component.scss
@@ -1,4 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
 .scroll {
   max-height: 400px;
   overflow-y: auto;
 }
+
+.style-list-project {
+  background-image: $background-gradient-items;
+  color: white;
+}
diff --git a/src/app/modules/shared/components/clock/clock.component.html b/src/app/modules/shared/components/clock/clock.component.html
index 1a4412038..23da85048 100644
--- a/src/app/modules/shared/components/clock/clock.component.html
+++ b/src/app/modules/shared/components/clock/clock.component.html
@@ -1,8 +1,6 @@
-<div class="row">
-    <div class="col mt-1  time-clock-color">
-        <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
-    </div>
-    <div *ngIf="displayTime" class="col time-clock-color">
-        <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
-    </div>
-</div>
\ No newline at end of file
+<div class="col text-dark">
+  <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
+</div>
+<div *ngIf="displayTime" class="col text-dark">
+  <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+</div>
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.html b/src/app/modules/shared/components/details-fields/details-fields.component.html
index fd89befb5..66a747528 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.html
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.html
@@ -3,38 +3,59 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>
-    <input id="project" formControlName="project" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      id="project"
+      formControlName="project"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
     </div>
-    <input formControlName="activity" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="activity"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Jira Ticket</span>
     </div>
-    <input formControlName="ticket" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="ticket"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
     </div>
-    <input formControlName="technology" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="technology"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="form-group">
     <label for="NotesTextarea">Notes</label>
     <textarea formControlName="comments" class="form-control" id="NotesTextarea" rows="3"></textarea>
   </div>
   <div [ngClass]="{ hidden: formType !== 'entries' }" class="modal-footer">
-    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
+    <button #closeModal type="button" class="btn close-button-style" data-dismiss="modal">
       Close
     </button>
-    <button type="submit" class="btn btn-primary">Save changes</button>
+    <button type="submit" class="btn save-button-style">Save changes</button>
   </div>
 </form>
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.scss b/src/app/modules/shared/components/details-fields/details-fields.component.scss
index 06b6e01f5..2735a1709 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.scss
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.scss
@@ -1,7 +1,20 @@
+@import '../../../../../styles/colors.scss';
 .span-width {
   width: 6rem;
+  background-image: $background-pantone;
+  color: white;
 }
 
 .hidden {
   display: none;
 }
+
+.save-button-style {
+  background-color: $modal-button-primary;
+  color: white;
+}
+
+.close-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}
diff --git a/src/app/modules/shared/components/modal/modal.component.html b/src/app/modules/shared/components/modal/modal.component.html
index 05e9a29e1..a8e5eb848 100644
--- a/src/app/modules/shared/components/modal/modal.component.html
+++ b/src/app/modules/shared/components/modal/modal.component.html
@@ -10,8 +10,8 @@ <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
       Are you sure you want to delete <b>{{ list.name || list.project }}</b> entry?
     </div>
     <div class="modal-footer">
-      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-      <button (click)="removeListById(list.id)" type="button" class="btn btn-primary">Delete</button>
+      <button #cancelDeleteModal type="button" class="btn cancel-button-style" data-dismiss="modal">Cancel</button>
+      <button (click)="removeListById(list.id)" type="button" class="btn delete-button-style">Delete</button>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/shared/components/modal/modal.component.scss b/src/app/modules/shared/components/modal/modal.component.scss
index e69de29bb..f6f4d7757 100644
--- a/src/app/modules/shared/components/modal/modal.component.scss
+++ b/src/app/modules/shared/components/modal/modal.component.scss
@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.delete-button-style {
+  background-color: $modal-button-primary;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.html b/src/app/modules/shared/components/month-picker/month-picker.component.html
index 32c6d361a..c7b6335a0 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.html
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.html
@@ -1,7 +1,7 @@
 <div class="container-month d-flex">
   <div
-    class="month w-100 text-center text-white"
-    *ngFor="let month of months; let i = index "
+    class="month w-100 text-center"
+    *ngFor="let month of months; let i = index"
     (click)="getMonth(i)"
     [ngClass]="{ active: activeMonth === i }"
   >
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.scss b/src/app/modules/shared/components/month-picker/month-picker.component.scss
index ab3f8099a..01ae0076a 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.scss
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.scss
@@ -1,5 +1,8 @@
+@import '../../../../../styles/colors.scss';
+
 .month {
-  background-color: #0093dc;
+  background: $header;
+  color: white;
   cursor: pointer;
 
   &:hover {
@@ -8,5 +11,5 @@
 }
 
 .active {
-  background-color: #005ce0;
+  background-color: $item-background;
 }
diff --git a/src/app/modules/shared/components/navbar/navbar.component.html b/src/app/modules/shared/components/navbar/navbar.component.html
index 0f28be942..3d9f2c186 100644
--- a/src/app/modules/shared/components/navbar/navbar.component.html
+++ b/src/app/modules/shared/components/navbar/navbar.component.html
@@ -1,8 +1,8 @@
-<nav class="navbar navbar-dark bg-dark">
-  <a class="navbar-brand" href="#">
-    <img src="assets/img/ioet.png" width="20" height="35" class="d-inline-block align-top" alt="">
-  </a>
-
-  <app-clock class="text-center"></app-clock>
-  <app-user></app-user>
+<nav class="navbar navbar-light bg-white border-light border-bottom mt-1">
+  <div class="col-10 text-center">
+    <app-clock></app-clock>
+  </div>
+  <div class="col-2 text-right">
+    <app-user></app-user>
+  </div>
 </nav>
diff --git a/src/app/modules/shared/components/sidebar/sidebar.component.html b/src/app/modules/shared/components/sidebar/sidebar.component.html
index d702f91e2..a23671f66 100644
--- a/src/app/modules/shared/components/sidebar/sidebar.component.html
+++ b/src/app/modules/shared/components/sidebar/sidebar.component.html
@@ -1,18 +1,32 @@
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->
-  <div class="bg-light border-right" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
-    <div class="list-group list-group-flush">
-      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route"  routerLinkActive="dark"
-          class="list-group-item list-group-item-action bg-light"><i class="{{item.icon}}"></i> {{item.text}}</a>
+  <div class="mt-1 ml-1 rounded-lg" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
+    <div class="text-center mt-5 mb-5">
+      <img
+        src="assets/img/ioet-logo-light.png"
+        width="100"
+        height="100"
+        class="img-fluid text-center"
+        alt="Ioet logo"
+      />
+    </div>
+    <div class="list-group list-group-flush rounded-lg">
+      <a
+        *ngFor="let item of itemsSidebar"
+        [routerLink]="item.route"
+        routerLinkActive="background-item-sidebar-active"
+        class="list-group-item list-group-item-action content-sidebar-style item-hover"
+        ><i class="{{ item.icon }} mr-3 ml-3"></i> {{ item.text }}</a
+      >
     </div>
   </div>
   <!-- /#sidebar-wrapper -->
-
-  <!-- Page Content -->
-  <div class="container">
-    <router-outlet></router-outlet>
+  <div class="container-fluid mt-1">
+    <app-navbar></app-navbar>
+    <div class="container">
+      <!-- Page Content -->
+      <router-outlet></router-outlet>
+    </div>
   </div>
-  <!-- /#page-content-wrapper -->
-
 </div>
 <!-- /#wrapper -->
diff --git a/src/app/modules/shared/components/sidebar/sidebar.component.scss b/src/app/modules/shared/components/sidebar/sidebar.component.scss
index 3165ed4a1..a1200f7c0 100644
--- a/src/app/modules/shared/components/sidebar/sidebar.component.scss
+++ b/src/app/modules/shared/components/sidebar/sidebar.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../styles/colors.scss';
+
 body {
   overflow-x: hidden;
 }
@@ -5,10 +7,11 @@ body {
 #sidebar-wrapper {
   min-height: 100vh;
   margin-left: -15rem;
-  -webkit-transition: margin .25s ease-out;
-  -moz-transition: margin .25s ease-out;
-  -o-transition: margin .25s ease-out;
-  transition: margin .25s ease-out;
+  -webkit-transition: margin 0.25s ease-out;
+  -moz-transition: margin 0.25s ease-out;
+  -o-transition: margin 0.25s ease-out;
+  transition: margin 0.25s ease-out;
+  background-image: $background-gradient-pantone;
 }
 
 #sidebar-wrapper .sidebar-heading {
@@ -40,3 +43,15 @@ body {
     margin-left: -15rem;
   }
 }
+
+.content-sidebar-style {
+  background-color: transparent;
+  color: white;
+  font-weight: bold;
+  border: 0px;
+}
+
+.background-item-sidebar-active,
+.item-hover:hover {
+  background-color: $item-background;
+}
diff --git a/src/app/modules/shared/components/user/user.component.html b/src/app/modules/shared/components/user/user.component.html
index a28505efd..de1113dfa 100644
--- a/src/app/modules/shared/components/user/user.component.html
+++ b/src/app/modules/shared/components/user/user.component.html
@@ -1,10 +1,15 @@
 <div>
-  <a class="nav-link dropdown-toggle help-color" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <i class="far fa-user-circle"></i>
-    <span>{{name}}</span>
+  <a
+    class="nav-link dropdown-toggle user-profile justify-content-center text-center"
+    id="navbarDropdown"
+    role="button"
+    data-toggle="dropdown"
+    aria-haspopup="true"
+    aria-expanded="false"
+  >
+    <i class="far fa-user-circle"></i> Dario Herrera
   </a>
-
-  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-    <a class="dropdown-item" (click) = "logout()">Sign Out</a>
+  <div class="dropdown-menu style-click" aria-labelledby="navbarDropdown">
+    <a class="dropdown-item style-click" (click)="logout()">Sign Out</a>
   </div>
 </div>
diff --git a/src/app/modules/shared/components/user/user.component.scss b/src/app/modules/shared/components/user/user.component.scss
index 60a21fecc..755b93b3b 100644
--- a/src/app/modules/shared/components/user/user.component.scss
+++ b/src/app/modules/shared/components/user/user.component.scss
@@ -1,7 +1,16 @@
-.help-color {
-  color: white;
+@import '../../../../../styles/colors.scss';
+
+.user-profile {
+  color: black;
+  cursor: pointer;
 }
 
 .dropdown-menu {
-  margin: 0 1rem;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.style-click:active {
+  background-image: $button-primary-color;
+  color: white;
 }
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
index a00b3fcc1..0798014c2 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../styles/colors.scss';
+
 .content-projects {
   max-height: 10rem;
   overflow-x: auto;
@@ -18,3 +20,8 @@
   font-size: 0.7rem;
   padding: 0 0.3rem;
 }
+
+.active {
+  background-image: $list-item-selected;
+  border-color: transparent;
+}
diff --git a/src/app/modules/time-clock/pages/time-clock.component.html b/src/app/modules/time-clock/pages/time-clock.component.html
index 2b2cdb92b..dc721361a 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.html
+++ b/src/app/modules/time-clock/pages/time-clock.component.html
@@ -4,20 +4,9 @@
   </div>
 
   <div class="card">
-    <div class="card-header">
-      <div class="row">
-        <div class="col-2 text-left">
-          <strong>Time clock</strong>
-        </div>
-        <div class="col-10 text-right">
-          <i class="far fa-question-circle"></i>
-        </div>
-      </div>
-    </div>
-
     <div class="card-body">
       <p *ngIf="!isClockIn" class="card-title text-left">
-        <strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at
+        <strong>{{ username }}</strong> clocked <strong class="text-clock-in-color">in</strong> at
         <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong>
       </p>
       <p *ngIf="isClockIn" class="card-title text-left">
@@ -80,10 +69,15 @@ <h6 class="text-left"><strong>Projects</strong></h6>
             </button>
           </div>
           <div class="col text-right">
-            <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">
+            <button *ngIf="isClockIn" class="btn button-clock-in-style btn-sm" type="button" (click)="employeClockIn()">
               Clock In
             </button>
-            <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">
+            <button
+              *ngIf="!isClockIn"
+              class="btn button-clock-out-style btn-sm"
+              type="button"
+              (click)="employeClockOut()"
+            >
               Clock Out
             </button>
           </div>
diff --git a/src/app/modules/time-clock/pages/time-clock.component.scss b/src/app/modules/time-clock/pages/time-clock.component.scss
index 0e808f74e..e385c1be2 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.scss
+++ b/src/app/modules/time-clock/pages/time-clock.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../styles/colors.scss';
+
 .content-ClockIn {
   padding: 2.1rem 1rem;
 }
@@ -8,3 +10,17 @@
   height: 100%;
   justify-content: center;
 }
+
+.button-clock-in-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.button-clock-out-style {
+  background: $button-secondary-color;
+  color: white;
+}
+
+.text-clock-in-color {
+  color: $modal-button-secondary;
+}
diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html
index 401cb29e0..b418eac54 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.html
+++ b/src/app/modules/time-entries/pages/time-entries.component.html
@@ -1,6 +1,5 @@
 <div class="container-time-entries">
   <div class="card">
-    <div class="card-header">Time Entries</div>
     <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
     <div class="row m-0 header-entries">
       <div class="col">Project</div>
@@ -8,21 +7,30 @@
       <div class="col-2">Actions</div>
     </div>
     <!--Accordion wrapper-->
-    <div *ngIf="dataByMonth.length > 0; else emptyState" class="accordion accordion-container" role="tablist"
-      aria-multiselectable="true">
+    <div
+      *ngIf="dataByMonth.length > 0; else emptyState"
+      class="accordion accordion-container"
+      role="tablist"
+      aria-multiselectable="true"
+    >
       <div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
         <!-- Card header -->
         <div class="date-header" role="tab" id="heading10">
           <a data-toggle="collapse" [href]="'#entry' + rowIndex">
-            <div class="mb-0">
+            <div class="mb-0 text-white">
               {{ entry.date }}
             </div>
           </a>
         </div>
 
         <!-- Card body -->
-        <div *ngFor="let item of entry.details" [id]="'entry' + rowIndex" class="collapse show" role="tabpanel"
-          aria-labelledby="heading10">
+        <div
+          *ngFor="let item of entry.details"
+          [id]="'entry' + rowIndex"
+          class="collapse show"
+          role="tabpanel"
+          aria-labelledby="heading10"
+        >
           <div class="row m-0 entries">
             <div class="col">
               {{ item.project }}
@@ -31,12 +39,20 @@
               {{ item.duration }}
             </div>
             <div class="col-2">
-              <button class="btn btn-sm btn-small" data-toggle="modal" data-target="#editRecordsByDate"
-                (click)="editEntry(item.id)">
+              <button
+                class="btn btn-sm btn-small"
+                data-toggle="modal"
+                data-target="#editRecordsByDate"
+                (click)="editEntry(item.id)"
+              >
                 <i class="fa fa-edit"></i>
               </button>
-              <button class="btn btn-sm btn-small" data-toggle="modal" data-target="#deleteModal"
-                (click)="openModal(item)">
+              <button
+                class="btn btn-sm btn-small"
+                data-toggle="modal"
+                data-target="#deleteModal"
+                (click)="openModal(item)"
+              >
                 <i class="fa fa-trash"></i>
               </button>
             </div>
@@ -56,11 +72,23 @@
         <h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
       </div>
       <div class="modal-body">
-        <app-details-fields [formType]='"entries"' [entryToEdit]="entry" (saveEntry)="saveEntry($event)"></app-details-fields>
+        <app-details-fields
+          [formType]="'entries'"
+          [entryToEdit]="entry"
+          (saveEntry)="saveEntry($event)"
+        ></app-details-fields>
       </div>
     </div>
   </div>
 </div>
-<app-modal *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="entryToDelete"
-  (removeList)="removeEntry($event)">
+<app-modal
+  *ngIf="showModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [list]="entryToDelete"
+  (removeList)="removeEntry($event)"
+>
 </app-modal>
diff --git a/src/app/modules/time-entries/pages/time-entries.component.scss b/src/app/modules/time-entries/pages/time-entries.component.scss
index 78ffafc56..faf2bf6b1 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.scss
+++ b/src/app/modules/time-entries/pages/time-entries.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../styles/colors.scss';
+
 .container-time-entries {
   padding: 1rem;
 }
@@ -17,7 +19,7 @@
 }
 
 .date-header {
-  background-color: #e6e6e6;
+  background-image: $background-gradient-items;
   border-radius: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   font-size: small;
diff --git a/src/assets/img/ioet-logo-light.png b/src/assets/img/ioet-logo-light.png
new file mode 100644
index 000000000..b77fb3702
Binary files /dev/null and b/src/assets/img/ioet-logo-light.png differ
diff --git a/src/index.html b/src/index.html
index d9f933222..553c99bcd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,20 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>TimeTracker</title>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-
-</head>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
 
-<body>
+  <body>
     <app-root></app-root>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://kit.fontawesome.com/76d0c245a1.js" crossorigin="anonymous"></script>
-</body>
-
+  </body>
 </html>
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 000000000..3c36e00e5
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1,71 @@
+$danger-color: #ff3948;
+
+$secondary-pantone: #fd927d;
+
+$background-pantone: linear-gradient(
+  to right top,
+  #ff3663,
+  #ff3b5a,
+  #ff4051,
+  #ff4748,
+  #ff4d3e,
+  #fe5039,
+  #fd5335,
+  #fc5630,
+  #fc5630,
+  #fc5630,
+  #fc5630,
+  #fc5630
+);
+
+$background-gradient-items: linear-gradient(
+  to right,
+  #ff3948,
+  #ff384d,
+  #ff3752,
+  #ff3657,
+  #ff365c,
+  #ff385a,
+  #ff3b59,
+  #ff3d57,
+  #ff434e,
+  #ff4944,
+  #fe4f3a,
+  #fc5630
+);
+
+$succes-color: linear-gradient(
+  to left bottom,
+  #ff3948,
+  #ff3f44,
+  #fe443f,
+  #fe4a3b,
+  #fd4f36,
+  #fd5134,
+  #fc5432,
+  #fc5630,
+  #fc5630,
+  #fc5630,
+  #fc5630,
+  #fc5630
+);
+
+// ** user directly
+
+$background-gradient-pantone: $background-pantone;
+
+$item-background: $secondary-pantone;
+
+$title-card-header-background: $background-pantone;
+
+$button-primary-color: $succes-color;
+
+$button-secondary-color: $danger-color;
+
+$list-item-selected: $background-gradient-items;
+
+$header: $danger-color;
+
+$modal-button-primary: $button-secondary-color;
+
+$modal-button-secondary: #00bcbd;