diff --git a/launcher/src/background.js b/launcher/src/background.js
index 89ff6fd7d..cc715f06b 100644
--- a/launcher/src/background.js
+++ b/launcher/src/background.js
@@ -151,21 +151,7 @@ app.on("activate", () => {
   if (BrowserWindow.getAllWindows().length === 0) createWindow();
 });
 
-// //electron drag&drop codes
-// promiseIpc.on('ondragstart', (event, filePath) => {
-//   readFile(filePath);
-//   function readFile(filepath) {
-//     fs.readFile(filepath, 'utf-8', (err, data) => {
-//        if(err){
-//           alert("An error ocurred reading the file :" + err.message)
-//           return
-//        }
-//        // handle the file content
-//        event.sender.send('fileData', data)
-//     })
-//  }
-
-// })
+
 
 app.on("web-contents-created", (event, contents) => {
   // open every new window in the OS's default browser instead of a
diff --git a/launcher/src/components/UI/the-staking/DropZone.vue b/launcher/src/components/UI/the-staking/DropZone.vue
new file mode 100644
index 000000000..586babae9
--- /dev/null
+++ b/launcher/src/components/UI/the-staking/DropZone.vue
@@ -0,0 +1,15 @@
+<template>
+
+</template>
+<script>
+export default {
+  props: ["keyFiles"],
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style scoped>
+
+</style>
diff --git a/launcher/src/components/UI/the-staking/KeyTable.vue b/launcher/src/components/UI/the-staking/KeyTable.vue
index 7423d1e3c..c727f1bf1 100644
--- a/launcher/src/components/UI/the-staking/KeyTable.vue
+++ b/launcher/src/components/UI/the-staking/KeyTable.vue
@@ -2,7 +2,7 @@
   <div class="keys-parent">
     <div class="keys-table-box">
       <div class="keys-table">
-        <div class="table-header">
+        <div class="table-header" v-if="insertFilePage">
           <span id="name">NAME</span>
           <span id="service">SERVICE</span>
           <span id="active">ACTIVE SINCE</span>
@@ -12,9 +12,10 @@
         </div>
         <div
           class="table-content"
-          :class="{ 'drop-active': isDragOver }"
-          @drag.prevent.stop
-          @dragstart.prevent.stop
+          v-if="insertFilePage"
+          :class="{ dropActive: isDragOver }"
+          @drag.prevent.stop=""
+          @dragstart.prevent.stop=""
           @dragend.prevent.stop="isDragOver = false"
           @dragover.prevent.stop="isDragOver = true"
           @dragenter.prevent.stop="isDragOver = true"
@@ -23,8 +24,8 @@
         >
           <div class="table-row" v-for="(item, index) in keyFiles" :key="index">
             <span class="circle"></span>
-            <span class="category">{{ item.pubkey }}</span>
-            <span class="username">Max Behzadi</span>
+            <span class="category">{{ item.name }}</span>
+            <span class="username"></span>
             <img
               class="service-icon"
               src="../../../../public/img/icon/the-staking/blox-service.png"
@@ -73,9 +74,28 @@
             </div>
           </div>
         </div>
+        <div class="table-header" v-if="enterPasswordPage">
+          <span id="active">FILE NAME</span>
+        </div>
+        <div class="table-content" v-if="enterPasswordPage">
+          <div
+            class="key-table-row"
+            v-for="(item, index) in keyFiles"
+            :key="index"
+          >
+            <span class="key-circle"></span>
+            <span class="file-name">{{ item.name }}</span>
+            <div @click="removeKeyHandler(item.uuid)" class="key-remove-icon">
+              <img
+                src="../../../../public/img/icon/task-manager-icons/close3.png"
+                alt="icon"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="middle-icon">
+    <div class="middle-icon" v-if="insertFilePage">
       <img
         class="rename"
         src="../../../../public/img/icon/the-staking/rename-icon.png"
@@ -91,7 +111,7 @@
         src="../../../../public/img/icon/the-staking/staking-filter.png"
         alt="icon"
       />
-      <div class="insert-key" @click="openUploader">
+      <div class="insert-key" @click="openUploadHandler">
         <input
           type="file"
           @change="uploadFileHandler"
@@ -108,33 +128,80 @@
         />
       </div>
     </div>
+    <div class="password-box" v-if="enterPasswordPage">
+      <img
+        class="rename"
+        src="../../../../public/img/icon/the-staking/rename-icon.png"
+        alt="icon"
+      />
+      <img
+        class="folder"
+        src="../../../../public/img/icon/the-staking/newfolder-icon.png"
+        alt="icon"
+      />
+      <img
+        class="filter"
+        src="../../../../public/img/icon/the-staking/staking-filter.png"
+        alt="icon"
+      />
+      <div class="enter-password" @click="confirmPasswordHandler">
+        <input v-if="passwordInputActive" type="password" />
+        <button v-if="passwordInputActive">CONFIRM</button>
+        <span v-else>ENTER PASSWORD & IMPORT</span>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import ShowKey from "./DropZone.vue";
+import DropZone from "./ShowKey.vue";
 export default {
+  components: { ShowKey, DropZone },
   data() {
     return {
       isDragOver: false,
       keyFiles: [],
+      insertFilePage: true,
+      enterPasswordPage: false,
+      passwordInputActive: false,
     };
   },
-  mounted() {},
+  updated() {
+    this.checkKeyExists();
+  },
   methods: {
-    openUploader() {
-      this.$refs.fileInput.click();
-    },
     uploadFileHandler(event) {
+      console.log("upload", event);
       let uploadedFiles = event.target.files;
-      this.keyFiles.push(uploadedFiles);
+      this.keyFiles.push(...uploadedFiles);
+      this.insertFilePage = false;
+      this.enterPasswordPage = true;
       this.isDragOver = false;
-      console.log(uploadedFiles);
     },
     dropFileHandler(event) {
       console.log("drop", event);
       let droppedFiles = event.dataTransfer.files;
-      this.keyFiles.push(droppedFiles);
+      this.keyFiles.push(...droppedFiles);
+      this.insertFilePage = false;
+      this.enterPasswordPage = true;
       this.isDragOver = false;
-      console.log(droppedFiles);
+    },
+    removeKeyHandler(id) {
+      this.keyFiles = this.keyFiles.filter((item) => item.uuid !== id);
+      console.log(this.keyFiles);
+    },
+    openUploadHandler() {
+      this.$refs.fileInput.click();
+    },
+    confirmPasswordHandler() {
+      this.passwordInputActive = true;
+    },
+    checkKeyExists() {
+      if (this.keyFiles.length <= 0) {
+        this.insertFilePage = true;
+        this.enterPasswordPage = false;
+        this.passwordInputActive = false;
+      }
     },
   },
 };
@@ -156,56 +223,23 @@ export default {
   margin: 10px 10px 0 0;
   border: 4px solid #bfbfbf;
   border-radius: 20px;
-}
-.keys-table {
-  width: 100%;
-  height: 100%;
-}
-
-.table-header {
-  height: 30px;
-  border-bottom: 7px solid #bfbfbf;
-  display: grid;
-  grid-template-columns: 3% 17% 13% 8% 13% 6% 10% 30%;
-}
-.table-header span {
-  color: #fff;
-  font-size: 10px;
-  font-weight: 900;
   display: flex;
   justify-content: center;
-  align-items: flex-end;
-}
-.table-header #name {
-  grid-column: 3;
-}
-.table-header #service {
-  grid-column: 4;
-}
-.table-header #active {
-  grid-column: 5;
-}
-.table-header #state {
-  grid-column: 6;
-}
-.table-header #balance {
-  grid-column: 7;
-}
-.table-header #option {
-  grid-column: 8;
-}
-.table-content {
-  height: 92%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  align-items: center;
 }
