diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 36cde34..acfce01 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -2,6 +2,14 @@
     <div>
         <Loader v-if="loading" />
         <div v-else>
+            <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+            <div v-if="modal" class="modal">
+                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex-center m-1 mt-2">
+                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                    <button class="btn-alert" @click="destroy"> Delete</button>
+                </div>
+            </div>
             <div class="relative">
                 <img
                     v-if="!loading"
@@ -11,15 +19,6 @@
                 <div class="flex-col flex-between absolute memo-cover">
                     <div class="flex-between px-2 py-1">
                         <router-link to="/memos/" class="btn-secondary">< Back</router-link>
-                        <div v-if="modal" class="modal-container" @click="modal = ! modal">
-                            <div class="modal">
-                                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                                <div class="flex-center m-1 mt-2">
-                                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
-                                    <button class="btn-alert" @click="destroy"> Delete</button>
-                                </div>
-                            </div>
-                        </div>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index b32ff51..a0b0e2e 100644
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -2,25 +2,26 @@ $modal-duration: 1s;
 
 .modal-container {
     background-color: rgba(0,0,0,0.6);
-    //display: none;
     position: fixed;
+    z-index: 10;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-
-    .modal {
-        background-color: #fff;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-        position: absolute;
-        overflow: hidden;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        max-width: 100%;
-        width: 400px;
-        animation-name: modalopen;
-        animation-duration: $modal-duration;
-    }
+}
+
+.modal {
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    z-index: 20;
+    overflow: hidden;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 100%;
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
 }