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 079006c14476e13f92bda033f27dc8145f600743..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>
@@ -157,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 b08c10d829a81bae918acc0f16f6b34b194f4087..feaa39c9f81872ea09302525ae794978a4804959 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>
@@ -262,4 +262,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>