diff --git a/apps/electron-backend-e2e/src/electron-test-fixtures.ts b/apps/electron-backend-e2e/src/electron-test-fixtures.ts
index c0439b37f..fe6dc3f23 100644
--- a/apps/electron-backend-e2e/src/electron-test-fixtures.ts
+++ b/apps/electron-backend-e2e/src/electron-test-fixtures.ts
@@ -654,7 +654,7 @@ export async function saveSettings(page: Page): Promise<void> {
 
 export async function goToDashboard(page: Page): Promise<void> {
     const dashboardLink = page
-        .locator('a.brand[href$="/workspace/dashboard"]')
+        .getByRole('link', { name: 'Dashboard', exact: true })
         .first();
 
     await expect(dashboardLink).toBeVisible();
diff --git a/apps/electron-backend-e2e/src/settings.e2e.ts b/apps/electron-backend-e2e/src/settings.e2e.ts
index 532d62d38..0f5104310 100644
--- a/apps/electron-backend-e2e/src/settings.e2e.ts
+++ b/apps/electron-backend-e2e/src/settings.e2e.ts
@@ -303,10 +303,15 @@ test.describe('Electron Settings', () => {
                     exact: true,
                 })
             ).toHaveCount(0);
-            await expect(secondLaunch.mainWindow.locator('a.brand')).toHaveAttribute(
-                'href',
-                /\/workspace\/sources$/
-            );
+            await expect(
+                secondLaunch.mainWindow.getByRole('link', {
+                    name: 'Sources',
+                    exact: true,
+                })
+            ).toHaveClass(/is-active/);
+            await expect(
+                secondLaunch.mainWindow.locator('button.rail-toggle')
+            ).toBeVisible();
         } finally {
             await closeElectronApp(secondLaunch);
         }
diff --git a/apps/electron-backend-e2e/src/smoke.e2e.ts b/apps/electron-backend-e2e/src/smoke.e2e.ts
index cfd1af80e..87b8d6b70 100644
--- a/apps/electron-backend-e2e/src/smoke.e2e.ts
+++ b/apps/electron-backend-e2e/src/smoke.e2e.ts
@@ -57,6 +57,175 @@ test.describe('Electron App Smoke Test', () => {
         }
     });
 
