diff --git a/front-end-mockup/components/NavigationMenuComponent.vue b/front-end-mockup/components/NavigationMenuComponent.vue
new file mode 100644
index 0000000..aaf7ad8
--- /dev/null
+++ b/front-end-mockup/components/NavigationMenuComponent.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="flex flex-row justify-between text-4xl bg-slate-500 py-8 px-8 pb-16">
+   
+            <button>
+                <Icon icon="mdi:cards-heart" />
+            </button>
+
+            <button>
+                <Icon icon="clarity:chat-bubble-solid" />
+            </button>
+            <button>
+                <Icon icon="charm:cards" />
+
+            </button>
+            <button>
+                <Icon icon="material-symbols:person" />
+            </button>
+        
+    
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Icon } from '@iconify/vue';
+
+</script>
+
+<style>
+  
+
+
+
+</style>
\ No newline at end of file
diff --git a/front-end-mockup/src/router/index.js b/front-end-mockup/src/router/index.js
index 4fc7261..0dc5593 100644
--- a/front-end-mockup/src/router/index.js
+++ b/front-end-mockup/src/router/index.js
@@ -1,58 +1,59 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import ProfileView from '../views/ProfileView.vue';
-import MessagesListing from '../views/MessagesListingView.vue';
-import DatePickerView from '../views/DatePickerView.vue';
-import GenderPicker from '../views/GenderPickerView.vue'
-import InterestsView from '../views/InterestsView.vue'
-import SignUpView from '../views/SignUpView.vue';
-import RegisterView from '../views/RegisterView.vue';
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+import ProfileView from "../views/ProfileView.vue";
+import MessagesListing from "../views/MessagesListingView.vue";
+import DatePickerView from "../views/DatePickerView.vue";
+import GenderPicker from "../views/GenderPickerView.vue";
+import InterestsView from "../views/InterestsView.vue";
+import SignUpView from "../views/SignUpView.vue";
+import RegisterView from "../views/RegisterView.vue";
 
-const routes = [{
-        path: '/',
-        name: 'Home',
-        component: HomeView
-    },
-    {
-        path: '/profile',
-        name: 'Profile',
-        component: ProfileView,
-    },
-    {
-        path: '/sign-up',
-        name: 'SignUp',
-        component: SignUpView,
-    },
-    {
-        path: '/gender-picker',
-        name: 'GenderPicker',
-        component: GenderPicker
-    },
-    {
-        path: '/datepicker',
-        name: 'datepicker',
-        component: DatePickerView,
-    },
-    {
-        path: '/interests',
-        name: 'Interests',
-        component: InterestsView
-    },
-    {
-        path: '/messages',
-        name: 'messages',
-        component: MessagesListing
-    },
-    {
-        path: '/register',
-        name: 'signuppage',
-        component: RegisterView
-    },
-]
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: HomeView,
+  },
+  {
+    path: "/profile",
+    name: "Profile",
+    component: ProfileView,
+  },
+  {
+    path: "/sign-up",
+    name: "SignUp",
+    component: SignUpView,
+  },
+  {
+    path: "/gender-picker",
+    name: "GenderPicker",
+    component: GenderPicker,
+  },
+  {
+    path: "/datepicker",
+    name: "datepicker",
+    component: DatePickerView,
+  },
+  {
+    path: "/interests",
+    name: "Interests",
+    component: InterestsView,
+  },
+  {
+    path: "/messages",
+    name: "messages",
+    component: MessagesListing,
+  },
+  {
+    path: "/register",
+    name: "signuppage",
+    component: RegisterView,
+  },
+];
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
-    routes
-})
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
 
-export default router
\ No newline at end of file
+export default router;
diff --git a/front-end-mockup/src/views/InterestsView.vue b/front-end-mockup/src/views/InterestsView.vue
index ed368c5..f1f63e8 100644
--- a/front-end-mockup/src/views/InterestsView.vue
+++ b/front-end-mockup/src/views/InterestsView.vue
@@ -17,16 +17,19 @@
         <p class="group-[.selectedInterest]:text-primary float-left ml-1">{{button.name}}</p>
       </button>
     </div>
-
-
     <button class="btn-continue mb-1" :disabled="totalSelected < 5">Finish</button>
     <p class="mb-4">{{ submitButtonCaption }}</p>
   </div>
+
+
+  <NavigationMenu />
 </template>
 
 <script setup>
 import { Icon } from '@iconify/vue';
 import { ref } from 'vue';
+import NavigationMenu from "./NavigationMenuComponent.vue";
+
 
 const buttons = ref([
     {