diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index ef5fb92..2bf2b0d 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,36 +1,42 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'node:path';
 
-export default defineConfig({
-  plugins: [react()],
-  // VITE_* vars live in the monorepo root .env alongside the API's config.
-  envDir: path.resolve(__dirname, '../..'),
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8080',
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  // Read the monorepo root .env (all keys, not just VITE_*) so ports stay configurable there.
+  const env = { ...loadEnv(mode, path.resolve(__dirname, '../..'), ''), ...process.env };
+
+  return {
+    plugins: [react()],
+    // VITE_* vars live in the monorepo root .env alongside the API's config.
+    envDir: path.resolve(__dirname, '../..'),
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
       },
     },
-  },
-  build: {
-    outDir: 'dist',
-    sourcemap: false,
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          'vendor-react': ['react', 'react-dom', 'react-router-dom'],
-          'vendor-ui': ['framer-motion', 'lucide-react'],
-          'vendor-charts': ['recharts'],
+    server: {
+      // Ports are overridable so this app can run alongside other local projects.
+      port: Number(env.WEB_PORT ?? 5173),
+      proxy: {
+        '/api': {
+          target: env.API_PROXY_TARGET ?? `http://localhost:${env.PORT ?? 8080}`,
+          changeOrigin: true,
         },
       },
     },
-  },
+    build: {
+      outDir: 'dist',
+      sourcemap: false,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-ui': ['framer-motion', 'lucide-react'],
+            'vendor-charts': ['recharts'],
+          },
+        },
+      },
+    },
+  };
 });