diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index a05eb80..13c6829 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,49 +1,58 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import dotenv from 'dotenv';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-      '@components': path.resolve(__dirname, 'src/components'),
-      '@features': path.resolve(__dirname, 'src/features'),
-      '@hooks': path.resolve(__dirname, 'src/hooks'),
-      '@layouts': path.resolve(__dirname, 'src/layouts'),
-      '@pages': path.resolve(__dirname, 'src/pages'),
-      '@services': path.resolve(__dirname, 'src/services'),
-      '@store': path.resolve(__dirname, 'src/store'),
-      '@theme': path.resolve(__dirname, 'src/theme'),
-      '@utils': path.resolve(__dirname, 'src/utils'),
-      '@assets': path.resolve(__dirname, 'src/assets')
-    }
-  },
-  server: {
-    // port: 3000,
-    // proxy: {
-    //   '/api': {
-    //     target: 'http://localhost:4000',
-    //     changeOrigin: true,
-    //     secure: false
-    //   }
-    // },
-    allowedHosts: ['localhost', 'rocks.2many.ca'],
-    host: '0.0.0.0', 
-    port: 3000,
-    watch: {
-      usePolling: true,
+export default defineConfig(({mode}) => {
+  // Load env variables
+  const env = loadEnv(mode, process.cwd(), '');
+  
+  // Determine HMR host based on environment
+  const isProduction = process.env.ENVIRONMENT === "prod";
+  const hmrHost = isProduction ? 'rocks.2many.ca' : 'localhost';
+  const hmrConfig = isProduction 
+    ? { host: hmrHost } 
+    : { host: hmrHost, clientPort: 3000 };
+  return {
+    plugins: [react()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        '@components': path.resolve(__dirname, 'src/components'),
+        '@features': path.resolve(__dirname, 'src/features'),
+        '@hooks': path.resolve(__dirname, 'src/hooks'),
+        '@layouts': path.resolve(__dirname, 'src/layouts'),
+        '@pages': path.resolve(__dirname, 'src/pages'),
+        '@services': path.resolve(__dirname, 'src/services'),
+        '@store': path.resolve(__dirname, 'src/store'),
+        '@theme': path.resolve(__dirname, 'src/theme'),
+        '@utils': path.resolve(__dirname, 'src/utils'),
+        '@assets': path.resolve(__dirname, 'src/assets')
+      }
     },
-    hmr: {
-      clientPort: 3000, 
-      host: 'localhost',
+    server: {
+      // port: 3000,
+      // proxy: {
+      //   '/api': {
+      //     target: 'http://localhost:4000',
+      //     changeOrigin: true,
+      //     secure: false
+      //   }
+      // },
+      allowedHosts: ['localhost', 'rocks.2many.ca'],
+      host: '0.0.0.0', 
+      port: 3000,
+      watch: {
+        usePolling: true,
+      },
+      hmr: hmrConfig
+    },
+    build: {
+      outDir: 'dist',
+      assetsDir: 'assets',
+      emptyOutDir: true,
+      sourcemap: process.env.NODE_ENV !== 'production'
     }
-  },
-  build: {
-    outDir: 'dist',
-    assetsDir: 'assets',
-    emptyOutDir: true,
-    sourcemap: process.env.NODE_ENV !== 'production'
   }
 });
\ No newline at end of file