diff --git a/resources/js/components/views/sub_views/EditProfileDetails.vue b/resources/js/components/views/sub_views/EditProfileDetails.vue
index 9532be4..49334fa 100644
--- a/resources/js/components/views/sub_views/EditProfileDetails.vue
+++ b/resources/js/components/views/sub_views/EditProfileDetails.vue
@@ -2,21 +2,21 @@
     <div class="card-body bg-white rounded shadow-sm d-none d-lg-block">
         <div class="row">
             <div class="col-6">
-                <label for="email">Email</label>
+                <label>Email</label>
                 <div class="input-group">
-                    <input type="text" class="form-control" placeholder="Email" v-model="userDetails.email" disabled>
+                    <input type="text" class="form-control" placeholder="Email" v-bind:value="userDetails.email" disabled>
                 </div>
             </div>
         </div>
         <div class="row mt-2">
             <div class="col-6">
-                <label for="firstName">First name</label>
+                <label>First name</label>
                 <div class="input-group">
                     <input type="text" class="form-control" v-model="userDetails.first_name" placeholder="First name">
                 </div>
             </div>
             <div class="col-6">
-                <label for="lastName">Last name</label>
+                <label>Last name</label>
                 <div class="input-group">
                     <input type="text" class="form-control" v-model="userDetails.last_name" placeholder="Last name">
                 </div>
@@ -24,14 +24,19 @@
         </div>
         <div class="row mt-2">
             <div class="col-6">
-                <label for="middleName">Middle name</label>
+                <label>Middle name</label>
                 <div class="input-group">
                     <input type="text" class="form-control" v-model="userDetails.middle_name" placeholder="Middle name">
                 </div>
             </div>
         </div>
 
-        <PleaseWaitLoaderVue v-bind:message="loadingMessage" />
+        <div class="row mt-4">
+            <div class="col">
+                <PleaseWaitLoaderVue v-if="loadingStatus" v-bind:message="loadingMessage" />
+                <button v-if="!loadingStatus" @click="updateDetails" class="btn btn-primary d-block shadow-sm">Update</button>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -48,24 +53,34 @@ export default {
     ],
 
     created() {
-        axios.get(`/api/user/${this.userId}`)
-            .then((response)=>{
-                this.userDetails = response.data
-            })
-            .catch((err)=>{
-
-            });
-
+        this.userDetails = this.authDetails
     },
+
     data() {
         return {
-            userDetails: {}
+            userDetails: {},
+            loadingStatus: false
+        }
+    },
+
+    methods: {
+        updateDetails() {
+            this.loadingStatus = true
+
+
+
+
+
+            this.loadingStatus = false
         }
     },
 
     computed: {
         loadingMessage() {
-            return "Loading details"
+            return "Updating details"
+        },
+        authDetails() {
+            return this.$store.getters['auth/user']
         }
     }
 }
diff --git a/resources/js/store/store.js b/resources/js/store/store.js
index 338dca8..f9ba0ed 100644
--- a/resources/js/store/store.js
+++ b/resources/js/store/store.js
@@ -12,7 +12,7 @@ const store = new Vuex.Store({
     modules: {
         // ES5 style
         auth: auth,
-        // ES6 style (only one propery if imported value is same name with property)
+        // ES6 style (only one property if imported value is same name with property)
         posts,
         friends
 
@@ -20,4 +20,4 @@ const store = new Vuex.Store({
 })
 
 // Store initialize
-export default store 
\ No newline at end of file
+export default store