diff --git a/client/.gitignore b/client/.gitignore
index afd0485d1..2df1bb71c 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -5,7 +5,7 @@ npm-debug.log*
 node_modules
 dist
 
-.env
+.env.*
 
 *storybook.log
 .DS_Store
diff --git a/client/package-lock.json b/client/package-lock.json
index e7b17303d..b580a840e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -46,7 +46,8 @@
         "typescript-eslint": "^7.16.0",
         "webpack": "^5.93.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4"
+        "webpack-dev-server": "^5.0.4",
+        "webpack-merge": "^6.0.1"
       },
       "engines": {
         "node": ">=20.15.1",
@@ -11255,6 +11256,20 @@
         }
       }
     },
+    "node_modules/webpack-cli/node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.3.0.tgz",
@@ -11469,17 +11484,17 @@
       }
     },
     "node_modules/webpack-merge": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
-      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-6.0.1.tgz",
+      "integrity": "sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==",
       "dev": true,
       "dependencies": {
         "clone-deep": "^4.0.1",
         "flat": "^5.0.2",
-        "wildcard": "^2.0.0"
+        "wildcard": "^2.0.1"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/webpack-sources": {
diff --git a/client/package.json b/client/package.json
index 6b1025048..27516c179 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,8 +4,10 @@
   "description": "",
   "type": "module",
   "scripts": {
-    "start": "webpack serve ",
-    "build": "webpack --mode production",
+    "prod": "NODE_ENV=production webpack server --open --config webpack.prod.mjs",
+    "dev": "NODE_ENV=development webpack server --open --config webpack.dev.mjs",
+    "build": "NODE_ENV=production webpack --config webpack.prod.mjs",
+    "build-dev": "NODE_ENV=development webpack --config webpack.dev.mjs",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
@@ -56,4 +58,4 @@
     "npm": ">=10.7.0",
     "node": ">=20.15.1"
   }
-}
+}
\ No newline at end of file
diff --git a/client/webpack.config.js b/client/webpack.common.mjs
similarity index 80%
rename from client/webpack.config.js
rename to client/webpack.common.mjs
index 1a32c0ccd..fc39ac87b 100644
--- a/client/webpack.config.js
+++ b/client/webpack.common.mjs
@@ -3,15 +3,11 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import {ModifySourcePlugin, ConcatOperation} from 'modify-source-webpack-plugin';
 import {fileURLToPath} from 'url';
-import Dotenv from 'dotenv-webpack';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// dotenv.config({path: path.join(__dirname, '.env')});
-
 export default {
-  mode: 'development',
   entry: './src/index.tsx',
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
@@ -26,11 +22,6 @@ export default {
       '@utils': path.resolve(__dirname, 'src/utils/'),
     },
   },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].[hash].js',
-    publicPath: '/',
-  },
   module: {
     rules: [
       {
@@ -61,14 +52,5 @@ export default {
         },
       ],
     }),
-    new Dotenv(),
   ],
-  devServer: {
-    port: 3000,
-    hot: true,
-    historyApiFallback: true,
-    client: {
-      overlay: false,
-    },
-  },
 };
diff --git a/client/webpack.dev.mjs b/client/webpack.dev.mjs
new file mode 100644
index 000000000..5ad42ed45
--- /dev/null
+++ b/client/webpack.dev.mjs
@@ -0,0 +1,33 @@
+import path from 'path';
+import {merge} from 'webpack-merge';
+import Dotenv from 'dotenv-webpack';
+import common from './webpack.common.mjs';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default merge(common, {
+  mode: 'development',
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
+  devtool: 'eval-source-map',
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
+    hot: true,
+    client: {
+      overlay: false,
+    },
+  },
+  plugins: [
+    new Dotenv({
+      path: '.env.dev',
+    }),
+  ],
+});
diff --git a/client/webpack.prod.mjs b/client/webpack.prod.mjs
new file mode 100644
index 000000000..5df1f7c4c
--- /dev/null
+++ b/client/webpack.prod.mjs
@@ -0,0 +1,25 @@
+import path from 'path';
+import {merge} from 'webpack-merge';
+import Dotenv from 'dotenv-webpack';
+import common from './webpack.common.mjs';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default merge(common, {
+  mode: 'production',
+  output: {
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  plugins: [
+    new Dotenv({
+      path: '.env.prod',
+    }),
+  ],
+});