-.drop-active {
+.dropActive {
   width: 100%;
   height: 92%;
   background-color: rgb(44, 151, 128);
   opacity: 0.2;
   border-radius: 20px;
 }
+.table-content {
+  height: 92%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .table-row {
   width: 99%;
   height: 30px;
@@ -319,6 +353,45 @@ export default {
   justify-content: center;
   align-items: center;
 }
+.keys-table {
+  width: 100%;
+  height: 100%;
+}
+
+.table-header {
+  height: 30px;
+  border-bottom: 7px solid #bfbfbf;
+  display: grid;
+  grid-template-columns: 3% 17% 13% 8% 13% 6% 10% 30%;
+}
+.table-header span {
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.table-header #name {
+  grid-column: 3;
+}
+.table-header #service {
+  grid-column: 4;
+}
+.table-header #active {
+  grid-column: 5;
+}
+.table-header #state {
+  grid-column: 6;
+}
+.table-header #balance {
+  grid-column: 7;
+}
+.table-header #option {
+  grid-column: 8;
+}
+
+.password-box,
 .middle-icon {
   width: 60%;
   height: 40px;
@@ -329,14 +402,18 @@ export default {
   bottom: 6%;
   left: 2%;
 }
+.password-box img,
 .middle-icon img {
   width: 30px;
   height: 30px;
 }
+.password-box .rename,
+.password-box .folder,
 .middle-icon .rename,
 .middle-icon .folder {
   margin-right: 10px;
 }
+.password-box .filter,
 .middle-icon .filter {
   margin-right: 20px;
 }
@@ -350,64 +427,115 @@ export default {
   align-items: center;
   cursor: pointer;
 }
-.middle-icon .insert-key span {
+.password-box .enter-password {
+  width: 70%;
+  height: 32px;
+  border: 1px solid #bfbfbf;
+  background-color: #336666;
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.password-box .enter-password span {
+  color: rgb(227, 227, 227);
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+.password-box .enter-password input {
+  width: 80%;
+  height: 60%;
+  border: 1px solid #878787;
+  border-radius: 35px 0 0 35px;
+  background-color: #002828;
+  outline-style: none;
+  padding-left: 10px;
+  position: absolute;
+  left: 5px;
+  font-size: 1.5rem;
   color: #fff;
-  font-size: 20px;
-  font-weight: 900;
+  font-weight: 300;
+  padding-top: 2px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
-.middle-icon .insert-key img {
-  width: 28px;
-  height: 28px;
+.password-box .enter-password button {
+  width: 20%;
+  height: 100%;
+  border: none;
+  border-right: 1px solid #bfbfbf;
+  border-left: 1px solid #bfbfbf;
+  border-radius: 0 35px 35px 0;
+  background-color: #3f4449;
+  outline-style: none;
+  position: absolute;
+  right: 0;
+  font-size: 0.7rem;
+  color: #fff;
+  font-weight: 400;
+  cursor: pointer;
+  box-shadow: inset 1px 1px 10px #33393e;
+}
+.password-box .enter-password button:hover {
+  background-color: #23272a;
+  box-shadow: none;
+}
+.password-box .enter-password button:active {
+  background-color: #181b1d;
+  box-shadow: inset 1px 1px 3px #070708;
 }
 
-.grafiti-text {
-  color: #fff;
-  position: absolute;
-  bottom: -20px;
-  left: 50px;
-  font-size: 10px;
-  font-weight: 600;
-  background-color: rgb(23, 22, 22);
-  opacity: 0.7;
-  display: none;
+.middle-icon .insert-key span {
+  color: #336666;
+  font-size: 1.1rem;
+  font-weight: 700;
 }
-.copy-text {
-  color: #fff;
-  position: absolute;
-  bottom: -20px;
-  left: 10px;
-  font-size: 10px;
-  font-weight: 600;
-  background-color: rgb(23, 22, 22);
-  opacity: 0.7;
-  display: none;
+.middle-icon .insert-key img {
+  width: 28px;
+  height: 28px;
 }
-.exit-text {
-  color: #fff;
-  position: absolute;
-  bottom: -20px;
-  right: 12px;
-  font-size: 10px;
-  font-weight: 600;
-  background-color: rgb(23, 22, 22);
-  opacity: 0.7;
-  display: none;
+.key-table-row {
+  width: 99%;
+  height: 30px;
+  margin: 5px auto 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgb(89, 89, 89);
+  border-radius: 30px;
+  padding: 1px;
 }
-.remove-text {
-  color: #fff;
-  position: absolute;
-  bottom: -20px;
-  right: 49px;
-  font-size: 10px;
-  font-weight: 600;
-  background-color: rgb(23, 22, 22);
-  opacity: 0.7;
-  display: none;
-}
-.option-box div:hover > .grafiti-text,
-.option-box div:hover > .copy-text,
-.option-box div:hover > .exit-text,
-.option-box div:hover > .remove-text {
-  display: block;
+.key-table-row .file-name {
+  width: 90%;
+  color: #fff !important;
+  font-size: 1rem !important;
+  font-weight: 400 !important;
+}
+.key-table-row .key-remove-icon {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  border: 1px solid #4a4a4a !important;
+  border-radius: 50px !important;
+  width: 20px !important;
+  height: 20px !important;
+  margin-right: 4px;
+  padding: 1px;
+  background-color: #343434;
+  box-shadow: 0 0 3px 1px rgb(0, 0, 0);
+}
+.key-table-row .key-remove-icon img {
+  width: 70% !important;
+  height: 70% !important;
+}
+.key-table-row .key-circle {
+  width: 20px !important;
+  height: 20px !important;
+  border-radius: 50% !important;
+  background-color: #fff !important;
+  margin-left: 5px;
 }
 </style>
diff --git a/launcher/src/components/UI/the-staking/ShowKey.vue b/launcher/src/components/UI/the-staking/ShowKey.vue
new file mode 100644
index 000000000..9473dc385
--- /dev/null
+++ b/launcher/src/components/UI/the-staking/ShowKey.vue
@@ -0,0 +1,49 @@
+<template>
+
+</template>
+<script>
+export default {
+  props: ["keyFiles"],
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+.table-content {
+  height: 92%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.table-row {
+  width: 99%;
+  height: 30px;
+  margin: 5px auto 0 auto;
+  display: grid;
+  grid-template-columns: 10% 80% 10%;
+  background-color: rgb(89, 89, 89);
+  border-radius: 30px;
+  padding: 1px;
+  position: relative;
+}
+.table-row span {
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+}
+.table-row .circle {
+  grid-column: 1;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background-color: #fff;
+  margin: 0 auto;
+  align-self: center;
+}
+.table-row 
+.table-row .remove-icon {
+  grid-column: 3;
+  width: 20px;
+  justify-self: flex-end;
+}
+</style>
diff --git a/launcher/src/components/UI/the-staking/TheUpload.vue b/launcher/src/components/UI/the-staking/TheUpload.vue
deleted file mode 100644
index 27e0f6956..000000000
--- a/launcher/src/components/UI/the-staking/TheUpload.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    
-</template>
\ No newline at end of file