diff --git a/apps/web/src/branding.ts b/apps/web/src/branding.ts
index 4adc50bc19..13144898f5 100644
--- a/apps/web/src/branding.ts
+++ b/apps/web/src/branding.ts
@@ -1,3 +1,4 @@
 export const APP_BASE_NAME = "T3 Code";
 export const APP_STAGE_LABEL = import.meta.env.DEV ? "Dev" : "Alpha";
 export const APP_DISPLAY_NAME = `${APP_BASE_NAME} (${APP_STAGE_LABEL})`;
+export const APP_VERSION = import.meta.env.APP_VERSION as string;
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index cc4a39a272..b888c395c2 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -11,6 +11,7 @@ import {
   shouldShowFastTierIcon,
   useAppSettings,
 } from "../appSettings";
+import { APP_VERSION } from "../branding";
 import { isElectron } from "../env";
 import { useTheme } from "../hooks/useTheme";
 import { serverConfigQueryOptions } from "../lib/serverReactQuery";
@@ -597,6 +598,27 @@ function SettingsRouteView() {
                 </div>
               ) : null}
             </section>
+
+            <section className="rounded-2xl border border-border bg-card p-5">
+              <div className="mb-4">
+                <h2 className="text-sm font-medium text-foreground">About</h2>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Version and app information.
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2">
+                <div>
+                  <p className="text-sm font-medium text-foreground">Version</p>
+                  <p className="text-xs text-muted-foreground">
+                    Currently installed version of T3 Code.
+                  </p>
+                </div>
+                <code className="rounded bg-muted px-2 py-1 text-xs font-medium text-foreground">
+                  {APP_VERSION}
+                </code>
+              </div>
+            </section>
           </div>
         </div>
       </div>
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 86ca574aa0..c3dfc3fadc 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,8 +1,12 @@
+import { readFileSync } from "node:fs";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import { defineConfig } from "vite";
 
+const pkg = JSON.parse(
+  readFileSync(new URL("./package.json", import.meta.url), "utf-8"),
+) as { version: string };
 const port = Number(process.env.PORT ?? 5733);
 const sourcemapEnv = process.env.T3CODE_WEB_SOURCEMAP?.trim().toLowerCase();
 
@@ -29,6 +33,7 @@ export default defineConfig({
   define: {
     // In dev mode, tell the web app where the WebSocket server lives
     "import.meta.env.VITE_WS_URL": JSON.stringify(process.env.VITE_WS_URL ?? ""),
+    "import.meta.env.APP_VERSION": JSON.stringify(pkg.version),
   },
   experimental: {
     enableNativePlugin: true,