+    test('@critical @electron expands and collapses the labelled navigation rail', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            const rail = app.mainWindow.locator('.app-rail');
+            const toggle = app.mainWindow.getByRole('button', {
+                name: 'Expand navigation',
+            });
+
+            await expect(
+                app.mainWindow.getByRole('link', {
+                    name: 'Dashboard',
+                    exact: true,
+                })
+            ).toHaveCount(1);
+            await expect(rail.locator('.rail-toggle-icon')).toHaveText(
+                'arrow_drop_down'
+            );
+            await expect(rail.locator('.rail-brand')).toHaveCount(0);
+
+            await toggle.click();
+
+            await expect(
+                app.mainWindow.getByRole('button', {
+                    name: 'Collapse navigation',
+                })
+            ).toBeVisible();
+            await expect(rail.locator('.rail-toggle-icon')).toHaveText(
+                'arrow_right'
+            );
+            await expect(rail.locator('.rail-brand-name')).toHaveText(
+                'IPTVnator'
+            );
+            await expect(
+                rail.locator('.portal-rail-link-label', {
+                    hasText: 'Dashboard',
+                })
+            ).toBeVisible();
+            expect(
+                await app.mainWindow
+                    .getByRole('link', {
+                        name: 'Dashboard',
+                        exact: true,
+                    })
+                    .evaluate((link) => getComputedStyle(link, '::after').right)
+            ).toBe('3px');
+
+            const collapseToggle = app.mainWindow.getByRole('button', {
+                name: 'Collapse navigation',
+            });
+            const toggleBackground = await collapseToggle.evaluate(
+                (button) => getComputedStyle(button).backgroundColor
+            );
+            await collapseToggle.hover();
+            await expect(collapseToggle.locator('.rail-toggle-icon')).toHaveCSS(
+                'transform',
+                'none'
+            );
+            await expect(collapseToggle).toHaveCSS(
+                'background-color',
+                toggleBackground
+            );
+
+            const sourcesLink = app.mainWindow.getByRole('link', {
+                name: 'Sources',
+                exact: true,
+            });
+            const selectionBackground = await sourcesLink.evaluate(() => {
+                const probe = document.createElement('div');
+                probe.style.background = 'var(--app-selection-surface)';
+                document.body.append(probe);
+                const background = getComputedStyle(probe).backgroundColor;
+                probe.remove();
+                return background;
+            });
+            await sourcesLink.hover();
+            await expect(sourcesLink).toHaveCSS(
+                'background-color',
+                selectionBackground
+            );
+            await expect
+                .poll(() =>
+                    sourcesLink.locator('mat-icon').evaluate((icon) => {
+                        const transform = getComputedStyle(icon).transform;
+                        return transform === 'none'
+                            ? 1
+                            : new DOMMatrixReadOnly(transform).a;
+                    })
+                )
+                .toBeCloseTo(2.1, 2);
+            await expect
+                .poll(() =>
+                    sourcesLink
+                        .locator('mat-icon')
+                        .boundingBox()
+                        .then((box) => box?.width ?? Number.POSITIVE_INFINITY)
+                )
+                .toBeLessThanOrEqual(44);
+            await expect(
+                app.mainWindow
+                    .getByRole('link', {
+                        name: 'Dashboard',
+                        exact: true,
+                    })
+                    .locator('mat-icon')
+            ).toHaveCSS('transform', 'none');
+            await expect
+                .poll(() =>
+                    sourcesLink
+                        .locator('.portal-rail-link-label')
+                        .evaluate((label) => {
+                            const transform = getComputedStyle(label).transform;
+                            return transform === 'none'
+                                ? 1
+                                : new DOMMatrixReadOnly(transform).a;
+                        })
+                )
+                .toBe(1);
+
+            const [magnifiedIconBox, sourcesLabelBox] = await Promise.all([
+                sourcesLink.locator('mat-icon').boundingBox(),
+                sourcesLink
+                    .locator('.portal-rail-link-label')
+                    .boundingBox(),
+            ]);
+            expect(magnifiedIconBox).not.toBeNull();
+            expect(sourcesLabelBox).not.toBeNull();
+            expect(
+                (magnifiedIconBox?.x ?? 0) +
+                    (magnifiedIconBox?.width ?? 0)
+            ).toBeLessThanOrEqual(sourcesLabelBox?.x ?? 0);
+
+            await app.mainWindow.emulateMedia({
+                reducedMotion: 'reduce',
+            });
+            await expect(sourcesLink.locator('mat-icon')).toHaveCSS(
+                'transform',
+                'none'
+            );
+            await app.mainWindow.emulateMedia({
+                reducedMotion: 'no-preference',
+            });
+
+            await app.mainWindow
+                .getByRole('button', { name: 'Collapse navigation' })
+                .click();
+
+            await expect(rail.locator('.rail-toggle-icon')).toHaveText(
+                'arrow_drop_down'
+            );
+            await expect(rail.locator('.rail-brand')).toHaveCount(0);
+            await sourcesLink.hover();
+            await expect
+                .poll(() =>
+                    sourcesLink.locator('mat-icon').evaluate((icon) => {
+                        const transform = getComputedStyle(icon).transform;
+                        return transform === 'none'
+                            ? 1
+                            : new DOMMatrixReadOnly(transform).a;
+                    })
+                )
+                .toBeCloseTo(2.1, 2);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
     test('@critical @electron app should render workspace content', async ({ dataDir }) => {
         const app = await launchElectronApp(dataDir);
 
diff --git a/apps/web/src/assets/i18n/ar.json b/apps/web/src/assets/i18n/ar.json
index 4293e33aa..4dcd2b395 100644
--- a/apps/web/src/assets/i18n/ar.json
+++ b/apps/web/src/assets/i18n/ar.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "إظهار القائمة",
+            "COLLAPSE_NAVIGATION": "إخفاء القائمة",
             "RAIL_DASHBOARD": "لوحة التحكم",
             "OPEN_DASHBOARD": "فتح لوحة التحكم",
             "RAIL_SOURCES": "المصادر",
diff --git a/apps/web/src/assets/i18n/ary.json b/apps/web/src/assets/i18n/ary.json
index 4aad181c8..5020df79d 100644
--- a/apps/web/src/assets/i18n/ary.json
+++ b/apps/web/src/assets/i18n/ary.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "وسّع التنقل",
+            "COLLAPSE_NAVIGATION": "طوي التنقل",
             "RAIL_DASHBOARD": "لوحة التحكم",
             "OPEN_DASHBOARD": "حل لوحة التحكم",
             "RAIL_SOURCES": "المصادر",
diff --git a/apps/web/src/assets/i18n/by.json b/apps/web/src/assets/i18n/by.json
index 1e92b244f..93d8d6363 100644
--- a/apps/web/src/assets/i18n/by.json
+++ b/apps/web/src/assets/i18n/by.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Разгарнуць навігацыю",
+            "COLLAPSE_NAVIGATION": "Згарнуць навігацыю",
             "RAIL_DASHBOARD": "Панэль",
             "OPEN_DASHBOARD": "Адкрыць панэль",
             "RAIL_SOURCES": "Крыніцы",
diff --git a/apps/web/src/assets/i18n/de.json b/apps/web/src/assets/i18n/de.json
index 4bb53182e..e26645d52 100644
--- a/apps/web/src/assets/i18n/de.json
+++ b/apps/web/src/assets/i18n/de.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Navigation ausklappen",
+            "COLLAPSE_NAVIGATION": "Navigation einklappen",
             "RAIL_DASHBOARD": "Dashboard",
             "OPEN_DASHBOARD": "Dashboard öffnen",
             "RAIL_SOURCES": "Quellen",
diff --git a/apps/web/src/assets/i18n/el.json b/apps/web/src/assets/i18n/el.json
index 70b2795e3..530692f04 100644
--- a/apps/web/src/assets/i18n/el.json
+++ b/apps/web/src/assets/i18n/el.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Ανάπτυξη πλοήγησης",
+            "COLLAPSE_NAVIGATION": "Σύμπτυξη πλοήγησης",
             "RAIL_DASHBOARD": "Πίνακας ελέγχου",
             "OPEN_DASHBOARD": "Άνοιγμα πίνακα ελέγχου",
             "RAIL_SOURCES": "Πηγές",
diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json
index b77a49418..0a6f02f85 100644
--- a/apps/web/src/assets/i18n/en.json
+++ b/apps/web/src/assets/i18n/en.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Expand navigation",
+            "COLLAPSE_NAVIGATION": "Collapse navigation",
             "RAIL_DASHBOARD": "Dashboard",
             "OPEN_DASHBOARD": "Open dashboard",
             "RAIL_SOURCES": "Sources",
diff --git a/apps/web/src/assets/i18n/es.json b/apps/web/src/assets/i18n/es.json
index 0c4087ff0..ea6466052 100644
--- a/apps/web/src/assets/i18n/es.json
+++ b/apps/web/src/assets/i18n/es.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Ampliar navegación",
+            "COLLAPSE_NAVIGATION": "Contraer navegación",
             "RAIL_DASHBOARD": "Panel",
             "OPEN_DASHBOARD": "Abrir panel",
             "RAIL_SOURCES": "Fuentes",
diff --git a/apps/web/src/assets/i18n/fr.json b/apps/web/src/assets/i18n/fr.json
index 30be779d4..2ff304679 100644
--- a/apps/web/src/assets/i18n/fr.json
+++ b/apps/web/src/assets/i18n/fr.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Développer la navigation",
+            "COLLAPSE_NAVIGATION": "Réduire la navigation",
             "RAIL_DASHBOARD": "Tableau de bord",
             "OPEN_DASHBOARD": "Ouvrir le tableau de bord",
             "RAIL_SOURCES": "Sources",
diff --git a/apps/web/src/assets/i18n/it.json b/apps/web/src/assets/i18n/it.json
index e5f8559a4..e72ae23c3 100644
--- a/apps/web/src/assets/i18n/it.json
+++ b/apps/web/src/assets/i18n/it.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Espandi navigazione",
+            "COLLAPSE_NAVIGATION": "Comprimi navigazione",
             "RAIL_DASHBOARD": "Dashboard",
             "OPEN_DASHBOARD": "Apri dashboard",
             "RAIL_SOURCES": "Sorgenti",
diff --git a/apps/web/src/assets/i18n/ja.json b/apps/web/src/assets/i18n/ja.json
index 9be5c7845..c13528872 100644
--- a/apps/web/src/assets/i18n/ja.json
+++ b/apps/web/src/assets/i18n/ja.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "ナビゲーションを展開",
+            "COLLAPSE_NAVIGATION": "ナビゲーションを折りたたむ",
             "RAIL_DASHBOARD": "ダッシュボード",
             "OPEN_DASHBOARD": "ダッシュボードを開く",
             "RAIL_SOURCES": "ソース",
diff --git a/apps/web/src/assets/i18n/ko.json b/apps/web/src/assets/i18n/ko.json
index 5b35c4905..469977fb9 100644
--- a/apps/web/src/assets/i18n/ko.json
+++ b/apps/web/src/assets/i18n/ko.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "탐색 펼치기",
+            "COLLAPSE_NAVIGATION": "탐색 접기",
             "RAIL_DASHBOARD": "대시보드",
             "OPEN_DASHBOARD": "대시보드 열기",
             "RAIL_SOURCES": "소스",
diff --git a/apps/web/src/assets/i18n/nl.json b/apps/web/src/assets/i18n/nl.json
index 70e472cce..30c3e0626 100644
--- a/apps/web/src/assets/i18n/nl.json
+++ b/apps/web/src/assets/i18n/nl.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Navigatie uitklappen",
+            "COLLAPSE_NAVIGATION": "Navigatie inklappen",
             "RAIL_DASHBOARD": "Dashboard",
             "OPEN_DASHBOARD": "Open dashboard",
             "RAIL_SOURCES": "Bronnen",
diff --git a/apps/web/src/assets/i18n/pl.json b/apps/web/src/assets/i18n/pl.json
index 38fdaea82..d4787cc4a 100644
--- a/apps/web/src/assets/i18n/pl.json
+++ b/apps/web/src/assets/i18n/pl.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Rozwiń nawigację",
+            "COLLAPSE_NAVIGATION": "Zwiń nawigację",
             "RAIL_DASHBOARD": "Pulpit",
             "OPEN_DASHBOARD": "Otwórz pulpit",
             "RAIL_SOURCES": "Źródła",
diff --git a/apps/web/src/assets/i18n/pt.json b/apps/web/src/assets/i18n/pt.json
index a1b75be66..dafc94454 100644
--- a/apps/web/src/assets/i18n/pt.json
+++ b/apps/web/src/assets/i18n/pt.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Expandir navegação",
+            "COLLAPSE_NAVIGATION": "Recolher navegação",
             "RAIL_DASHBOARD": "Dashboard",
             "OPEN_DASHBOARD": "Abrir dashboard",
             "RAIL_SOURCES": "Fontes",
diff --git a/apps/web/src/assets/i18n/ru.json b/apps/web/src/assets/i18n/ru.json
index f043a6b13..171182a76 100644
--- a/apps/web/src/assets/i18n/ru.json
+++ b/apps/web/src/assets/i18n/ru.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Развернуть навигацию",
+            "COLLAPSE_NAVIGATION": "Свернуть навигацию",
             "RAIL_DASHBOARD": "Панель",
             "OPEN_DASHBOARD": "Открыть панель",
             "RAIL_SOURCES": "Источники",
diff --git a/apps/web/src/assets/i18n/tr.json b/apps/web/src/assets/i18n/tr.json
index 577f4ac60..0fb12f3f3 100644
--- a/apps/web/src/assets/i18n/tr.json
+++ b/apps/web/src/assets/i18n/tr.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "Gezinmeyi genişlet",
+            "COLLAPSE_NAVIGATION": "Gezinmeyi daralt",
             "RAIL_DASHBOARD": "Pano",
             "OPEN_DASHBOARD": "Panoyu aç",
             "RAIL_SOURCES": "Kaynaklar",
diff --git a/apps/web/src/assets/i18n/zh.json b/apps/web/src/assets/i18n/zh.json
index e473b0886..b628b35e7 100644
--- a/apps/web/src/assets/i18n/zh.json
+++ b/apps/web/src/assets/i18n/zh.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "展开导航",
+            "COLLAPSE_NAVIGATION": "收起导航",
             "RAIL_DASHBOARD": "仪表盘",
             "OPEN_DASHBOARD": "打开仪表盘",
             "RAIL_SOURCES": "源",
diff --git a/apps/web/src/assets/i18n/zhtw.json b/apps/web/src/assets/i18n/zhtw.json
index b138661e7..f1bde455c 100644
--- a/apps/web/src/assets/i18n/zhtw.json
+++ b/apps/web/src/assets/i18n/zhtw.json
@@ -1046,6 +1046,8 @@
         },
         "SHELL": {
             "BRAND_ALT": "IPTVnator",
+            "EXPAND_NAVIGATION": "展開導覽",
+            "COLLAPSE_NAVIGATION": "收合導覽",
             "RAIL_DASHBOARD": "儀表板",
             "OPEN_DASHBOARD": "開啟儀表板",
             "RAIL_SOURCES": "來源",
diff --git a/docs/architecture/workspace-shell.md b/docs/architecture/workspace-shell.md
index f5a7d14a8..8b37a2350 100644
--- a/docs/architecture/workspace-shell.md
+++ b/docs/architecture/workspace-shell.md
@@ -164,6 +164,26 @@ Rail navigation is also shell-owned:
 3. On dashboard, sources, settings, global search, global favorites, and global
    recent, the shell falls back to the currently selected playlist so provider
    navigation remains available even outside a provider route.
+4. The top disclosure button is not a route. It shows a downward triangle in
+   the default 60px icon rail and a right-pointing triangle when expanded, so
+   the Dashboard destination appears exactly once in the actual link list.
+5. The expanded rail shows the IPTVnator logo/name plus translated labels for
+   every workspace, provider, and settings entry. Language direction controls
+   the rail's `dir` attribute; logical start alignment therefore follows LTR
+   and RTL translations without maintaining separate layouts.
+6. Expanded width is content-driven with lower and upper bounds. Navigation
+   links own the scrollable area while Settings remains visible in the fixed
+   footer.
+7. At the compact shell breakpoint the rail remains horizontal and icon-only;
+   direct attempts to set the expanded model are rejected as well as button
+   clicks.
+8. The rail keeps the standard theme-token surface and selection styling.
+   Hovered entries use the same blue selection surface as the settings
+   navigation. Fine-pointer devices magnify only the hovered icon to 2.1, so a
+   20px icon remains inside its 44px menu slot in both rail states. Neighboring
+   icons, labels, and the disclosure triangle are not transformed;
+   reduced-motion mode disables the remaining transform. Interactive controls
+   remain explicit Electron `no-drag` regions.
 
 Command palette behavior is shell-owned but view-extensible:
 
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html
index 5642a1b9b..f78de8464 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html
@@ -1,4 +1,4 @@
-<nav class="rail-links">
+<nav class="rail-links" [class.is-expanded]="expanded()">
     @for (link of links(); track link.path.join('/')) {
         <a
             class="portal-rail-link nav-item"
@@ -6,15 +6,19 @@
             [routerLinkActive]="activeClass()"
             [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
             [matTooltip]="link.tooltip"
+            [matTooltipDisabled]="expanded()"
             [matTooltipPosition]="'right'"
             [attr.aria-label]="link.tooltip"
             [attr.aria-current]="isActive(link) ? 'page' : null"
             [class.active]="activeClass() === 'active' && isActive(link)"
-            [class.is-active]="
-                activeClass() === 'is-active' && isActive(link)
-            "
+            [class.is-active]="activeClass() === 'is-active' && isActive(link)"
         >
             <mat-icon>{{ resolveIcon(link) }}</mat-icon>
+            @if (expanded()) {
+                <span class="portal-rail-link-label">
+                    {{ link.tooltip }}
+                </span>
+            }
         </a>
     }
 </nav>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
index 802f2e668..59c5b7823 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
@@ -1,3 +1,5 @@
+@use '../../styles/breakpoints' as shell-breakpoints;
+
 :host {
     display: block;
     width: 100%;
@@ -12,11 +14,24 @@
     width: 100%;
 }
 
+.rail-links.is-expanded {
+    align-items: stretch;
+
+    .portal-rail-link {
+        width: 100%;
+        justify-content: flex-start;
+        gap: calc(12px + var(--rail-dock-hover-overhang));
+        padding: 0 12px;
+    }
+}
+
 .portal-rail-link {
     width: 44px;
     height: 44px;
+    box-sizing: border-box;
     padding: 0;
     gap: 0;
+    border: 1px solid transparent;
     border-radius: 14px;
     position: relative;
     display: inline-flex;
@@ -34,19 +49,46 @@
 
     &:hover {
         color: var(--rail-link-hover-color, var(--mat-sys-on-surface));
-        background: var(
-            --rail-link-hover-bg,
-            var(--mat-sys-surface-container)
-        );
+        background: var(--rail-link-hover-bg, var(--mat-sys-surface-container));
     }
 
     mat-icon {
+        position: relative;
+        z-index: 1;
+        transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        will-change: transform;
         font-size: 20px;
         width: 20px;
         height: 20px;
     }
 }
 
+@media (hover: hover) and (pointer: fine) {
+    .portal-rail-link:hover mat-icon {
+        z-index: 3;
+        transform: scale(var(--rail-dock-hover-scale));
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .portal-rail-link mat-icon,
+    .portal-rail-link:hover mat-icon {
+        transition: none;
+        transform: none;
+    }
+}
+
+.portal-rail-link-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 @for $i from 1 through 8 {
     .portal-rail-link:nth-child(#{$i}) {
         animation-delay: #{($i - 1) * 30}ms;
@@ -88,7 +130,7 @@
 .portal-rail-link.active::after {
     content: '';
     position: absolute;
-    right: -4px;
+    right: 3px;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
@@ -97,3 +139,25 @@
     background: var(--rail-link-active-icon, var(--app-selection-color));
     box-shadow: 0 0 10px var(--rail-link-active-glow, var(--app-selection-glow));
 }
+
+@include shell-breakpoints.compact {
+    :host {
+        flex: 0 0 auto;
+        width: auto;
+    }
+
+    .rail-links {
+        flex-direction: row;
+    }
+
+    .rail-links.is-expanded .portal-rail-link {
+        width: 44px;
+        justify-content: center;
+        gap: 0;
+        padding: 0;
+    }
+
+    .portal-rail-link-label {
+        display: none;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.spec.ts
new file mode 100644
index 000000000..2b3a4de9d
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.spec.ts
@@ -0,0 +1,65 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MatTooltip } from '@angular/material/tooltip';
+import { provideRouter } from '@angular/router';
+import { WorkspaceShellRailLinksComponent } from './workspace-shell-rail-links.component';
+
+describe('WorkspaceShellRailLinksComponent', () => {
+    let fixture: ComponentFixture<WorkspaceShellRailLinksComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellRailLinksComponent],
+            providers: [provideRouter([])],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceShellRailLinksComponent);
+        fixture.componentRef.setInput('links', [
+            {
+                icon: 'dashboard',
+                tooltip: 'Dashboard',
+                path: ['/workspace/dashboard'],
+                exact: true,
+            },
+            {
+                icon: 'movie',
+                tooltip: 'Movies',
+                path: ['/workspace/movies'],
+            },
+        ]);
+    });
+
+    it('keeps labels hidden and tooltips enabled in the compact rail', () => {
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelectorAll('.portal-rail-link-label')
+        ).toHaveLength(0);
+        expect(
+            fixture.debugElement
+                .queryAll(By.directive(MatTooltip))[0]
+                .injector.get(MatTooltip).disabled
+        ).toBe(false);
+    });
+
+    it('renders every label and disables redundant tooltips when expanded', () => {
+        fixture.componentRef.setInput('expanded', true);
+        fixture.detectChanges();
+
+        const labels = Array.from(
+            fixture.nativeElement.querySelectorAll('.portal-rail-link-label')
+        ).map((element: Element) => element.textContent?.trim());
+
+        expect(labels).toEqual(['Dashboard', 'Movies']);
+        expect(
+            fixture.nativeElement
+                .querySelector('.rail-links')
+                ?.classList.contains('is-expanded')
+        ).toBe(true);
+        expect(
+            fixture.debugElement
+                .queryAll(By.directive(MatTooltip))[0]
+                .injector.get(MatTooltip).disabled
+        ).toBe(true);
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts
index b961c80ea..e5f38557c 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    input,
+} from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import {
@@ -27,9 +32,12 @@ export class WorkspaceShellRailLinksComponent {
         PortalRailSection | string | null | undefined
     >(null);
     readonly activeClass = input<'active' | 'is-active'>('is-active');
+    readonly expanded = input(false);
 
     resolveIcon(link: PortalRailLink): string {
-        const normalizedPath = link.path.map((segment) => String(segment)).join('/');
+        const normalizedPath = link.path
+            .map((segment) => String(segment))
+            .join('/');
         if (normalizedPath.includes('/workspace/sources')) {
             return 'playlist_play';
         }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html
index d635b0617..c9ccf77ae 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html
@@ -1,51 +1,93 @@
-<aside class="app-rail" [class.is-macos]="isMacOS()">
-    <a
-        class="brand"
-        [routerLink]="brandLink()"
-        [matTooltip]="brandTooltipKey() | translate"
+<aside
+    class="app-rail"
+    [attr.dir]="textDirection()"
+    [class.is-macos]="isMacOS()"
+    [class.is-expanded]="expanded()"
+>
+    <button
+        type="button"
+        class="rail-toggle"
+        (click)="toggleExpanded()"
+        [disabled]="isCompact()"
+        [matTooltip]="
+            (expanded()
+                ? 'WORKSPACE.SHELL.COLLAPSE_NAVIGATION'
+                : 'WORKSPACE.SHELL.EXPAND_NAVIGATION'
+            ) | translate
+        "
+        [matTooltipDisabled]="isCompact()"
         [matTooltipPosition]="'right'"
-        [attr.aria-label]="brandAriaLabelKey() | translate"
+        aria-controls="workspace-primary-navigation-content"
+        [attr.aria-expanded]="isCompact() ? null : expanded()"
+        [attr.aria-label]="
+            isCompact()
+                ? null
+                : ((expanded()
+                      ? 'WORKSPACE.SHELL.COLLAPSE_NAVIGATION'
+                      : 'WORKSPACE.SHELL.EXPAND_NAVIGATION'
+                  ) | translate)
+        "
     >
-        <img
-            src="./assets/icons/icon-tv-256.png"
-            [attr.alt]="'WORKSPACE.SHELL.BRAND_ALT' | translate"
-        />
-    </a>
-
-    <app-workspace-shell-rail-links [links]="workspaceLinks()" />
+        <mat-icon class="rail-toggle-icon" aria-hidden="true">
+            {{ expanded() ? 'arrow_right' : 'arrow_drop_down' }}
+        </mat-icon>
+        @if (expanded()) {
+            <span class="rail-brand">
+                <img
+                    src="./assets/icons/icon-tv-256.png"
+                    [attr.alt]="'WORKSPACE.SHELL.BRAND_ALT' | translate"
+                />
+                <span class="rail-brand-name">IPTVnator</span>
+            </span>
+        }
+    </button>
 
-    @if (primaryContextLinks().length > 0) {
-        <div
-            class="rail-context-region"
-            [class]="railProviderClass()"
-        >
+    <div id="workspace-primary-navigation-content" class="rail-content">
+        <div class="rail-navigation">
             <app-workspace-shell-rail-links
-                activeClass="is-active"
-                [selectedSection]="selectedSection()"
-                [links]="primaryContextLinks()"
+                [expanded]="expanded()"
+                [links]="workspaceLinks()"
             />
 
-            @if (secondaryContextLinks().length > 0) {
-                <div class="rail-divider"></div>
-                <app-workspace-shell-rail-links
-                    activeClass="is-active"
-                    [selectedSection]="selectedSection()"
-                    [links]="secondaryContextLinks()"
-                />
+            @if (primaryContextLinks().length > 0) {
+                <div class="rail-context-region" [class]="railProviderClass()">
+                    <app-workspace-shell-rail-links
+                        activeClass="is-active"
+                        [expanded]="expanded()"
+                        [selectedSection]="selectedSection()"
+                        [links]="primaryContextLinks()"
+                    />
+
+                    @if (secondaryContextLinks().length > 0) {
+                        <div class="rail-divider"></div>
+                        <app-workspace-shell-rail-links
+                            activeClass="is-active"
+                            [expanded]="expanded()"
+                            [selectedSection]="selectedSection()"
+                            [links]="secondaryContextLinks()"
+                        />
+                    }
+                </div>
             }
         </div>
-    }
 
-    <div class="rail-footer">
-        <a
-            class="rail-shortcut nav-item"
-            routerLink="/workspace/settings"
-            [class.is-active]="isSettingsRoute()"
-            [matTooltip]="'WORKSPACE.SHELL.RAIL_SETTINGS' | translate"
-            [matTooltipPosition]="'right'"
-            [attr.aria-label]="'WORKSPACE.SHELL.OPEN_SETTINGS' | translate"
-        >
-            <mat-icon>settings</mat-icon>
-        </a>
+        <div class="rail-footer">
+            <a
+                class="rail-shortcut nav-item"
+                routerLink="/workspace/settings"
+                [class.is-active]="isSettingsRoute()"
+                [matTooltip]="'WORKSPACE.SHELL.RAIL_SETTINGS' | translate"
+                [matTooltipDisabled]="expanded()"
+                [matTooltipPosition]="'right'"
+                [attr.aria-label]="'WORKSPACE.SHELL.OPEN_SETTINGS' | translate"
+            >
+                <mat-icon>settings</mat-icon>
+                @if (expanded()) {
+                    <span class="rail-shortcut-label">
+                        {{ 'WORKSPACE.SHELL.RAIL_SETTINGS' | translate }}
+                    </span>
+                }
+            </a>
+        </div>
     </div>
 </aside>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
index eb6610c47..b53d9476a 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
@@ -1,64 +1,131 @@
+@use '../../styles/breakpoints' as shell-breakpoints;
+
 :host {
     display: block;
+    width: 60px;
     min-width: 0;
     min-height: 0;
+    --workspace-rail-expanded-min-width: 196px;
+    --workspace-rail-expanded-max-width: min(320px, 40vw);
+}
+
+:host.rail-expanded {
+    width: max-content;
+    min-width: var(--workspace-rail-expanded-min-width);
+    max-width: var(--workspace-rail-expanded-max-width);
 }
 
 .app-rail {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
+    width: 60px;
     height: 100%;
     box-sizing: border-box;
     padding: 10px 8px;
+    overflow: hidden;
     border-right: 1px solid
         var(--app-rail-border, var(--mat-sys-outline-variant));
     background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
     app-region: drag;
-    overflow-y: auto;
-    overflow-x: hidden;
     scrollbar-width: none;
-    --rail-link-color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
-    --rail-link-hover-color: var(--app-on-surface);
-    --rail-link-hover-bg: var(--app-hover-overlay);
+    --rail-link-color: color-mix(
+        in srgb,
+        var(--app-on-surface) 65%,
+        transparent
+    );
+    --rail-link-hover-color: var(--mat-sys-on-surface);
+    --rail-link-hover-bg: var(--app-selection-surface);
     --rail-link-active-bg: var(--app-selection-surface);
     --rail-link-active-bg-strong: var(--app-selection-surface-strong);
     --rail-link-active-color: var(--app-selection-color);
     --rail-link-active-icon: var(--app-selection-color);
     --rail-link-active-border: var(--app-selection-border);
     --rail-link-active-glow: var(--app-selection-glow);
+    // Dock-like hover magnification capped at 42px, so a 20px icon stays
+    // inside its 44px slot without scaling neighboring icons or labels.
+    --rail-dock-hover-scale: 2.1;
+    --rail-dock-hover-overhang: 11px;
 
     &.is-macos {
         padding-top: 36px;
     }
 
+    &.is-expanded {
+        width: max-content;
+        min-width: var(--workspace-rail-expanded-min-width);
+        max-width: var(--workspace-rail-expanded-max-width);
+        align-items: stretch;
+
+        .rail-context-region {
+            align-items: stretch;
+            max-width: none;
+        }
+    }
+
     &::-webkit-scrollbar {
         display: none;
     }
 }
 
-.app-rail a {
-    width: 44px;
-    height: 44px;
-    border-radius: 14px;
+.rail-content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+.rail-navigation {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.app-rail a,
+.app-rail button {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 44px;
+    height: 44px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 14px;
     color: var(--rail-link-color);
+    font: inherit;
     text-decoration: none;
+    app-region: no-drag;
     transition:
         background-color 0.2s ease,
+        border-color 0.2s ease,
         color 0.2s ease,
         box-shadow 0.2s ease,
         transform 0.2s ease;
-    app-region: no-drag;
 
     mat-icon {
-        font-size: 20px;
+        position: relative;
+        z-index: 1;
         width: 20px;
         height: 20px;
+        font-size: 20px;
+        transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        will-change: transform;
     }
 }
 
@@ -67,6 +134,23 @@
     background: var(--rail-link-hover-bg);
 }
 
+@media (hover: hover) and (pointer: fine) {
+    .app-rail a:hover mat-icon {
+        z-index: 3;
+        transform: scale(var(--rail-dock-hover-scale));
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-rail a mat-icon,
+    .app-rail a:hover mat-icon,
+    .app-rail button mat-icon,
+    .app-rail button:hover mat-icon {
+        transition: none;
+        transform: none;
+    }
+}
+
 .app-rail a.is-active,
 .app-rail a.active {
     color: var(--rail-link-active-color);
@@ -87,49 +171,84 @@
     &::after {
         content: '';
         position: absolute;
-        right: -4px;
+        right: 3px;
         top: 50%;
-        transform: translateY(-50%);
         width: 3px;
         height: 18px;
         border-radius: 999px;
         background: var(--rail-link-active-icon);
         box-shadow: 0 0 10px var(--rail-link-active-glow);
+        transform: translateY(-50%);
     }
 }
 
-.brand {
+.rail-toggle {
+    flex: 0 0 auto;
     margin-bottom: 10px;
+    padding: 0;
     background: var(--mat-sys-primary-container);
     color: var(--mat-sys-on-primary-container);
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
+    cursor: pointer;
+
+    &:disabled {
+        opacity: 1;
+        cursor: default;
+    }
+}
+
+.app-rail.is-expanded .rail-toggle {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 10px;
+    padding: 0 12px;
+}
+
+.rail-toggle-icon {
+    flex: 0 0 auto;
+}
+
+.rail-brand {
     display: inline-flex;
+    flex: 1 1 auto;
     align-items: center;
-    justify-content: center;
+    gap: 8px;
+    min-width: 0;
+
+    img {
+        flex: 0 0 auto;
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+    }
 }
 
-.brand img {
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
+.rail-brand-name,
+.rail-shortcut-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .rail-context-region {
     --region-accent: var(--mat-sys-outline-variant);
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     width: 100%;
     max-width: 48px;
-    padding: 5px 2px;
+    box-sizing: border-box;
     margin: 4px 0;
+    padding: 5px 2px;
+    border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
     border-radius: 14px;
     background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
-    border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
-    position: relative;
     animation: region-enter 0.25s ease-out both;
 
     &::before {
@@ -168,6 +287,7 @@
         opacity: 0;
         transform: scale(0.95);
     }
+
     to {
         opacity: 1;
         transform: scale(1);
@@ -177,13 +297,14 @@
 .rail-divider {
     width: 44px;
     height: 1px;
-    background: var(--mat-sys-outline-variant);
     margin: 6px 0;
+    background: var(--mat-sys-outline-variant);
     opacity: 0.5;
 }
 
 .rail-footer {
-    margin-top: auto;
+    flex: 0 0 auto;
+    width: 100%;
 
     .rail-shortcut {
         width: 44px;
@@ -191,50 +312,83 @@
         padding: 0;
         gap: 0;
         border-radius: 14px;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
         color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
-        app-region: no-drag;
-
-        mat-icon {
-            font-size: 20px;
-            width: 20px;
-            height: 20px;
-        }
 
         &:hover:not(.is-active) {
-            background: var(--app-hover-overlay);
-            color: var(--app-on-surface);
+            color: var(--rail-link-hover-color);
+            background: var(--rail-link-hover-bg);
         }
 
         &.is-active::after {
             content: '';
             position: absolute;
-            right: -4px;
+            right: 3px;
             top: 50%;
-            transform: translateY(-50%);
             width: 4px;
             height: 20px;
             border-radius: 999px;
             background: var(--app-selection-color);
             box-shadow: 0 0 10px var(--app-selection-glow);
+            transform: translateY(-50%);
         }
     }
 }
 
-@media (max-width: 640px) {
-    .app-rail {
+.app-rail.is-expanded .rail-footer .rail-shortcut {
+    width: 100%;
+    justify-content: flex-start;
+    gap: calc(12px + var(--rail-dock-hover-overhang));
+    padding: 0 12px;
+}
+
+@include shell-breakpoints.compact {
+    :host,
+    :host.rail-expanded {
+        width: 100%;
+        min-width: 0;
+        max-width: none;
+    }
+
+    .app-rail,
+    .app-rail.is-expanded {
+        width: 100%;
+        min-width: 0;
+        max-width: none;
         flex-direction: row;
+        align-items: center;
         justify-content: space-between;
         padding: 6px 10px;
-        border-right: none;
+        border: none;
         border-bottom: 1px solid var(--mat-sys-outline-variant);
+    }
 
-        .brand {
-            margin-bottom: 0;
-        }
+    .rail-toggle,
+    .app-rail.is-expanded .rail-toggle {
+        width: 44px;
+        margin-bottom: 0;
+        padding: 0;
+        justify-content: center;
+    }
+
+    .rail-brand,
+    .rail-shortcut-label {
+        display: none;
+    }
+
+    .rail-content {
+        flex-direction: row;
+        align-items: center;
+        width: auto;
+        min-width: 0;
+    }
+
+    .rail-navigation {
+        flex-direction: row;
+        align-items: center;
+        width: auto;
+        min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
     }
 
     .rail-divider {
@@ -262,6 +416,14 @@
     }
 
     .rail-footer {
+        width: auto;
         margin-top: 0;
     }
+
+    .app-rail.is-expanded .rail-footer .rail-shortcut {
+        width: 44px;
+        justify-content: center;
+        gap: 0;
+        padding: 0;
+    }
 }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts
index 8c8a7dbe0..21512d9a7 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts
@@ -1,12 +1,11 @@
 import { Component, input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
-import { provideRouter } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { of } from 'rxjs';
-import { RouterLink } from '@angular/router';
-import { TranslatePipe } from '@ngx-translate/core';
+import { provideRouter, RouterLink } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { of, Subject } from 'rxjs';
 import { WorkspaceShellRailComponent } from './workspace-shell-rail.component';
 
 @Component({
@@ -18,12 +17,16 @@ class MockWorkspaceShellRailLinksComponent {
     readonly links = input<unknown[]>([]);
     readonly selectedSection = input<string | null>(null);
     readonly activeClass = input('active');
+    readonly expanded = input(false);
 }
 
 describe('WorkspaceShellRailComponent', () => {
     let fixture: ComponentFixture<WorkspaceShellRailComponent>;
+    let languageChanges: Subject<{ lang: string }>;
 
     beforeEach(async () => {
+        languageChanges = new Subject<{ lang: string }>();
+
         await TestBed.configureTestingModule({
             imports: [WorkspaceShellRailComponent],
             providers: [
@@ -34,7 +37,7 @@ describe('WorkspaceShellRailComponent', () => {
                         instant: (key: string) => key,
                         get: (key: string) => of(key),
                         stream: (key: string) => of(key),
-                        onLangChange: of(null),
+                        onLangChange: languageChanges,
                         onTranslationChange: of(null),
                         onDefaultLangChange: of(null),
                         currentLang: 'en',
@@ -59,12 +62,7 @@ describe('WorkspaceShellRailComponent', () => {
         fixture = TestBed.createComponent(WorkspaceShellRailComponent);
     });
 
-    it('renders provider context region and active settings shortcut state', () => {
-        fixture.componentRef.setInput('brandLink', '/workspace/sources');
-        fixture.componentRef.setInput(
-            'brandAriaLabelKey',
-            'WORKSPACE.SHELL.OPEN_SOURCES'
-        );
+    it('renders provider context and the active settings shortcut', () => {
         fixture.componentRef.setInput('primaryContextLinks', [
             {
                 icon: 'movie',
@@ -86,15 +84,92 @@ describe('WorkspaceShellRailComponent', () => {
         expect(
             fixture.nativeElement.querySelector('.rail-shortcut.is-active')
         ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.rail-navigation')
+        ).not.toBeNull();
+    });
+
+    it('uses the triangle control instead of a duplicate dashboard link', () => {
+        fixture.detectChanges();
+
+        const toggle = fixture.debugElement.query(By.css('.rail-toggle'));
+
+        expect(toggle.nativeElement.tagName).toBe('BUTTON');
+        expect(toggle.nativeElement.getAttribute('href')).toBeNull();
+        expect(toggle.nativeElement.getAttribute('aria-expanded')).toBe(
+            'false'
+        );
+        expect(toggle.nativeElement.getAttribute('aria-controls')).toBe(
+            'workspace-primary-navigation-content'
+        );
+        expect(
+            fixture.nativeElement
+                .querySelector('.rail-toggle-icon')
+                .textContent.trim()
+        ).toBe('arrow_drop_down');
+        expect(fixture.nativeElement.querySelector('.rail-brand')).toBeNull();
+
+        toggle.triggerEventHandler('click');
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.expanded()).toBe(true);
+        expect(toggle.nativeElement.getAttribute('aria-expanded')).toBe('true');
+        expect(
+            fixture.nativeElement
+                .querySelector('.rail-toggle-icon')
+                .textContent.trim()
+        ).toBe('arrow_right');
         expect(
             fixture.nativeElement
-                .querySelector('.brand')
-                ?.getAttribute('href')
-        ).toContain('/workspace/sources');
+                .querySelector('.rail-brand-name')
+                .textContent.trim()
+        ).toBe('IPTVnator');
+        expect(fixture.nativeElement.classList.contains('rail-expanded')).toBe(
+            true
+        );
+    });
+
+    it('rejects an expanded model value while the rail is compact', () => {
+        const expandedChanges: boolean[] = [];
+        fixture.componentInstance.expanded.subscribe((value) =>
+            expandedChanges.push(value)
+        );
+        fixture.componentInstance.isCompact.set(true);
+
+        fixture.componentRef.setInput('expanded', true);
+        fixture.detectChanges();
+        TestBed.flushEffects();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.expanded()).toBe(false);
+        expect(expandedChanges).toContain(false);
+        expect(
+            fixture.nativeElement
+                .querySelector('.rail-toggle')
+                ?.getAttribute('aria-expanded')
+        ).toBeNull();
+        expect(
+            fixture.nativeElement.querySelector<HTMLButtonElement>(
+                '.rail-toggle'
+            )?.disabled
+        ).toBe(true);
+    });
+
+    it('aligns navigation from the language direction', () => {
+        fixture.detectChanges();
+        expect(
+            fixture.nativeElement
+                .querySelector('.app-rail')
+                ?.getAttribute('dir')
+        ).toBe('ltr');
+
+        languageChanges.next({ lang: 'ar' });
+        fixture.detectChanges();
+
         expect(
             fixture.nativeElement
-                .querySelector('.brand')
-                ?.getAttribute('aria-label')
-        ).toBe('WORKSPACE.SHELL.OPEN_SOURCES');
+                .querySelector('.app-rail')
+                ?.getAttribute('dir')
+        ).toBe('rtl');
     });
 });
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts
index 999c5ea41..749e6f40f 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts
@@ -1,18 +1,31 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    DestroyRef,
+    HostBinding,
+    computed,
+    effect,
+    inject,
     input,
+    model,
+    signal,
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import {
     PortalRailLink,
     PortalRailSection,
 } from '@iptvnator/portal/shared/util';
+import { map, startWith } from 'rxjs';
+import { WORKSPACE_SHELL_COMPACT_MEDIA_QUERY } from '../../workspace-shell-layout.constants';
 import { WorkspaceShellRailLinksComponent } from '../workspace-shell-rail-links/workspace-shell-rail-links.component';
 
+const RTL_LANGUAGES = new Set(['ar', 'ary', 'fa', 'he', 'ur']);
+
 @Component({
     selector: 'app-workspace-shell-rail',
     imports: [
@@ -27,10 +40,30 @@ import { WorkspaceShellRailLinksComponent } from '../workspace-shell-rail-links/
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WorkspaceShellRailComponent {
+    private readonly document = inject(DOCUMENT);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly translate = inject(TranslateService);
+    private readonly compactMediaQuery =
+        this.document.defaultView?.matchMedia?.(
+            WORKSPACE_SHELL_COMPACT_MEDIA_QUERY
+        ) ?? null;
+    private readonly fallbackLanguage =
+        this.translate.currentLang || this.translate.defaultLang || 'en';
+    private readonly activeLanguage = toSignal(
+        this.translate.onLangChange.pipe(
+            map((event) => event?.lang || this.fallbackLanguage),
+            startWith(this.fallbackLanguage)
+        ),
+        { initialValue: this.fallbackLanguage }
+    );
+
     readonly isMacOS = input(false);
-    readonly brandLink = input('/workspace/dashboard');
-    readonly brandTooltipKey = input('WORKSPACE.SHELL.RAIL_DASHBOARD');
-    readonly brandAriaLabelKey = input('WORKSPACE.SHELL.OPEN_DASHBOARD');
+    readonly expanded = model(false);
+    readonly isCompact = signal(this.compactMediaQuery?.matches ?? false);
+    readonly textDirection = computed<'ltr' | 'rtl'>(() => {
+        const language = this.activeLanguage().toLowerCase().split('-')[0];
+        return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr';
+    });
     readonly workspaceLinks = input<PortalRailLink[]>([]);
     readonly primaryContextLinks = input<PortalRailLink[]>([]);
     readonly secondaryContextLinks = input<PortalRailLink[]>([]);
@@ -39,4 +72,41 @@ export class WorkspaceShellRailComponent {
     >(null);
     readonly railProviderClass = input('rail-context-region');
     readonly isSettingsRoute = input(false);
+
+    @HostBinding('class.rail-expanded')
+    get railExpandedClass(): boolean {
+        return this.expanded();
+    }
+
+    constructor() {
+        effect(() => {
+            if (this.isCompact() && this.expanded()) {
+                this.expanded.set(false);
+            }
+        });
+
+        const mediaQuery = this.compactMediaQuery;
+        if (!mediaQuery) {
+            return;
+        }
+
+        const updateCompactState = (matches: boolean): void => {
+            this.isCompact.set(matches);
+        };
+        const onMediaChange = (event: MediaQueryListEvent): void =>
+            updateCompactState(event.matches);
+
+        mediaQuery.addEventListener?.('change', onMediaChange);
+        this.destroyRef.onDestroy(() =>
+            mediaQuery.removeEventListener?.('change', onMediaChange)
+        );
+    }
+
+    toggleExpanded(): void {
+        if (this.isCompact()) {
+            return;
+        }
+
+        this.expanded.update((expanded) => !expanded);
+    }
 }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell-route-state.service.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell-route-state.service.ts
index 4ad1b570b..099719f89 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell-route-state.service.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell-route-state.service.ts
@@ -55,21 +55,6 @@ export class WorkspaceShellRouteStateService {
     readonly showDashboard = computed(() =>
         this.startupPreferences.showDashboard()
     );
-    readonly brandLink = computed(() =>
-        this.startupPreferences.getFirstAvailableWorkspacePath(
-            this.showDashboard()
-        )
-    );
-    readonly brandTooltipKey = computed(() =>
-        this.showDashboard()
-            ? 'WORKSPACE.SHELL.RAIL_DASHBOARD'
-            : 'WORKSPACE.SHELL.RAIL_SOURCES'
-    );
-    readonly brandAriaLabelKey = computed(() =>
-        this.showDashboard()
-            ? 'WORKSPACE.SHELL.OPEN_DASHBOARD'
-            : 'WORKSPACE.SHELL.OPEN_SOURCES'
-    );
     readonly workspaceLinks = computed<PortalRailLink[]>(() => {
         this.languageTick();
 
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts
index 32aad8089..3039fb384 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts
@@ -678,7 +678,6 @@ describe('WorkspaceShellFacade', () => {
                 exact: true,
             },
         ]);
-        expect(facade.brandLink()).toBe('/workspace/sources');
     });
 
     it('hides the Electron-only global search rail link in the web runtime', () => {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
index 2e32b2e85..5e150000b 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
@@ -68,9 +68,6 @@ export class WorkspaceShellFacade {
     readonly currentUrl = this.routeState.currentUrl;
     readonly currentRoute = this.routeState.currentRoute;
     readonly showDashboard = this.routeState.showDashboard;
-    readonly brandLink = this.routeState.brandLink;
-    readonly brandTooltipKey = this.routeState.brandTooltipKey;
-    readonly brandAriaLabelKey = this.routeState.brandAriaLabelKey;
     readonly currentContext = this.routeState.currentContext;
     readonly currentSection = this.routeState.currentSection;
     readonly commandPaletteCommands = computed<WorkspaceResolvedCommandItem[]>(
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/styles/_breakpoints.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/styles/_breakpoints.scss
new file mode 100644
index 000000000..ff289afa5
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/styles/_breakpoints.scss
@@ -0,0 +1,9 @@
+// Keep this value aligned with workspace-shell-layout.constants.ts. This is
+// the single Sass definition shared by the shell and its rail components.
+$compact-max-width: 640px;
+
+@mixin compact {
+    @media (max-width: $compact-max-width) {
+        @content;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell-layout.constants.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell-layout.constants.ts
new file mode 100644
index 000000000..24861f071
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell-layout.constants.ts
@@ -0,0 +1,5 @@
+// Keep this value aligned with styles/_breakpoints.scss. TypeScript and Sass
+// are separate compiler inputs, so this is the single TypeScript definition.
+export const WORKSPACE_SHELL_COMPACT_MAX_WIDTH_PX = 640;
+
+export const WORKSPACE_SHELL_COMPACT_MEDIA_QUERY = `(max-width: ${WORKSPACE_SHELL_COMPACT_MAX_WIDTH_PX}px)`;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html
index 0408a64c6..67ffb84e0 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html
@@ -1,5 +1,6 @@
 <div
     class="workspace-shell"
+    [class.rail-expanded]="railExpanded()"
     appPlaylistDropZone
     #dropZone="playlistDropZone"
 >
@@ -10,15 +11,14 @@
 
     <app-workspace-shell-rail
         [isMacOS]="facade.isMacOS"
-        [brandLink]="facade.brandLink()"
-        [brandTooltipKey]="facade.brandTooltipKey()"
-        [brandAriaLabelKey]="facade.brandAriaLabelKey()"
+        [expanded]="railExpanded()"
         [workspaceLinks]="facade.workspaceLinks()"
         [primaryContextLinks]="facade.primaryContextLinks()"
         [secondaryContextLinks]="facade.secondaryContextLinks()"
         [selectedSection]="facade.currentSection()"
         [railProviderClass]="facade.railProviderClass()"
         [isSettingsRoute]="facade.isSettingsRoute()"
+        (expandedChange)="railExpanded.set($event)"
     />
 
     <app-workspace-shell-header
@@ -54,7 +54,10 @@
         (accountInfoRequested)="facade.openAccountInfo()"
     />
 
-    <div class="workspace-body" [class.single-pane]="!facade.showContextPanel()">
+    <div
+        class="workspace-body"
+        [class.single-pane]="!facade.showContextPanel()"
+    >
         @if (facade.showContextPanel()) {
             <app-workspace-shell-context-sidebar
                 [variant]="facade.contextPanel()"
@@ -75,9 +78,7 @@
                 <app-external-playback-dock
                     [session]="session"
                     (closeClicked)="facade.closeActiveExternalSession()"
-                    (artworkClicked)="
-                        facade.openActiveExternalSessionTarget()
-                    "
+                    (artworkClicked)="facade.openActiveExternalSessionTarget()"
                 />
             </footer>
         }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
index 39156e85d..859ff5137 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
@@ -1,3 +1,5 @@
+@use './styles/breakpoints' as shell-breakpoints;
+
 :host {
     display: block;
     width: 100%;
@@ -17,6 +19,10 @@
     color: var(--mat-sys-on-surface);
 }
 
+.workspace-shell.rail-expanded {
+    grid-template-columns: max-content minmax(0, 1fr);
+}
+
 app-workspace-shell-rail {
     grid-column: 1;
     grid-row: 1 / span 3;
@@ -65,7 +71,6 @@ app-workspace-shell-context-sidebar {
     box-shadow: -4px 8px 20px var(--app-content-shadow, rgba(0, 0, 0, 0.18));
 }
 
-
 @media (max-width: 780px) {
     .workspace-shell {
         grid-template-columns: 56px 1fr;
@@ -73,12 +78,16 @@ app-workspace-shell-context-sidebar {
     }
 }
 
-@media (max-width: 640px) {
+@include shell-breakpoints.compact {
     .workspace-shell {
         grid-template-columns: 1fr;
         grid-template-rows: 52px 56px minmax(0, 1fr) auto;
     }
 
+    .workspace-shell.rail-expanded {
+        grid-template-columns: 1fr;
+    }
+
     app-workspace-shell-rail {
         grid-column: 1;
         grid-row: 1;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts
index 6e0049a5d..4669bd9cc 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts
@@ -1,10 +1,4 @@
-import {
-    Component,
-    Directive,
-    input,
-    output,
-    signal,
-} from '@angular/core';
+import { Component, Directive, input, output, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { RouterOutlet, provideRouter } from '@angular/router';
 import { By } from '@angular/platform-browser';
@@ -26,15 +20,14 @@ import { WorkspaceKeyboardShortcutsService } from '../workspace-keyboard-shortcu
 })
 class MockWorkspaceShellRailComponent {
     readonly isMacOS = input(false);
-    readonly brandLink = input('/workspace/dashboard');
-    readonly brandTooltipKey = input('WORKSPACE.SHELL.RAIL_DASHBOARD');
-    readonly brandAriaLabelKey = input('WORKSPACE.SHELL.OPEN_DASHBOARD');
     readonly workspaceLinks = input<unknown[]>([]);
     readonly primaryContextLinks = input<unknown[]>([]);
     readonly secondaryContextLinks = input<unknown[]>([]);
     readonly selectedSection = input<string | null>(null);
     readonly railProviderClass = input('');
     readonly isSettingsRoute = input(false);
+    readonly expanded = input(false);
+    readonly expandedChange = output<boolean>();
 }
 
 @Component({
@@ -129,9 +122,6 @@ class MockWorkspaceKeyboardShortcutsService {
 }
 
 class MockWorkspaceShellFacade {
-    readonly brandLink = signal('/workspace/dashboard');
-    readonly brandTooltipKey = signal('WORKSPACE.SHELL.RAIL_DASHBOARD');
-    readonly brandAriaLabelKey = signal('WORKSPACE.SHELL.OPEN_DASHBOARD');
     readonly workspaceLinks = signal([]);
     readonly primaryContextLinks = signal([]);
     readonly secondaryContextLinks = signal([]);
@@ -254,6 +244,18 @@ describe('WorkspaceShellComponent', () => {
         expect(
             fixture.nativeElement.querySelector('app-external-playback-dock')
         ).not.toBeNull();
+
+        const rail = fixture.debugElement.query(
+            By.directive(MockWorkspaceShellRailComponent)
+        );
+        rail.componentInstance.expandedChange.emit(true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement
+                .querySelector('.workspace-shell')
+                ?.classList.contains('rail-expanded')
+        ).toBe(true);
     });
 
     it('renders the xtream import overlay child only when the facade flag is true', async () => {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts
index abcc06693..524a402a8 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts
@@ -1,4 +1,10 @@
-import { Component, HostListener, inject, viewChild } from '@angular/core';
+import {
+    Component,
+    HostListener,
+    inject,
+    signal,
+    viewChild,
+} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ExternalPlaybackDockComponent } from '@iptvnator/ui/components';
 import {
@@ -46,9 +52,9 @@ import { WorkspaceKeyboardShortcutsService } from '../workspace-keyboard-shortcu
 export class WorkspaceShellComponent {
     readonly facade = inject(WorkspaceShellFacade);
     readonly keyboardShortcuts = inject(WorkspaceKeyboardShortcutsService);
-    private readonly header = viewChild<WorkspaceShellHeaderShortcutTarget>(
-        'workspaceHeader'
-    );
+    readonly railExpanded = signal(false);
+    private readonly header =
+        viewChild<WorkspaceShellHeaderShortcutTarget>('workspaceHeader');
 
     @HostListener('document:keydown', ['$event'])
     onDocumentKeydown(event: KeyboardEvent): void {