diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 57fea66..3d5e0ad 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "@tanstack/react-query-devtools": "^5.12.2",
         "axios": "^1.6.2",
         "date-fns": "^4.1.0",
+        "dotenv": "^16.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^9.0.2",
@@ -2657,6 +2658,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9721303..031594b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "@tanstack/react-query-devtools": "^5.12.2",
     "axios": "^1.6.2",
     "date-fns": "^4.1.0",
+    "dotenv": "^16.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.2",
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index a05eb80..34dfa13 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}) => {
+  dotenv.config();
+  // Load env variables
+  
+  // 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