I found part of the bug for mobile (the empty space on the side) - Still need to fix the profile picture and social media icons (as they create space).

Move the language button and its logic.

Modify the sidebar (add navigation buttons for mobile).

Fix the display bug for the Subscription list.

src/views/creators/CreatorBanner.vue

@@ -27,6 +27,7 @@
         </div>
       </div>
       <div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
+    
       <!--Banner-->
       <div class="relative">
         <div>

src/views/creators/CreatorPage.vue

@@ -8,7 +8,7 @@
     </div>
     
     <div class="max-w-[800px] mx-auto">
-      <div class="w-full h-full mx-1">
+      <div class="w-full h-full ">
         <content-list :creator-id="creator.id"
                       :contents="contents"
         ></content-list>

src/views/creators/SubscriptionList.vue

@@ -9,9 +9,9 @@ const subscriptionStore = useSubscriptionStore()
   <template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
     <template v-for="subscription in subscriptionStore.subscriptions">
 
-      <RouterLink :to="`/@${subscription.creatorName}`">
+      <RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
 
-        <div class="flex items-center content-center font-sans font-semibold pt-2">
+        <div class="flex items-center content-center font-sans font-semibold pt-2 ">
           <img :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
                alt="Profile Image"
                class="rounded-full mx-2"
@@ -27,7 +27,7 @@ const subscriptionStore = useSubscriptionStore()
 
   <template v-else>
     <slot>
-      <span>Placeholder when there are no subscriptions</span>
+      <span>No subscriptions</span>
     </slot>
   </template>
 

src/views/creators/banner/bannerlower/BannerActionsSm.vue

@@ -9,12 +9,14 @@
         <!--        Logo-Name-Followers-->
         <div class="flex flex-row relative z-20">
           <div>
-            <img
+            <!-- bug space-->
-                class="rounded-full border-solid border-2 -mt-4  max-w-[80px] h-auto ml-2"
+<!--            <img-->
-                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+<!--                -->
-                alt="Profile Picture"
+<!--                class="rounded-full border-solid border-2 -mt-4  max-w-[80px] h-auto ml-2"-->
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+<!--                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
-            />
+<!--                alt="Profile Picture"-->
+<!--                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
+<!--            />-->
           </div>
 
           <div class="flex flex-column text-white capitalize px-2 mt-1">

src/views/main/Header.vue

@@ -74,7 +74,8 @@
             class="flex flex-row justify-center"
             @click="feedHandler"
         >
-          <v-icon>mdi-television</v-icon>
+          <img src="/images/hutopymedia/icons/feedfollow.svg" alt="feed follow icon"
+               style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;" />
         </v-btn>
         <v-btn
             variant="plain"
@@ -92,14 +93,6 @@
         <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
       </template>
 
