diff --git a/docs/TASKS/app-shell/003-add-alpha-preview-brand-badge.md b/docs/TASKS/app-shell/003-add-alpha-preview-brand-badge.md
new file mode 100644
index 0000000..1e8ba53
--- /dev/null
+++ b/docs/TASKS/app-shell/003-add-alpha-preview-brand-badge.md
@@ -0,0 +1,19 @@
+# Task: Add alpha preview brand badge
+
+## Goal
+
+Add a compact product-stage badge beside the authenticated app brand and public landing brand so users can see the product is in alpha preview without treating it as an error or blocking alert. Remove the old authenticated sidebar caption so the brand treatment stays focused.
+
+## Relevant Files
+
+- `frontend/src/layouts/main/AppSidebar.vue`
+- `frontend/src/static/components/LandingSiteMenu.vue`
+- `frontend/src/locales/en.json`
+- `frontend/src/locales/fr.json`
+
+## Validation
+
+```bash
+cd frontend
+npm run build
+```
diff --git a/frontend/src/layouts/main/AppSidebar.vue b/frontend/src/layouts/main/AppSidebar.vue
index 35aa3c5..859e505 100644
--- a/frontend/src/layouts/main/AppSidebar.vue
+++ b/frontend/src/layouts/main/AppSidebar.vue
@@ -254,9 +254,21 @@
                 to="/"
             >
                 <span class="brand-mark">S</span>
-                <div v-if="isExpanded">
-                    <div class="brand-name">Socialize</div>
-                    <div class="brand-caption">{{ t('nav.brandCaption') }}</div>
+                <div
+                    v-if="isExpanded"
+                    class="brand-copy"
+                >
+                    <div class="brand-heading">
+                        <span class="brand-name-wrap">
+                            <span class="brand-name">Socialize</span>
+                            <span
+                                class="brand-stage-badge"
+                                :aria-label="t('nav.brandStageLabel')"
+                            >
+                                <span>{{ t('nav.brandStage') }}</span>
+                            </span>
+                        </span>
+                    </div>
                 </div>
             </router-link>
         </div>
@@ -635,7 +647,7 @@
     }
 
     .brand-link {
-        @apply flex min-w-0 items-center gap-3 no-underline;
+        @apply flex min-w-0 items-start gap-3 no-underline;
         color: inherit;
     }
 
@@ -643,20 +655,38 @@
         @apply w-full justify-center;
     }
 
+    .brand-copy {
+        @apply min-w-0;
+    }
+
+    .brand-heading {
+        @apply flex min-w-0 items-center;
+    }
+
     .brand-mark {
         @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1.1rem] text-xl font-black;
         background: linear-gradient(135deg, #ff8a3d 0%, #ef4444 100%);
         color: #fffaf2;
     }
 
-    .brand-name {
-        @apply text-lg font-black uppercase tracking-[0.18em];
-        color: #172033;
+    .brand-name-wrap {
+        @apply relative inline-flex min-w-0 items-center;
     }
 
-    .brand-caption {
-        @apply text-xs uppercase tracking-[0.24em];
-        color: #5d6b82;
+    .brand-name {
+        @apply min-w-0 text-lg font-black uppercase tracking-[0.18em];
+        color: #172033;
+        line-height: 2.75rem;
+    }
+
+    .brand-stage-badge {
+        @apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
+        background: rgba(255, 231, 199, 0.46);
+        border-color: rgba(242, 179, 107, 0.38);
+        color: #925000;
+        left: 0;
+        line-height: 1;
+        top: calc(100% - 0.45rem);
     }
 
     .side-menu {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index fcf5fc2..2147a43 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -443,8 +443,8 @@
     }
   },
   "nav": {
-    "brandStage": "Preview",
-    "brandStageLabel": "Product stage: Preview",
+    "brandStage": "Alpha Preview",
+    "brandStageLabel": "Product stage: Alpha Preview",
     "brandCaption": "Approval workflow",
     "workspace": "Workspace",
     "notifications": "Notifications",
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index 425b339..16fdc23 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -443,8 +443,8 @@
     }
   },
   "nav": {
-    "brandStage": "Preview",
-    "brandStageLabel": "Statut du produit : Preview",
+    "brandStage": "Aperçu alpha",
+    "brandStageLabel": "Statut du produit : aperçu alpha",
     "brandCaption": "Flux d'approbation",
     "workspace": "Espace de travail",
     "notifications": "Notifications",
diff --git a/frontend/src/static/components/LandingSiteMenu.vue b/frontend/src/static/components/LandingSiteMenu.vue
index 64f8dd7..3f8c77d 100644
--- a/frontend/src/static/components/LandingSiteMenu.vue
+++ b/frontend/src/static/components/LandingSiteMenu.vue
@@ -6,7 +6,17 @@
                 to="/"
             >
                 <span class="site-brand-mark">S</span>
-                <span class="site-brand-text">Socialize</span>
+                <span class="site-brand-heading">
+                    <span class="site-brand-text-wrap">
+                        <span class="site-brand-text">Socialize</span>
+                        <span
+                            class="site-brand-stage-badge"
+                            :aria-label="t('nav.brandStageLabel')"
+                        >
+                            <span>{{ t('nav.brandStage') }}</span>
+                        </span>
+                    </span>
+                </span>
             </router-link>
 
             <nav
@@ -262,7 +272,7 @@
     }
 
     .site-brand {
-        @apply flex min-w-0 items-center gap-3 no-underline;
+        @apply flex min-w-0 items-start gap-3 no-underline;
         color: #172033;
     }
 
@@ -272,8 +282,27 @@
         color: #fffaf2;
     }
 
+    .site-brand-heading {
+        @apply flex min-w-0 items-center;
+    }
+
+    .site-brand-text-wrap {
+        @apply relative inline-flex min-w-0 items-center;
+    }
+
     .site-brand-text {
         @apply truncate text-lg font-black uppercase tracking-[0.18em];
+        line-height: 2.5rem;
+    }
+
+    .site-brand-stage-badge {
+        @apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
+        background: rgba(255, 231, 199, 0.46);
+        border-color: rgba(242, 179, 107, 0.38);
+        color: #925000;
+        left: 0;
+        line-height: 1;
+        top: calc(100% - 0.45rem);
     }
 
     .site-nav {
@@ -390,7 +419,7 @@
     }
 
     @media (max-width: 420px) {
-        .site-brand-text {
+        .site-brand-heading {
             @apply hidden;
         }