diff --git a/frontend/package.json b/frontend/package.json
index f9fb804fb..ae8acc8e0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "test": "jest",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
+    "msw": "APP_ENV=msw webpack-dev-server --open --config webpack.dev.js",
     "dev": "webpack-dev-server --config webpack.dev.js --open",
     "tsc": "tsc --noEmit",
     "build": "webpack --mode production --config webpack.prod.js",
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 880cbfe6a..ef1b84df2 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -31,13 +31,13 @@ Sentry.init({
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 const enableMocking = async () => {
-  if (process.env.NODE_ENV !== 'development') {
+  if (process.env.APP_ENV !== 'msw') {
     return;
   }
 
-  // const { worker } = await import('./mocks/browser');
+  const { worker } = await import('@/mocks/settings/browser');
 
-  // await worker.start();
+  await worker.start();
 };
 
 enableMocking().then(() => {
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
index 37bc1fe0b..d2395f87c 100644
--- a/frontend/webpack.dev.js
+++ b/frontend/webpack.dev.js
@@ -4,6 +4,9 @@ const Dotenv = require('dotenv-webpack');
 
 const common = require('./webpack.common.js');
 
+const apiEnv = process.env.APP_ENV || 'development';
+const envFilePath = `.env.${apiEnv}`;
+
 module.exports = () => {
   return merge(common, {
     mode: 'development',
@@ -14,7 +17,7 @@ module.exports = () => {
     plugins: [
       new HotModuleReplacementPlugin(),
       new Dotenv({
-        path: './.env.development',
+        path: `./${envFilePath}`,
       }),
     ],
     module: {