-      <v-btn
-          variant="text"
-          class="p-0 mx-0 min-w-0"
-          @click="toggleLanguage"
-      >
-        {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
-      </v-btn>
-
       <div class="text-center">
         <v-menu open-on-click>
           <template v-slot:activator="{ props }">
@@ -168,10 +161,8 @@ import { useRouter } from 'vue-router';
 import { useSideBarStore } from '@/stores/sideBarStore.js';
 import { useUserStore } from "@/stores/userStore.js";
 import { useAuthStore } from "@/stores/authStore.js";
-import { useI18n } from 'vue-i18n';
 import { useDisplay } from 'vuetify';
 
-const { locale } = useI18n();
 const authStore = useAuthStore();
 const userStore = useUserStore();
 const sideBarStore = useSideBarStore();
@@ -186,9 +177,6 @@ watch(smAndDown, (val) => {
   isSmallScreen.value = val;
 });
 
-let selectedLanguage = ref(locale.value);
-initializeLocale();
-
 const onSearch = () => {
   const query = searchQuery.value.trim();
   if (!query) {
@@ -228,19 +216,6 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });
-
-function initializeLocale(){
-  const preferredLocale = localStorage.getItem('preferredLocale');
-  selectedLanguage = ref(preferredLocale === null ? locale.value : preferredLocale);
-  locale.value = selectedLanguage.value;
-}
-
-function toggleLanguage() {
-  const lang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
-  locale.value = lang;
-  selectedLanguage.value = lang;
-  localStorage.setItem('preferredLocale', lang);
-}
 </script>
 
 <style scoped>

src/views/main/SideBar.vue

@@ -1,37 +1,115 @@
 <script setup>
 import SiteMenu from "@/views/main/SiteMenu.vue";
 import SubscriptionList from "@/views/creators/SubscriptionList.vue";
-import {useAuthStore} from "@/stores/authStore.js";
+import { useAuthStore } from "@/stores/authStore.js";
+import { useRouter } from 'vue-router';
+import { ref } from "vue";
+import { useI18n } from 'vue-i18n';
 
-const authStore = useAuthStore()
+const { locale } = useI18n();
+const router = useRouter();
+const selectedLanguage = ref(locale.value);
+
+const explorerHandler = () => {
+  router.push('/explorer');
+};
+
+const feedHandler = () => {
+  router.push('/feed');
+};
+
+function initializeLocale() {
+  const preferredLocale = localStorage.getItem('preferredLocale');
+  selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale;
+  locale.value = selectedLanguage.value;
+}
+
+function toggleLanguage() {
+  const lang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
+  locale.value = lang;
+  selectedLanguage.value = lang;
+  localStorage.setItem('preferredLocale', lang);
+}
+
+const authStore = useAuthStore();
+
+initializeLocale();
 </script>
 
 <template>
-  <aside class="relative h-full overflow-y-auto custom-scrollbar">
+  <nav class="flex flex-col h-full overflow-y-auto custom-scrollbar">
+    <div class="mt-16"></div>
+    
 
-    <nav class="h-full grid grid-rows-[60px_1fr_auto]">
+    <div class="flex justify-center py-3">
-      <div></div>
+      <v-btn v-if="authStore.isAuthenticated" variant="plain" class="p-8" @click="feedHandler">
+        <img src="/images/hutopymedia/icons/feedfollow.svg" alt="feed follow icon"
+             style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;" />
+      </v-btn>
+      <v-btn variant="plain" class="p-8" @click="explorerHandler">
+        <v-icon style="font-size: 28px;">mdi-earth</v-icon>
+      </v-btn>
+      <v-btn
+          variant="text"
+          class="p-0 mx-0 min-w-0"
+          @click="toggleLanguage"
+      >
+        {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
+      </v-btn>
+    </div>
+    <div class="border border-solid border-1"></div>
 
-      <div v-if="authStore.isAuthenticated" class="pt-4 px-5">
-         {{ $t('sidebar.subscriptionTitle') }}
-        <subscription-list>
-          <template v-slot:default>
-            <span>Aucun abonnement</span>
-          </template>
-        </subscription-list>
-      </div>
-      <div v-else>        
-      </div>
 
-      <div class="border-t w-full py-10">
+    <div v-if="authStore.isAuthenticated" class="flex-grow px-5 py-4">
-        <SiteMenu></SiteMenu>
+     <div class="font-bold">  {{ $t('sidebar.subscriptionTitle') }}</div>       
-      </div>
+      <div v-if="authStore.isAuthenticated" class="flex-grow px-5">
+    </div>
+       
+      <subscription-list>
+        <template v-slot:default>
+          <span v-if="subscriptionListIsEmpty">Aucun abonnement</span>
+        </template>
+      </subscription-list>
+    </div>
+    
+    <div v-else class="flex-grow px-5 py-4 flex justify-center font-bold ">      
+      <span>Connectez-vous</span>
+    </div>
 
-    </nav>
+    
-  </aside>
+    <div class="border-t w-full py-10 mt-auto">
+      <SiteMenu></SiteMenu>
+    </div>
+  </nav>
 </template>
 
+
 <style scoped>
+nav {
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin; 
+  scrollbar-color: #903175 #f1f1f1;
+}
+
+/* Chrome, Safari) */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #903175;
+  border-radius: 10px;
+  border: 2px solid #f1f1f1;
+}
 
 h2 {
   @apply font-sans font-bold ml-2;
@@ -40,10 +118,5 @@ h2 {
 aside {
   @apply relative;
 }
-
-.custom-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: #903175 #f1f1f1;
-}
-
 </style>
+