diff --git a/index.html b/index.html
index 24daace..22262b4 100644
--- a/index.html
+++ b/index.html
@@ -678,6 +678,8 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            flex-direction: column;
+            gap: 0.24rem;
             flex: 0 0 auto;
             color: rgba(var(--text-primary-rgb), 0.94);
             cursor: pointer;
@@ -692,6 +694,31 @@
             font-size: 0.95rem;
             line-height: 1;
         }
+        #app-bottom-nav .nav-label {
+            display: none;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.62rem;
+            font-weight: 500;
+            line-height: 1.18;
+        }
+        #app-bottom-nav .nav-tab.is-active::after {
+            display: block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.62rem;
+            font-weight: 500;
+            line-height: 1.18;
+            content: "";
+        }
+        #app-bottom-nav #nav-planner.is-active::after { content: "Planer"; }
+        #app-bottom-nav #nav-recipes.is-active::after { content: "Katalog"; }
+        #app-bottom-nav #nav-pantry.is-active::after { content: "Spiżarnia"; }
+        #app-bottom-nav #nav-shopping.is-active::after { content: "Zakupy"; }
         #app-bottom-nav .nav-tab:hover,
         #app-bottom-nav .nav-action:hover {
             transform: translateY(-1px);
@@ -699,8 +726,9 @@
             background: var(--hover-overlay) !important;
         }
         #app-bottom-nav .nav-tab.is-active {
-            width: 2.6rem;
-            height: 2.6rem;
+            width: min(100%, 5.2rem);
+            height: 2.82rem;
+            padding: 0.34rem 0.28rem 0.3rem;
             color: rgb(var(--text-primary-rgb));
             background: rgba(var(--overlay-rgb), 0.38) !important;
             border-radius: 1.05rem;
@@ -708,6 +736,12 @@
                 inset 0 1px 0 rgba(255, 255, 255, 0.08),
                 inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
         }
+        #app-bottom-nav .nav-tab.is-active .nav-label {
+            display: none;
+        }
+        #app-bottom-nav .nav-tab.is-active i {
+            font-size: 0.8rem;
+        }
         .dark #app-bottom-nav .nav-tab.is-active {
             color: #fff;
             background: rgba(0, 0, 0, 0.42) !important;
@@ -743,10 +777,17 @@
                 border-radius: 1.28rem;
             }
             #app-bottom-nav .nav-tab.is-active {
-                width: 2.4rem;
-                height: 2.4rem;
+                width: min(100%, 4.4rem);
+                height: 2.65rem;
+                padding: 0.3rem 0.22rem 0.27rem;
                 border-radius: 0.96rem;
             }
+            #app-bottom-nav .nav-label {
+                font-size: 0.56rem;
+            }
+            #app-bottom-nav .nav-tab.is-active::after {
+                font-size: 0.56rem;
+            }
         }
 
         /* Planner and common interactive surfaces */
@@ -792,7 +833,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260417-svg7';
+        const APP_ASSET_VERSION = '20260421-nav-labels';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
diff --git a/js/ui/bottomNav.js b/js/ui/bottomNav.js
index e1f35c3..edaa4cf 100644
--- a/js/ui/bottomNav.js
+++ b/js/ui/bottomNav.js
@@ -5,21 +5,25 @@ export function getBottomNavHTML() {
             <div class="nav-slot">
                 <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
                     <i class="far fa-calendar-alt" aria-hidden="true"></i>
+                    <span class="nav-label">Planer</span>
                 </button>
             </div>
             <div class="nav-slot">
-                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
                     <i class="fas fa-search" aria-hidden="true"></i>
+                    <span class="nav-label">Katalog</span>
                 </button>
             </div>
             <div class="nav-slot">
                 <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
                     <i class="fas fa-warehouse" aria-hidden="true"></i>
+                    <span class="nav-label">Spiżarnia</span>
                 </button>
             </div>
             <div class="nav-slot" style="position:relative;">
                 <button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
                     <i class="fas fa-cart-shopping" aria-hidden="true"></i>
+                    <span class="nav-label">Zakupy</span>
                 </button>
             </div>
         </div>
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index 260e0f9..7ca91c9 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -74,8 +74,7 @@ export function getMealPlannerHTML() {
     return `
     <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[rgb(var(--app-bg-rgb))] z-10">
         <div id="planner-cal-bar" class="shrink-0 bg-[rgb(var(--app-bg-rgb))] border-b border-[rgb(var(--card-strong-rgb))] mt-3 relative z-10">
-            <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
-                <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
+            <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-end gap-3 min-w-0">
                 ${createCalendarTopbarHTML({
         todayId: 'cal-go-today',
         wrapperClass: 'flex shrink-0 items-center justify-end',
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index f5a7af8..c75fa38 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -174,9 +174,7 @@ export function getPantryHTML() {
         <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
             <div class="pointer-events-auto relative z-[1] w-full">
                 <div id="pantry-topbar" class="relative min-h-12">
-                    <div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
-                        <h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
-
+                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
                         <div id="pantry-horizon-wrap" class="relative shrink">
                             <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
                                 <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 7f1b4a1..176df36 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -115,9 +115,7 @@ export function getRecipeListHTML() {
             <div class="pointer-events-auto relative z-[1] w-full">
                 <div id="recipe-topbar" class="relative min-h-12">
 
-                    <div id="recipe-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
-                        <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>
-
+                    <div id="recipe-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
                         <div id="recipe-filter-wrap" class="relative shrink-0">
                             <button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
                                 <i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js
index 5a0393a..aaaee77 100644
--- a/js/views/ShoppingList.js
+++ b/js/views/ShoppingList.js
@@ -123,8 +123,7 @@ export function getShoppingListHTML() {
         <div class="shrink-0 px-4 pt-5 pb-0">
 
             <!-- title row + pill + bought button (position:relative anchors the popups) -->
-            <div class="flex items-center gap-2 mb-4" style="position:relative;">
-                <h1 class="flex-1 text-[18px] font-bold" style="color:rgb(var(--text-emphasis-rgb));">Lista zakupów</h1>
+            <div class="flex items-center justify-end gap-2 mb-4" style="position:relative;">
                 <button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
                     <span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
                     <i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>