diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 441268e7..d7899250 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -97,6 +97,15 @@ body {
     padding-left: 10px;
 }
 
+.memberPage {
+    padding: 20px;
+}
+
+.memberPage h6 {
+    padding-top: 15px;
+    padding-left: 35px;
+}
+
 /******************** Sidebar CSS *************/
 
 #sidebarNav {
diff --git a/pages/Messenger/members.vue b/pages/Messenger/members.vue
index dd37837f..f89052a4 100644
--- a/pages/Messenger/members.vue
+++ b/pages/Messenger/members.vue
@@ -1,21 +1,37 @@
 <template>
     <div>
         <messengermenu />
-
-        
+        <v-row>
+            <v-col cols="8"><v-toolbar color="transparent" title="Members"></v-toolbar></v-col>
+            <v-col cols="4"><addaddresses /></v-col>
+        </v-row>
+        <v-row class="memberPage">
+            <v-col cols="3">
+                <a href="">
+                    <v-avatar size="180">
+                        <v-img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"></v-img>
+                    </v-avatar>
+                    <h6>Member name</h6>
+                </a>
+            </v-col>
+        </v-row>
     </div>
 </template>
 
 <script>
-import messengermenu from '../../components/Menus/messengermenu.vue'
+    import messengermenu from '../../components/Menus/messengermenu.vue'
+    import addaddresses from '../../components/Content/customers/add-addresses.vue'
 
-export default {
-    components: { messengermenu },
-}
+    export default {
+        components: {
+            messengermenu,
+            addaddresses
+        },
+    }
 </script>
 
 <script setup>
     useHead({
-        title: ''
+        title: 'Members'
     })
 </script>
\ No newline at end of file