diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
new file mode 100644
index 0000000..935c6c8
--- /dev/null
+++ b/frontend/src/components/MenuBar.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span> n/A {{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import Menubar from 'primevue/menubar';
+
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home',
+        route: '/'
+    },
+    {
+        label: 'Student',
+        icon: 'pi pi-graduation-cap',
+        route: '/Student'
+    },
+    {
+        label: 'Login',
+        icon: 'pi pi-graduation-cap',
+        route: '/Login'
+    },
+    {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        items: [
+            {
+                label: 'Components',
+                icon: 'pi pi-bolt'
+            },
+            {
+                label: 'Blocks',
+                icon: 'pi pi-server'
+            },
+            {
+                label: 'UI Kit',
+                icon: 'pi pi-pencil'
+            },
+            {
+                label: 'Templates',
+                icon: 'pi pi-palette',
+                items: [
+                    {
+                        label: 'Apollo',
+                        icon: 'pi pi-palette'
+                    },
+                    {
+                        label: 'Ultima',
+                        icon: 'pi pi-palette'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Contact',
+        icon: 'pi pi-envelope'
+    }
+]);
+</script>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index dfb1020..77466ef 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -59,7 +59,6 @@
   };
   </script>
 
-
   <style>
   @media (min-width: 1024px) {
     .about {