diff --git a/packages/web/src/components/layout/Sidebar.tsx b/packages/web/src/components/layout/Sidebar.tsx
index 139cd5e..84af122 100644
--- a/packages/web/src/components/layout/Sidebar.tsx
+++ b/packages/web/src/components/layout/Sidebar.tsx
@@ -116,7 +116,7 @@ export function Sidebar() {
 				style={{ borderTop: "1px solid var(--border)" }}
 			>
 				<p className="text-xs font-mono hidden sm:block" style={{ color: "var(--text-4)" }}>
-					API v3
+					v{__APP_VERSION__}
 				</p>
 				<div className="flex items-center gap-1.5 mx-auto sm:mx-0">
 					<button
diff --git a/packages/web/src/vite-env.d.ts b/packages/web/src/vite-env.d.ts
new file mode 100644
index 0000000..41fad5b
--- /dev/null
+++ b/packages/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index d7c3fbe..1267586 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -1,16 +1,23 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import { readFileSync } from "node:fs";
 import tailwindcss from "@tailwindcss/vite";
-import { fileURLToPath } from "url";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
 import path from "path";
+import { fileURLToPath } from "url";
+import { defineConfig } from "vite";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const host = process.env.TAURI_DEV_HOST;
+const { version } = JSON.parse(
+	readFileSync(path.resolve(__dirname, "../../package.json"), "utf-8"),
+) as { version: string };
 
 export default defineConfig({
 	clearScreen: false,
 	plugins: [tanstackRouter({ autoCodeSplitting: true }), react(), tailwindcss()],
+	define: {
+		__APP_VERSION__: JSON.stringify(version),
+	},
 	resolve: {
 		alias: {
 			"@": path.resolve(__dirname, "./src"),