diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 5ff76f0d..ed80d7c2 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -9,15 +9,10 @@
 
     const { t, locale } = useI18n();
 
-    // Instantiate variables to use in html to render right
-    // Links and content dependent on the role (student or teacher)
-    const path = "/user";
-
     const role = auth.authState.activeRole;
 
-    //TODO: use authState form services map to get user token
-    const name = "Kurt Cobain";
-    const initials = name
+    const name: string = auth.authState.user!.profile.name!;
+    const initials: string = name
         .split(" ")
         .map((n) => n[0])
         .join("");
@@ -34,18 +29,139 @@
     const changeLanguage = (langCode: string) => {
         locale.value = langCode;
         localStorage.setItem("user-lang", langCode);
-        console.log(langCode);
+    };
+
+    // contains functionality to let the collapsed menu appear and disappear
+    // when the screen size varies
+    const drawer = ref(false);
+
+    // when the user wants to logout, a popup is shown to verify this
+    // if verified, the user should be logged out
+    const performLogout = () => {
+        auth.logout();
     };
 </script>
 
 <template>
     <main>
+        <v-app class="menu_collapsed">
+            <v-app-bar
+                app
+                style="background-color: #f6faf2"
+            >
+                <template v-slot:prepend>
+                    <v-app-bar-nav-icon @click="drawer = !drawer" />
+                </template>
+
+                <v-app-bar-title>
+                    <router-link
+                        to="/user"
+                        class="dwengo_home"
+                    >
+                        <div>
+                            <img
+                                class="dwengo_logo"
+                                :src="dwengoLogo"
+                                style="width: 100px"
+                            />
+                            <p
+                                class="caption"
+                                style="font-size: smaller"
+                            >
+                                {{ t(`${role}`) }}
+                            </p>
+                        </div>
+                    </router-link>
+                </v-app-bar-title>
+
+                <v-spacer></v-spacer>
+
+                <v-menu open-on-hover>
+                    <template v-slot:activator="{ props }">
+                        <v-btn
+                            v-bind="props"
+                            icon
+                            variant="text"
+                        >
+                            <v-icon
+                                icon="mdi-translate"
+                                size="small"
+                                color="#0e6942"
+                            ></v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item
+                            v-for="(language, index) in languages"
+                            :key="index"
+                            @click="changeLanguage(language.code)"
+                        >
+                            <v-list-item-title>{{ language.name }}</v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+
+                <v-btn
+                    @click="performLogout"
+                    text
+                >
+                    <v-tooltip
+                        :text="t('logout')"
+                        location="bottom"
+                    >
+                        <template v-slot:activator="{ props }">
+                            <v-icon
+                                v-bind="props"
+                                icon="mdi-logout"
+                                size="x-large"
+                                color="#0e6942"
+                            />
+                        </template>
+                    </v-tooltip>
+                </v-btn>
+            </v-app-bar>
+
+            <v-navigation-drawer
+                v-model="drawer"
+                app
+            >
+                <v-list>
+                    <v-list-item
+                        to="/user/assignment"
+                        link
+                    >
+                        <v-list-item-content>
+                            <v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item
+                        to="/user/class"
+                        link
+                    >
+                        <v-list-item-content>
+                            <v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item
+                        to="/user/discussion"
+                        link
+                    >
+                        <v-list-item-content>
+                            <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+        </v-app>
+
         <nav class="menu">
             <div class="left">
                 <ul>
                     <li>
                         <router-link
-                            :to="`${path}`"
+                            to="/user"
                             class="dwengo_home"
                         >
                             <img
@@ -67,14 +183,14 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/class`"
+                            to="/user/class"
                             class="menu_item"
                             >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/discussion`"
+                            to="/user/discussion"
                             class="menu_item"
                             >{{ t("discussions") }}
                         </router-link>
@@ -109,7 +225,11 @@
             </div>
             <div class="right">
                 <li>
-                    <router-link :to="`/login`">
+                    <!-- <v-btn
+                        @click="performLogout"
+                        to="/login"
+                        style="background-color: transparent; box-shadow: none !important"
+                    >
                         <v-tooltip
                             :text="t('logout')"
                             location="bottom"
@@ -123,7 +243,48 @@
                                 ></v-icon>
                             </template>
                         </v-tooltip>
-                    </router-link>
+                    </v-btn> -->
+                    <v-dialog max-width="500">
+                        <template v-slot:activator="{ props: activatorProps }">
+                            <v-btn
+                                v-bind="activatorProps"
+                                style="background-color: transparent; box-shadow: none !important"
+                            >
+                                <v-tooltip
+                                    :text="t('logout')"
+                                    location="bottom"
+                                >
+                                    <template v-slot:activator="{ props }">
+                                        <v-icon
+                                            v-bind="props"
+                                            icon="mdi-logout"
+                                            size="x-large"
+                                            color="#0e6942"
+                                        >
+                                        </v-icon>
+                                    </template>
+                                </v-tooltip>
+                            </v-btn>
+                        </template>
+
+                        <template v-slot:default="{ isActive }">
+                            <v-card :title="t('logoutVerification')">
+                                <v-card-actions>
+                                    <v-spacer></v-spacer>
+
+                                    <v-btn
+                                        :text="t('cancel')"
+                                        @click="isActive.value = false"
+                                    ></v-btn>
+                                    <v-btn
+                                        :text="t('logout')"
+                                        @click="performLogout"
+                                        to="/login"
+                                    ></v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </template>
+                    </v-dialog>
                 </li>
                 <li>
                     <v-avatar
