diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 1343b32e..f5661ffa 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -40,7 +40,7 @@ onMounted(() => {
           <CourseSessionNavigation />
         </div>
 
-        <div class="flex items-stretch justify-start space-x-8">
+        <div class="flex items-stretch justify-start gap-2 lg:gap-4">
           <router-link
             v-if="hasMediaLibraryMenu"
             :to="