diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index f7ce79986a1b2ee5e3e0412d3a63c02a500b7ecb..68c688394c1c04985e3dc50a509c490d4296f770 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -32,16 +32,6 @@
 					This is body
 				</slot>
 			</section>
-
-			<!-- <footer class="modal-footer">
-				<slot name="footer">
-					This is footer
-				</slot>
-				<button type="button" class="btn-green" @click="close">
-					Close Modal
-				</button>
-			</footer> -->
-			
     </div>
   </div>
 </template>
@@ -58,6 +48,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
   }
 
   .modal {
@@ -74,7 +65,7 @@
     top: 50%;
     bottom: 0;
     left: 50%;
-    right: 0;
+    right: 0; 
     transform: translate(-50%, -50%);
   }
 
@@ -82,25 +73,16 @@
   .modal-header {
     padding: 15px;
     display: flex;
-  }
-
-
-  .modal-header {
     position: relative;
     border-bottom: 1px solid #eeeeee;
     color: #6992b4;
     justify-content: space-between;
+    font-weight: bold;
   }
 
-  /* .modal-footer {
-    border-top: 1px solid #eeeeee;
-    flex-direction: column;
-    justify-content: flex-end;
-  } */
-
   .modal-body {
     position: relative;
-    padding: 20px 10px;
+    padding: 18px 10px;
   }
 
   .btn-close {
diff --git a/src/components/header.vue b/src/components/header.vue
index c952bf54c5c22bd0b8b474c448e1cdc965d4c033..6f2ed12b92e899586b3faf6d4e7c3456b61acf78 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -51,9 +51,9 @@
     <template v-slot:header>Menu Pilihan</template>
     <template v-slot:body>
       <!-- warna biru, link ke halaman profil -->
-      <button @click="toProfile">Lihat Profil</button>
+      <button class="btn-blue mb-2 ms-2" @click="toProfile">Lihat Profil</button>
       <!-- warna merah -->
-      <button @click="toLogout">Keluar</button>
+      <button class="btn-red ms-4" @click="toLogout">Keluar</button>
     </template>
   
   </Modal>
@@ -61,16 +61,13 @@
 
 <script>
 import Modal from "../components/modal";
-//import Name from "../components/name";
 import { HTTP } from '../http-common'
 
 export default {
   name: "Header",
   components: {
     Modal
-    // Name
   },
-  // props:{ username: String },
   data() {
     return {
       nav_active: true,
@@ -92,10 +89,8 @@ export default {
 		},
     closeModal(){
 			this.isModalVisible = false;
-			//console.log(this.isModalVisible)
 		},
     toProfile(){
-      //console.log("profile")
       if (this.is_admin){
         this.$router.push({ name: "profil-admin", params: { id: this.id }});
       } else {
@@ -103,38 +98,34 @@ export default {
       }
       
     },
-    toLogout(){
+    toLogout(e){
+      e.preventDefault();
       console.log("logout")
-      //panggil api logout (delete token)
-      //data user jadi null
-      //pastiin dia gabisa ke halaman lain lagi
+      this.$router.push('login')
+      // var a = localStorage.getItem("token");
+      // console.log(a)
+      // var b = localStorage.removeItem("token");
+      // console.log(b)
+      localStorage.removeItem("token");
+      console.log('token removed')
     },
     getProfile(){
       HTTP.get("users/profile").then((res)=>{
           if (res.data.success == true){
           this.is_admin = res.data.data.is_admin
           if (this.is_admin){
-            //console.log(this.is_admin)
             this.profile_admin = res.data.data
             this.name = this.profile_admin.username
             this.id = this.profile_admin.id
 
           } else {
-            //console.log(res.data.data.profile)
             this.profile_employee = res.data.data.profile
             this.name = this.profile_employee.name
             this.user_id = this.profile_employee.user_id
           }
-          //console.log(this.name)
       }})
     },
   },
-  // computed:{
-  //   getName(){
-  //     this.username = this.name
-  //     return this.username
-  //   }
-  // },
   mounted(){
     this.getProfile();
   },
@@ -166,5 +157,23 @@ export default {
 .profile-modal{
   width: 20em;
   height: 35em;
+  transform: translate(110%, -80%);
 }
+
+.btn-red {
+  background: #f4476b;
+  border-radius: 15px;
+  color: white;
+  border: none;
+  padding: 4% 15% 4% 15%;
+}
+
+.btn-blue {
+  background: #6992b4;
+  border-radius: 15px;
+  color: white;
+  border: none;
+  padding: 4% 15% 4% 15%;
+}
+
 </style>
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index e8702249c5d61c12165c888daa5c1084f3ad484a..7ed4ce8dbefd1e20de517079392bbbaf59e722e5 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -70,15 +70,15 @@
         <template v-if="type === 'addDept'">
           <form @submit="insert" autocomplete="off" id="formAddDept">
             <label for="deptInput">Nama Departemen</label>
-            <input v-model="deptnameadd" type="text" id="deptInput" class="form-control">
-            <button type="submit" class="btn-blue p-1" >Simpan</button>
+            <input v-model="deptnameadd" type="text" id="deptInput" class="form-control mb-3">
+            <button type="submit" class="btn-blue" >Simpan</button>
           </form> 
         </template>
         <template v-if="type === 'editDept'">
           <form @submit="edit" autocomplete="off" id="formEditDept">
             <label for="deptEdit">Nama Departemen</label>
-            <input v-model="deptnameedit" type="text" id="deptEdit" class="form-control">
-            <button type="submit" class="btn-blue p-1" >Simpan</button>
+            <input v-model="deptnameedit" type="text" id="deptEdit" class="form-control mb-3">
+            <button type="submit" class="btn-blue" >Simpan</button>
           </form> 
         </template>
 			</template>
@@ -281,4 +281,13 @@ export default {
   transform: translate(-50%, -50%);
   margin: auto;
 }
+
+.btn-blue {
+  background: #6992b4;
+  border-radius: 15px;
+  color: white;
+  border: none;
+  padding: 1% 5% 1% 5%;
+}
+
 </style>