@@ -191,4 +352,16 @@
     nav a.router-link-active {
         font-weight: bold;
     }
+
+    @media (max-width: 700px) {
+        .menu {
+            display: none;
+        }
+    }
+
+    @media (min-width: 701px) {
+        .menu_collapsed {
+            display: none;
+        }
+    }
 </style>
diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index 19b98606..956e8b96 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -2,11 +2,21 @@
     "welcome": "Willkommen",
     "student": "schüler",
     "teacher": "lehrer",
-    "assignments": "aufgaben",
-    "classes": "klasses",
-    "discussions": "diskussionen",
+    "assignments": "Aufgaben",
+    "classes": "Klasses",
+    "discussions": "Diskussionen",
     "login": "einloggen",
     "logout": "ausloggen",
+    "cancel": "kündigen",
+    "logoutVerification": "Sind Sie sicher, dass Sie sich abmelden wollen?",
+    "homeTitle": "Unsere Stärken",
+    "homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
+    "homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
+    "innovative": "Innovativ",
+    "researchBased": "Forschungsbasiert",
+    "inclusive": "Inclusiv",
+    "sociallyRelevant": "Gesellschaftlich relevant",
+    "translate": "übersetzen",
     "themes": "Themen",
     "choose-theme": "Wähle ein thema",
     "choose-age": "Alter auswählen",
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 7966251c..cf7a19cb 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -2,11 +2,21 @@
     "welcome": "Welcome",
     "student": "student",
     "teacher": "teacher",
-    "assignments": "assignments",
-    "classes": "classes",
-    "discussions": "discussions",
-    "login": "log in",
+    "assignments": "Assignments",
+    "classes": "Classes",
+    "discussions": "Discussions",
     "logout": "log out",
+    "cancel": "cancel",
+    "logoutVerification": "Are you sure you want to log out?",
+    "homeTitle": "Our strengths",
+    "homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
+    "homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
+    "innovative": "Innovative",
+    "researchBased": "Research-based",
+    "inclusive": "Inclusive",
+    "sociallyRelevant": "Socially relevant",
+    "login": "log in",
+    "translate": "translate",
     "themes": "Themes",
     "choose-theme": "Select a theme",
     "choose-age": "Select age",
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 419aec0d..0b4041a4 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -2,11 +2,21 @@
     "welcome": "Bienvenue",
     "student": "élève",
     "teacher": "enseignant",
-    "assignments": "travails",
-    "classes": "classes",
-    "discussions": "discussions",
+    "assignments": "Travails",
+    "classes": "Classes",
+    "discussions": "Discussions",
     "login": "se connecter",
     "logout": "se déconnecter",
+    "cancel": "annuler",
+    "logoutVerification": "Êtes-vous sûr de vouloir vous déconnecter ?",
+    "homeTitle": "Nos atouts",
+    "homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
+    "homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
+    "innovative": "Innovatif",
+    "researchBased": "Fondé sur la recherche",
+    "inclusive": "Inclusif",
+    "sociallyRelevant": "Socialement pertinent",
+    "translate": "traduire",
     "themes": "Thèmes",
     "choose-theme": "Choisis un thème",
     "choose-age": "Choisis un âge",
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 0ac2c1a2..9f944a5a 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -2,11 +2,21 @@
     "welcome": "Welkom",
     "student": "leerling",
     "teacher": "leerkracht",
-    "assignments": "opdrachten",
-    "classes": "klassen",
-    "discussions": "discussies",
-    "login": "log in",
+    "assignments": "Opdrachten",
+    "classes": "Klassen",
+    "discussions": "Discussies",
     "logout": "log uit",
+    "cancel": "annuleren",
+    "logoutVerification": "Bent u zeker dat u wilt uitloggen?",
+    "homeTitle": "Onze sterke punten",
+    "homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
+    "homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",
+    "innovative": "Innovatief",
+    "researchBased": "Onderzoeksgedreven",
+    "inclusive": "Inclusief",
+    "sociallyRelevant": "Maatschappelijk relevant",
+    "login": "log in",
+    "translate": "vertalen",
     "themes": "Lesthema's",
     "choose-theme": "Kies een thema",
     "choose-age": "Kies een leeftijd",
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index e9d53770..9b419ecd 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -19,6 +19,7 @@
             <p>
                 Your access token for the backend is: <code>{{ auth.authState.user?.access_token }}</code>
             </p>
+            <v-btn to="/user">home</v-btn>
         </div>
 
         <v-btn @click="testAuthenticated">Send test request</v-btn>
diff --git a/frontend/src/views/LoginPage.vue b/frontend/src/views/LoginPage.vue
index a538a80c..90ac3f1d 100644
--- a/frontend/src/views/LoginPage.vue
+++ b/frontend/src/views/LoginPage.vue
@@ -70,6 +70,7 @@
                 You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})
             </p>
             <v-btn @click="performLogout">Logout</v-btn>
+            <v-btn to="/user">home</v-btn>
         </div>
     </main>
 </template>