diff --git a/src/components/modal.vue b/src/components/modal.vue
index 3dbd2ea0bf60e96b854bb68e9d4de13a55de33e3..1032414291668f62268411b7aceabdb1bb53ba0a 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -58,8 +58,8 @@
     border: 1px solid #6992b4;
     /* overflow-x: auto; */
     overflow: hidden;
-    width: 50%;
-    height: 30%;
+    width: 35%;
+    height: 195px;
     display: flex;
     flex-direction: column;
     top: 50%;
@@ -81,8 +81,9 @@
   }
 
   .modal-body {
-    position: relative;
+    /* position: relative; */
     padding: 18px 10px;
+    /* height: 20%; */
   }
 
   .btn-close {
diff --git a/src/views/UserIndex.vue b/src/views/UserIndex.vue
index fcdb260e3260412ea5991dae5ef00c37b5bd8d6a..f7f3cf5216b13bcad4d83df8d1a3e275658ca82f 100644
--- a/src/views/UserIndex.vue
+++ b/src/views/UserIndex.vue
@@ -107,27 +107,34 @@
     <template v-slot:body>
       <!-- upload csv -->
       <!-- open modal, upload, post -->
-      <form id="upload-form" @submit.prevent="uploadCSV">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="flex items-center">
-            <input type="file" @input="onInput">
+      <form id="upload-form" @submit="uploadCSV">
+        <div class="flex items-center p-2">
+          
+          <p style="font-size: 12.5px">Masukkan CSV dengan nama kolom: </p>
+          <p style="font-size: 12.5px" class="mb-4"> <b>name, nik, email,	department_id, position, nik_manager </b>(opsional)<b>, username,	email,</b> dan <b>password</b></p>
+          <div class="row">
+            <div class="col">
+              <input type="file" @input="onInput" name="employees">
+            </div>
+            <div class="col">
+              <button 
+                type="submit"
+                class="btn-blue-ori float-end" 
+                >
+                  Upload
+              </button>
+            </div>
+            <div class="col">
+              <button 
+                type="button" 
+                class="btn-red ms-3"
+                @click="closeModal"
+              >
+                Cancel
+              </button>
           </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button 
-            type="submit" 
-            class="me-2 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium"
-          >
-            Upload
-          </button>
-          <button 
-            type="button" 
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            @click="closeModal"
-          >
-            Cancel
-          </button>
-        </div>
+          </div>
+        </div>     
       </form>
     </template>
   </Modal>
@@ -212,20 +219,24 @@ export default {
     };
   },
   methods: {
-    uploadCSV(){
-      let data = { file: this.file }
-      console.log(data);
-      HTTP.post("register-employee-csv", data, {
+    uploadCSV(e){
+      e.preventDefault();
+      let formData = new FormData();
+      console.log(this.file);
+      formData.append("employees",this.file);
+      console.log(formData);
+      HTTP.post("register-employee-csv", formData, {
           headers:{
-              'Content-Type': 'application/json'
+              'Content-Type': 'multipart/form-data'
           }
       }).then((res)=>{
           if (res.status == 200){
               alert("File berhasil diupload")
-              document.getElementById("upload-form").reset(); //gatau bener ato ngga
+              document.getElementById("upload-form").reset(); 
           }
-      }).catch(()=>{
-          alert("Gagal meng-upload file")
+      }).catch((e)=>{
+          console.log(e.response.data);
+          alert("Gagal meng-upload file");
       })
       //this.closeModal();
     },
@@ -287,10 +298,8 @@ export default {
 		},
     closeModal(){
 			this.isModalVisible = false;
-			//console.log(this.isModalVisible)
 		},
     toAddIndividu(){
-      //console.log("profile")
       this.$router.push({ path: '/user/insert'});
       
     },
@@ -338,12 +347,18 @@ export default {
 }
 .btn-red {
 background: #f4476b;
-border-radius: 15px;
+border-radius: 16px;
 color: white;
 border: none;
-padding: 2% 13% 2% 10%;
+padding: 3% 18% 3% 18%;
+}
+.btn-blue-ori {
+background: #6992b4;
+border-radius: 16px;
+color: white;
+border: none;
+padding: 3% 18% 3% 18%;
 }
-
 .btn-blue {
   background: white;
   border-radius: 15px;