diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index f942babc..e66a645a 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("");
@@ -26,24 +21,147 @@
     const languages = ref([
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
+        { name: "Français", code: "fr" },
+        { name: "Deutsch", code: "de" },
     ]);
 
     // Logic to change the language of the website to the selected language
     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
@@ -65,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>
@@ -107,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"
@@ -121,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
@@ -188,4 +351,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 a1a699e5..d2777496 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -1,3 +1,20 @@
 {
-    "welcome": "Willkommen"
+    "welcome": "Willkommen",
+    "student": "schüler",
+    "teacher": "lehrer",
+    "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"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index c75bfc5d..aa02bd4a 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -2,8 +2,19 @@
     "welcome": "Welcome",
     "student": "student",
     "teacher": "teacher",
-    "assignments": "assignments",
-    "classes": "classes",
-    "discussions": "discussions",
-    "logout": "log out"
+    "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": "login",
+    "translate": "translate"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 86fe964d..8a8f3137 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -1,3 +1,20 @@
 {
-    "welcome": "Bienvenue"
+    "welcome": "Bienvenue",
+    "student": "élève",
+    "teacher": "enseignant",
+    "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"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 97ec9b49..861ba89f 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -2,8 +2,19 @@
     "welcome": "Welkom",
     "student": "leerling",
     "teacher": "leerkracht",
-    "assignments": "opdrachten",
-    "classes": "klassen",
-    "discussions": "discussies",
-    "logout": "log uit"
+    "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": "inloggen",
+    "translate": "vertalen"
 }
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>