diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index f47d32c..6413f2d 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -48,88 +48,7 @@
                 <div class="navbar-collapse collapse">
                     <ul class="navbar-nav navbar-align">
                         <Notifications :notifications="notifications"/>
-                        <li class="nav-item dropdown">
-                            <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
-                                <div class="position-relative">
-                                    <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
-                                </div>
-                            </a>
-                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
-                                 aria-labelledby="messagesDropdown">
-                                <div class="dropdown-menu-header">
-                                    <div class="position-relative">
-                                        4 New Messages
-                                    </div>
-                                </div>
-                                <div class="list-group">
-                                    <a href="#" class="list-group-item">
-                                        <div class="row g-0 align-items-center">
-                                            <div class="col-2">
-                                                <!--<img src="/static/assets/img/avatars/avatar-5.png"
-                                                     class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
-                                            </div>
-                                            <div class="col-10 pl-2">
-                                                <div class="text-dark">Vanessa Tucker</div>
-                                                <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
-                                                    tortor.
-                                                </div>
-                                                <div class="text-muted small mt-1">15m ago</div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <a href="#" class="list-group-item">
-                                        <div class="row g-0 align-items-center">
-                                            <div class="col-2">
-                                                <!--<img src="/static/assets/img/avatars/avatar-2.png"
-                                                     class="avatar img-fluid rounded-circle" alt="William Harris">-->
-                                            </div>
-                                            <div class="col-10 pl-2">
-                                                <div class="text-dark">William Harris</div>
-                                                <div class="text-muted small mt-1">Curabitur ligula sapien euismod
-                                                    vitae.
-                                                </div>
-                                                <div class="text-muted small mt-1">2h ago</div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <a href="#" class="list-group-item">
-                                        <div class="row g-0 align-items-center">
-                                            <div class="col-2">
-                                                <!--<img src="/static/assets/img/avatars/avatar-4.png"
-                                                     class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
-                                            </div>
-                                            <div class="col-10 pl-2">
-                                                <div class="text-dark">Christina Mason</div>
-                                                <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
-                                                </div>
-                                                <div class="text-muted small mt-1">4h ago</div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                   <!-- {% for messege in top_messages %}-->
-                                    <a href="#" class="list-group-item">
-                                        <div class="row g-0 align-items-center">
-                                            <div class="col-2">
-                                                <!--<img src="/static/assets/img/avatars/avatar-3.png"
-                                                     class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
-                                            </div>
-                                            <div class="col-10 pl-2">
-                                                <div class="text-dark">Sharon Lessman</div>
-                                                <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
-                                                    posuere ac,
-                                                    mattis non.
-                                                </div>
-                                                <div class="text-muted small mt-1">5h ago</div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <!--{% endfor %}-->
-                                </div>
-                                <div class="dropdown-menu-footer">
-                                    <a href="#" class="text-muted">Show all messages</a>
-                                </div>
-                            </div>
-                        </li>
+                        <Messages :messages="messages"/>
                         <li class="nav-item dropdown">
                             <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
                                data-toggle="dropdown">
@@ -198,22 +117,21 @@
 import {mapGetters, mapMutations, mapState} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 import Notifications from "@/components/Notifications.vue";
+import Messages from "@/components/Messages.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        Messages,
         Notifications,
         ...BIcons
     },
     computed: {
-        //...mapState(['notifications']),
+        ...mapState(['messages']),
         ...mapGetters(['notifications']),
         username() {
             return this.$route.params.username
         },
-        top_notifications() {
-            return this.notifications.slice(0, 5)
-        },
     },
     methods: {
         ...mapMutations(['logout'])
diff --git a/frontend/src/components/Messages.vue b/frontend/src/components/Messages.vue
new file mode 100644
index 0000000..99e880b
--- /dev/null
+++ b/frontend/src/components/Messages.vue
@@ -0,0 +1,111 @@
+<template>
+    <li class="nav-item dropdown">
+        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
+            <div class="position-relative">
+                <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
+            </div>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
+             aria-labelledby="messagesDropdown">
+            <div class="dropdown-menu-header">
+                <div class="position-relative">
+                    4 New Messages
+                </div>
+            </div>
+            <div class="list-group">
+                <a href="#" class="list-group-item">
+                    <div class="row g-0 align-items-center">
+                        <div class="col-2">
+                            <!--<img src="/static/assets/img/avatars/avatar-5.png"
+                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
+                        </div>
+                        <div class="col-10 pl-2">
+                            <div class="text-dark">Vanessa Tucker</div>
+                            <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
+                                tortor.
+                            </div>
+                            <div class="text-muted small mt-1">15m ago</div>
+                        </div>
+                    </div>
+                </a>
+                <a href="#" class="list-group-item">
+                    <div class="row g-0 align-items-center">
+                        <div class="col-2">
+                            <!--<img src="/static/assets/img/avatars/avatar-2.png"
+                                 class="avatar img-fluid rounded-circle" alt="William Harris">-->
+                        </div>
+                        <div class="col-10 pl-2">
+                            <div class="text-dark">William Harris</div>
+                            <div class="text-muted small mt-1">Curabitur ligula sapien euismod
+                                vitae.
+                            </div>
+                            <div class="text-muted small mt-1">2h ago</div>
+                        </div>
+                    </div>
+                </a>
+                <a href="#" class="list-group-item">
+                    <div class="row g-0 align-items-center">
+                        <div class="col-2">
+                            <!--<img src="/static/assets/img/avatars/avatar-4.png"
+                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
+                        </div>
+                        <div class="col-10 pl-2">
+                            <div class="text-dark">Christina Mason</div>
+                            <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
+                            </div>
+                            <div class="text-muted small mt-1">4h ago</div>
+                        </div>
+                    </div>
+                </a>
+                <!-- {% for messege in top_messages %}-->
+                <a href="#" class="list-group-item">
+                    <div class="row g-0 align-items-center">
+                        <div class="col-2">
+                            <!--<img src="/static/assets/img/avatars/avatar-3.png"
+                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
+                        </div>
+                        <div class="col-10 pl-2">
+                            <div class="text-dark">Sharon Lessman</div>
+                            <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
+                                posuere ac,
+                                mattis non.
+                            </div>
+                            <div class="text-muted small mt-1">5h ago</div>
+                        </div>
+                    </div>
+                </a>
+                <!--{% endfor %}-->
+            </div>
+            <div class="dropdown-menu-footer">
+                <a href="#" class="text-muted">Show all messages</a>
+            </div>
+        </div>
+    </li>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "Messages",
+    components: {
+        ...BIcons
+    },
+    props: {
+        messages: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        top_messages() {
+            return this.messages.slice(0, 4);
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index 1c8daab..329f2c5 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -54,7 +54,12 @@ export default {
     components: {
         ...BIcons
     },
-    props: ['notifications'],
+    props: {
+        notifications: {
+            type: Array,
+            default: () => []
+        }
+    },
     computed: {
         top_notifications() {
             return this.notifications.sort((a, b) => {
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 7e51f9e..871da94 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -13,6 +13,7 @@ export default createStore({
         friends: [],
         item_map: {},
         //notifications: [],
+        messages: [],
         resolver: new FallBackResolver(),
         unreachable_neighbors: new NeighborsCache(),
     },