diff --git a/src/components/AddNote.vue b/src/components/AddNote.vue
index 8459fc7..b684b5a 100644
--- a/src/components/AddNote.vue
+++ b/src/components/AddNote.vue
@@ -1,4 +1,5 @@
 <template>
+    <v-container>
     <v-card title="Add Comment">
         <v-card-text>
             <p>Add new comment for : {{ customer.acc_no }} - {{ customer.name }}</p>
@@ -11,6 +12,7 @@
         </v-card-actions>
 
     </v-card>
+    </v-container>
 </template>
 <script>
 import axios from 'axios'
diff --git a/src/components/CustomerComments.vue b/src/components/CustomerComments.vue
index 503b629..88e4a71 100644
--- a/src/components/CustomerComments.vue
+++ b/src/components/CustomerComments.vue
@@ -20,9 +20,9 @@
             </v-list>
         </v-card-text>
     </v-card>
-    <v-dialog v-model="dialog[0]">
+    <v-overlay v-model="dialog[0]" contained class="align-center justify-center">
         <AddNote :customer="customer" @return="closeAddNote"></AddNote>
-    </v-dialog>
+    </v-overlay>
 </template>
 <script>
 import Customer from '@/types/CustomerType.vue'