diff --git a/wata-board-frontend/tsconfig.app.json b/wata-board-frontend/tsconfig.app.json
index a9b5a59c..a826dcfe 100644
--- a/wata-board-frontend/tsconfig.app.json
+++ b/wata-board-frontend/tsconfig.app.json
@@ -22,7 +22,21 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Path aliases — must match vite.config.ts resolve.alias */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@services/*": ["src/services/*"],
+      "@utils/*": ["src/utils/*"],
+      "@types/*": ["src/types/*"],
+      "@pages/*": ["src/pages/*"],
+      "@contracts/*": ["src/contracts/*"],
+      "@i18n/*": ["src/i18n/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/wata-board-frontend/vite.config.ts b/wata-board-frontend/vite.config.ts
index 6a1feb4d..46ed7741 100644
--- a/wata-board-frontend/vite.config.ts
+++ b/wata-board-frontend/vite.config.ts
@@ -1,42 +1,73 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import { resolve } from 'path'
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: 5173,
-    host: true,
-    proxy: {
-      // Proxy API requests to the backend server during development
-      '/api': {
-        target: 'http://localhost:3001',
-        changeOrigin: true,
-        secure: false,
-        configure: (proxy, _options) => {
-          proxy.on('error', (err, _req, _res) => {
-            console.log('proxy error', err);
-          });
-          proxy.on('proxyReq', (proxyReq, req, _res) => {
-            console.log('Sending Request to the Target:', req.method, req.url);
-          });
-          proxy.on('proxyRes', (proxyRes, req, _res) => {
-            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
-          });
+export default defineConfig(({ mode }) => {
+  // Load env variables for the current mode
+  const env = loadEnv(mode, process.cwd(), '')
+  const isProd = mode === 'production'
+
+  return {
+    plugins: [
+      react(),
+      tailwindcss(),
+    ],
+
+    // Path aliases
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@components': resolve(__dirname, 'src/components'),
+        '@hooks': resolve(__dirname, 'src/hooks'),
+        '@services': resolve(__dirname, 'src/services'),
+        '@utils': resolve(__dirname, 'src/utils'),
+        '@types': resolve(__dirname, 'src/types'),
+        '@pages': resolve(__dirname, 'src/pages'),
+        '@contracts': resolve(__dirname, 'src/contracts'),
+        '@i18n': resolve(__dirname, 'src/i18n'),
+      },
+    },
+
+    // Environment variable handling — only expose VITE_ prefixed vars to client
+    envPrefix: 'VITE_',
+
+    // Dev server
+    server: {
+      port: 5173,
+      host: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_URL || 'http://localhost:3001',
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+
+    // Preview server (mirrors dev server port for consistency)
+    preview: {
+      port: 4173,
+      host: true,
+    },
+
+    build: {
+      outDir: 'dist',
+      // Source maps: full in dev, hidden (no public reference) in prod
+      sourcemap: isProd ? 'hidden' : true,
+      rollupOptions: {
+        output: {
+          // Chunk splitting for optimal caching
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-stellar': ['@stellar/stellar-sdk', '@stellar/freighter-api'],
+            'vendor-i18n': ['i18next', 'react-i18next', 'i18next-browser-languagedetector'],
+          },
         },
-      }
-    }
-  },
-  build: {
-    // Ensure proper CORS handling in production builds
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vendor: ['react', 'react-dom'],
-          stellar: ['@stellar/stellar-sdk', '@stellar/freighter-api']
-        }
-      }
-    }
+      },
+      // Warn when chunks exceed 500 kB
+      chunkSizeWarningLimit: 500,
+    },
   }
 })