diff --git a/components/nav/button/Bookmark.vue b/components/nav/button/Bookmark.vue
index eee0c7b60e..d0ee94abf3 100644
--- a/components/nav/button/Bookmark.vue
+++ b/components/nav/button/Bookmark.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:bookmark-line />
+  <NuxtLink
+    to="/bookmarks"
+    :aria-label="$t('nav.bookmarks')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:bookmark-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.bookmarks') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Compose.vue b/components/nav/button/Compose.vue
index 63831c8019..3d9720a882 100644
--- a/components/nav/button/Compose.vue
+++ b/components/nav/button/Compose.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:quill-pen-line />
+  <NuxtLink
+    to="/compose"
+    :aria-label="$t('nav.compose')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:quill-pen-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.compose') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Explore.vue b/components/nav/button/Explore.vue
index 618daafdc9..de67187a56 100644
--- a/components/nav/button/Explore.vue
+++ b/components/nav/button/Explore.vue
@@ -6,10 +6,22 @@ defineProps<{
 }>()
 
 const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+
+const userSettings = useUserSettings()
+const hideLabel = computed(() => getPreferences(userSettings.value, 'hideBottomNavLabel'))
 </script>
 
 <template>
-  <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:compass-3-line />
+  <NuxtLink
+    :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`"
+    :aria-label="$t('nav.explore')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:compass-3-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.explore') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Favorite.vue b/components/nav/button/Favorite.vue
index fee4ebcbdc..f8002b23c5 100644
--- a/components/nav/button/Favorite.vue
+++ b/components/nav/button/Favorite.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:heart-line />
+  <NuxtLink
+    to="/favourites"
+    :aria-label="$t('nav.favourites')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:heart-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Federated.vue b/components/nav/button/Federated.vue
index 878a7370d2..48ae955abe 100644
--- a/components/nav/button/Federated.vue
+++ b/components/nav/button/Federated.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:earth-line />
+  <NuxtLink
+    :to="`/${currentServer}/public`"
+    :aria-label="$t('nav.federated')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:earth-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.federated') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Hashtag.vue b/components/nav/button/Hashtag.vue
index af48d09f46..44bcf97509 100644
--- a/components/nav/button/Hashtag.vue
+++ b/components/nav/button/Hashtag.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:hashtag />
+  <NuxtLink
+    to="/hashtags"
+    :aria-label="$t('nav.hashtags')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:hashtag />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.hashtags') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Home.vue b/components/nav/button/Home.vue
index 0808448155..5c18846653 100644
--- a/components/nav/button/Home.vue
+++ b/components/nav/button/Home.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:home-5-line />
+  <NuxtLink
+    to="/home"
+    :aria-label="$t('nav.home')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:home-5-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.home') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/List.vue b/components/nav/button/List.vue
index 13a961dc03..0f5b00a9df 100644
--- a/components/nav/button/List.vue
+++ b/components/nav/button/List.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -9,9 +13,12 @@ defineProps<{
     to="/lists"
     :aria-label="$t('nav.lists')"
     :active-class="activeClass"
-    flex flex-row items-center place-content-center h-full flex-1
-    class="coarse-pointer:select-none" @click="$scrollToTop"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
   >
-    <div i-ri:list-check />
+    <div aria-hidden="true" i-ri:list-check />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.lists') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Local.vue b/components/nav/button/Local.vue
index 6d1d0a646a..faa97f6384 100644
--- a/components/nav/button/Local.vue
+++ b/components/nav/button/Local.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:group-2-line />
+  <NuxtLink
+    group
+    :to="`/${currentServer}/public/local`"
+    :aria-label="$t('nav.local')" :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:group-2-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.local') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Mention.vue b/components/nav/button/Mention.vue
index ef530c8020..3e0faf8709 100644
--- a/components/nav/button/Mention.vue
+++ b/components/nav/button/Mention.vue
@@ -2,14 +2,23 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
   <NuxtLink
-    to="/conversations" :aria-label="$t('nav.conversations')"
-    :active-class="activeClass" flex flex-row items-center place-content-center h-full
-    flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"
+    to="/conversations"
+    :aria-label="$t('nav.conversations')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
   >
-    <div i-ri:at-line />
+    <div aria-hidden="true" i-ri:at-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>
+      {{ $t('nav.conversations') }}
+    </span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/MoreMenu.vue b/components/nav/button/MoreMenu.vue
index 4c31db3d6c..1a12db2cb0 100644
--- a/components/nav/button/MoreMenu.vue
+++ b/components/nav/button/MoreMenu.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 const model = defineModel<boolean>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -8,12 +10,14 @@ const model = defineModel<boolean>()
     place-content-center h-full flex-1 cursor-pointer
   >
     <button
-      flex items-center place-content-center h-full flex-1 class="select-none"
-      :class="show ? '!text-primary' : ''"
+      flex flex-col items-center place-content-center h-full flex-1 min-w-0
+      class="select-none"
+      :class="[show ? '!text-primary' : null, hideLabel ? null : 'gap-1'].filter(Boolean).join(' ')"
       :aria-label="$t('nav.more_menu')"
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
+      <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.more_menu') }}</span>
     </button>
   </NavBottomMoreMenu>
 </template>
diff --git a/components/nav/button/Notification.vue b/components/nav/button/Notification.vue
index 3e4aa5e70a..5f3dcc9a23 100644
--- a/components/nav/button/Notification.vue
+++ b/components/nav/button/Notification.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
 import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
 
 defineProps<{
@@ -6,15 +7,26 @@ defineProps<{
 }>()
 const { notifications } = useNotifications()
 const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+  <NuxtLink
+    :to="`/notifications/${lastAccessedNotificationRoute}`"
+    :aria-label="$t('nav.notifications')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
     <div flex relative>
-      <div class="i-ri:notification-4-line" text-xl />
+      <div aria-hidden="true" class="i-ri:notification-4-line" text-xl />
       <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
         {{ notifications < 10 ? notifications : '•' }}
       </div>
     </div>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.notifications') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Search.vue b/components/nav/button/Search.vue
index 94b2b79fd4..b0bff8adec 100644
--- a/components/nav/button/Search.vue
+++ b/components/nav/button/Search.vue
@@ -2,10 +2,21 @@
 defineProps<{
   activeClass: string
 }>()
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:search-line />
+  <NuxtLink
+    to="/search"
+    :aria-label="$t('nav.search')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:search-line />
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.search') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/settings/SettingsBottomNav.vue b/components/settings/SettingsBottomNav.vue
index 27ef55e33a..8750845b6b 100644
--- a/components/settings/SettingsBottomNav.vue
+++ b/components/settings/SettingsBottomNav.vue
@@ -69,6 +69,8 @@ function reset() {
 function save() {
   navButtonNamesSetting.value = selectedNavButtonNames.value
 }
+
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -76,18 +78,25 @@ function save() {
     <h2 id="interface-bn" font-medium>
       {{ $t('settings.interface.bottom_nav') }}
     </h2>
+    <SettingsToggleItem
+      :checked="hideLabel"
+      @click="togglePreferences('hideBottomNavLabel')"
+    >
+      {{ $t('settings.interface.bottom_nav_hide_label') }}
+    </SettingsToggleItem>
     <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
       <p id="interface-bn-desc" pb-2>
         {{ $t('settings.interface.bottom_nav_instructions') }}
       </p>
       <!-- preview -->
-      <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14>
+      <div aria-hidden="true" flex="~ wrap" items-center select-settings p-0 pt-1 h-auto>
         <nav
           v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
-          flex="~ 1" items-center justify-center text-xl
+          flex="~ col 1" items-center justify-center text-xl
           scrollbar-hide overscroll-none
         >
           <span :class="availableNavButton.icon" />
+          <span v-if="!hideLabel" text-2.5 text-center>{{ $t(availableNavButton.label) }}</span>
         </nav>
       </div>
 
@@ -103,7 +112,7 @@ function save() {
           :aria-checked="isAdded(name)"
           @click="isAdded(name) ? remove(name) : append(name)"
         >
-          <span :class="icon" />
+          <span aria-hidden="true" :class="icon" />
           {{ label ? $t(label) : 'More menu' }}
         </button>
       </div>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 98f3c3371f..3b0a5dd256 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -32,6 +32,7 @@ export interface PreferencesSettings {
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
   experimentalEmbeddedMedia: boolean
+  hideBottomNavLabel: boolean
 }
 
 export interface UserSettings {
@@ -88,6 +89,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
   experimentalEmbeddedMedia: false,
+  hideBottomNavLabel: false,
 }
 
 export function getDefaultUserSettings(locales: string[]): UserSettings {
diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts
index 0d2a92d972..14f2796745 100644
--- a/composables/settings/storage.ts
+++ b/composables/settings/storage.ts
@@ -43,3 +43,8 @@ export function togglePreferences(key: keyof PreferencesSettings) {
   const flag = usePreferences(key)
   flag.value = !flag.value
 }
+
+export function useHideBottomNavigationLabel() {
+  const userSettings = useUserSettings()
+  return computed(() => getPreferences(userSettings.value, 'hideBottomNavLabel'))
+}
diff --git a/locales/en.json b/locales/en.json
index 20520aa09d..733ac5bb28 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -455,6 +455,7 @@
     },
     "interface": {
       "bottom_nav": "Bottom Navigation",
+      "bottom_nav_hide_label": "Hide bottom labels",
       "bottom_nav_instructions": "Choose your favorite navigation buttons up to five for the bottom navigation. Must include the \"More menu\" button.",
       "color_mode": "Color Mode",
       "dark_mode": "Dark",
diff --git a/locales/es.json b/locales/es.json
index 23f700f1ab..7b40710c57 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -455,6 +455,7 @@
     },
     "interface": {
       "bottom_nav": "Navegación inferior",
+      "bottom_nav_hide_label": "Ocultar etiquetas de navegación",
       "bottom_nav_instructions": "Elige tus botones de navegación favoritos, hasta cinco para la navegación inferior. Debes incluir el botón \"Más opciones\".",
       "color_mode": "Modos de color",
       "dark_mode": "Modo oscuro",