diff --git a/apps/web/src/components/AppShell.tsx b/apps/web/src/components/AppShell.tsx
index 344bd4f..1d7d32b 100644
--- a/apps/web/src/components/AppShell.tsx
+++ b/apps/web/src/components/AppShell.tsx
@@ -7,8 +7,37 @@ import { Badge, Button, cx } from "@agy/ui";
 import { api } from "@/lib/api";
 import { CommandPalette } from "@/components/CommandPalette";
 import { NAV_ITEMS } from "@/lib/nav";
+import { APP_VERSION_LABEL } from "@/lib/version";
 import { useSession } from "@/lib/session";
 
+/**
+ * The build version, bottom-left of the sidebar footer.
+ *
+ * `font-mono` on purpose: a version is the one string in this RTL shell that
+ * must never reflow, and Tailwind's mono stack (`ui-monospace`, `SFMono`, 
+ * `Menlo`, `Consolas`, …) is made of system faces that are always installed.
+ * So it renders identically on every machine without waiting on a webfont —
+ * and digits never shift width while a page loads.
+ *
+ * Glass comes from translucency plus blur only. PLAN §12 bans gradients and
+ * drop shadows, so depth here is `bg-white/5` over the footer with a hairline
+ * `border-white/10` and `backdrop-blur-sm` — no shadow, no gradient.
+ *
+ * `ltr-inline` keeps the Latin string from being reordered by the RTL
+ * bidi algorithm, and `tabular-nums` stops the digits from jittering if the
+ * label is ever swapped live.
+ */
+function VersionBadge() {
+  return (
+    <span
+      title={`نسخهٔ ${APP_VERSION_LABEL}`}
+      className="ltr-inline shrink-0 rounded-md border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[10px] leading-none tabular-nums text-slate-400 backdrop-blur-sm"
+    >
+      {APP_VERSION_LABEL}
+    </span>
+  );
+}
+
 /** Credit badge — reads the organization's real balance, never a placeholder. */
 function CreditBadge({ organizationId }: { organizationId: string | undefined }) {
   const [balance, setBalance] = React.useState<number | null>(null);
@@ -107,9 +136,12 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
         <div className="border-t border-surface-border p-3">
           <p className="truncate text-xs text-slate-400">{user?.email}</p>
-          <Button variant="ghost" size="sm" className="mt-2 w-full" onClick={handleLogout}>
-            خروج
-          </Button>
+          <div className="mt-2 flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="flex-1" onClick={handleLogout}>
+              خروج
+            </Button>
+            <VersionBadge />
+          </div>
         </div>
       </aside>
 
diff --git a/apps/web/src/lib/version.ts b/apps/web/src/lib/version.ts
new file mode 100644
index 0000000..a3a64e5
--- /dev/null
+++ b/apps/web/src/lib/version.ts
@@ -0,0 +1,18 @@
+/**
+ * The build version shown in the sidebar footer.
+ *
+ * Kept as a literal rather than imported from `package.json`: the value has to
+ * reach the client bundle, and a whole-JSON import either drags the entire
+ * manifest — every dependency range included — into it for one string, or
+ * breaks outright under a bundler that will not tree-shake named exports out
+ * of JSON.
+ *
+ * The trade-off is that this can drift from the manifest, so
+ * `src/test/version.test.ts` asserts the two agree. That turns a silent
+ * "the app is on the wrong version" bug into a failing test, which is the
+ * whole point of keeping them separate.
+ */
+export const APP_VERSION = "0.1.0";
+
+/** What the footer pill renders — ``v`` prefix keeps it unambiguous in the UI. */
+export const APP_VERSION_LABEL = `v${APP_VERSION}`;
diff --git a/apps/web/src/test/version.test.tsx b/apps/web/src/test/version.test.tsx
new file mode 100644
index 0000000..9747101
--- /dev/null
+++ b/apps/web/src/test/version.test.tsx
@@ -0,0 +1,64 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AppShell } from "@/components/AppShell";
+import { APP_VERSION, APP_VERSION_LABEL } from "@/lib/version";
+
+/**
+ * `APP_VERSION` is a literal rather than a `package.json` import, because a
+ * whole-JSON import drags the manifest into the client bundle for one string.
+ * The cost of that choice is drift, so these tests pay it off: if someone
+ * bumps the manifest and forgets the literal, the UI would quietly claim the
+ * wrong build — which is exactly the bug a version badge exists to prevent.
+ */
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  usePathname: () => "/dashboard",
+}));
+
+vi.mock("@/lib/session", () => ({
+  useSession: () => ({
+    ready: true,
+    token: "token",
+    user: { email: "owner@example.com", name: "مالک", is_platform_owner: false },
+    organizations: [],
+    activeOrganization: null,
+    setActiveOrganization: vi.fn(),
+    logout: vi.fn(),
+  }),
+}));
+
+const manifest = JSON.parse(
+  readFileSync(join(process.cwd(), "package.json"), "utf-8"),
+) as { version: string };
+
+describe("app version", () => {
+  it("matches the version in apps/web/package.json", () => {
+    expect(APP_VERSION).toBe(manifest.version);
+  });
+
+  it("renders with a v prefix so it reads as a version in the UI", () => {
+    expect(APP_VERSION_LABEL).toBe(`v${APP_VERSION}`);
+  });
+
+  it("is a plain semver triple with no pre-release or build metadata", () => {
+    // The pill is ~40px wide and offers no truncation affordance; anything
+    // longer than x.y.z would overflow the footer next to the logout button.
+    expect(APP_VERSION).toMatch(/^\d+\.\d+\.\d+$/);
+  });
+});
+
+describe("sidebar version badge", () => {
+  it("shows the version in the shell footer", () => {
+    render(<AppShell><p>بدنه</p></AppShell>);
+    expect(screen.getByText(APP_VERSION_LABEL)).toBeInTheDocument();
+  });
+
+  it("sets the direction explicitly so the RTL shell cannot reorder it", () => {
+    render(<AppShell><p>بدنه</p></AppShell>);
+    const badge = screen.getByText(APP_VERSION_LABEL);
+    expect(badge.className).toContain("ltr-inline");
+  });
+});