diff --git a/apps/react/.babelrc b/apps/react/.babelrc
index 61641ec..f953612 100644
--- a/apps/react/.babelrc
+++ b/apps/react/.babelrc
@@ -7,5 +7,12 @@
       }
     ]
   ],
-  "plugins": []
+  "env": {
+    "development": {
+      "plugins": ["react-refresh/babel"]
+    },
+    "production": {
+      "plugins": []
+    }
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 561f090..7aeabec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "@nrwl/tao": "12.1.1",
         "@nrwl/web": "12.1.1",
         "@nrwl/workspace": "12.1.1",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
         "@testing-library/react": "11.2.6",
         "@types/jest": "26.0.8",
         "@types/node": "14.14.33",
@@ -48,6 +49,7 @@
         "eslint-plugin-react-hooks": "4.2.0",
         "jest": "26.2.2",
         "prettier": "2.2.1",
+        "react-refresh": "^0.9.0",
         "ts-jest": "26.5.5",
         "ts-node": "~9.1.1",
         "typescript": "~4.1.4"
@@ -2989,6 +2991,62 @@
         "node": ">=10"
       }
     },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">= 10.x"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x",
+        "react-refresh": ">=0.8.3 <0.10.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": "^0.13.1",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.0.2",
       "resolved": "http://localhost:4873/@rollup%2fplugin-babel/-/plugin-babel-5.0.2.tgz",
@@ -9366,6 +9424,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "dev": true,
+      "dependencies": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.18.0",
       "resolved": "http://localhost:4873/es-abstract/-/es-abstract-1.18.0.tgz",
@@ -16566,6 +16633,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "dependencies": {
+        "querystring": "^0.2.0"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "http://localhost:4873/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -22942,6 +23018,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "http://localhost:4873/read-cache/-/read-cache-1.0.0.tgz",
@@ -25178,6 +25263,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackframe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+      "dev": true
+    },
     "node_modules/static-extend": {
       "version": "0.1.2",
       "resolved": "http://localhost:4873/static-extend/-/static-extend-0.1.2.tgz",
@@ -31900,6 +31991,28 @@
         }
       }
     },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.0.2",
       "resolved": "http://localhost:4873/@rollup%2fplugin-babel/-/plugin-babel-5.0.2.tgz",
@@ -33005,7 +33118,8 @@
       "version": "5.3.1",
       "resolved": "http://localhost:4873/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -33059,13 +33173,15 @@
       "version": "1.0.1",
       "resolved": "http://localhost:4873/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "http://localhost:4873/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -34319,7 +34435,8 @@
       "version": "5.2.0",
       "resolved": "http://localhost:4873/circular-dependency-plugin/-/circular-dependency-plugin-5.2.0.tgz",
       "integrity": "sha512-7p4Kn/gffhQaavNfyDFg7LS5S/UT1JAjyGd4UqR2+jzoYF02eDkj0Ec3+48TsIa4zghjLY87nQHIh/ecK9qLdw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "cjs-module-lexer": {
       "version": "0.6.0",
@@ -36520,6 +36637,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "es-abstract": {
       "version": "1.18.0",
       "resolved": "http://localhost:4873/es-abstract/-/es-abstract-1.18.0.tgz",
@@ -36799,7 +36925,8 @@
       "version": "8.1.0",
       "resolved": "http://localhost:4873/eslint-config-prettier/-/eslint-config-prettier-8.1.0.tgz",
       "integrity": "sha512-oKMhGv3ihGbCIimCAjqkdzx2Q+jthoqnXSP+d86M9tptwugycmTFdVR4IpLgq2c4SHifbwO90z2fQ8/Aio73yw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-import-resolver-node": {
       "version": "0.3.4",
@@ -36966,7 +37093,8 @@
       "version": "4.2.0",
       "resolved": "http://localhost:4873/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
       "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "4.0.3",
@@ -40148,7 +40276,8 @@
       "version": "1.2.2",
       "resolved": "http://localhost:4873/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "26.0.0",
@@ -40575,7 +40704,8 @@
           "version": "7.4.5",
           "resolved": "http://localhost:4873/ws/-/ws-7.4.5.tgz",
           "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -41717,6 +41847,15 @@
       "dev": true,
       "optional": true
     },
+    "native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "requires": {
+        "querystring": "^0.2.0"
+      }
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "http://localhost:4873/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -44228,13 +44367,15 @@
           "version": "5.1.0",
           "resolved": "http://localhost:4873/icss-utils/-/icss-utils-5.1.0.tgz",
           "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
           "resolved": "http://localhost:4873/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -46327,6 +46468,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "dev": true
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "http://localhost:4873/read-cache/-/read-cache-1.0.0.tgz",
@@ -46875,7 +47022,8 @@
       "version": "2.2.4",
       "resolved": "http://localhost:4873/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz",
       "integrity": "sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "rollup-plugin-postcss": {
       "version": "4.0.0",
@@ -47025,7 +47173,8 @@
       "version": "0.0.2",
       "resolved": "http://localhost:4873/rxjs-for-await/-/rxjs-for-await-0.0.2.tgz",
       "integrity": "sha512-IJ8R/ZCFMHOcDIqoABs82jal00VrZx8Xkgfe7TOKoaRPAW5nH/VFlG23bXpeGdrmtqI9UobFPgUKgCuFc7Lncw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "safe-buffer": {
       "version": "5.1.2",
@@ -48020,6 +48169,12 @@
         }
       }
     },
+    "stackframe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+      "dev": true
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "http://localhost:4873/static-extend/-/static-extend-0.1.2.tgz",
diff --git a/package.json b/package.json
index f968016..5f141e7 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@nrwl/tao": "12.1.1",
     "@nrwl/web": "12.1.1",
     "@nrwl/workspace": "12.1.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@testing-library/react": "11.2.6",
     "@types/jest": "26.0.8",
     "@types/node": "14.14.33",
@@ -67,6 +68,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "26.2.2",
     "prettier": "2.2.1",
+    "react-refresh": "^0.9.0",
     "ts-jest": "26.5.5",
     "ts-node": "~9.1.1",
     "typescript": "~4.1.4"
diff --git a/webpack.js b/webpack.js
index e69de29..08da99c 100644
--- a/webpack.js
+++ b/webpack.js
@@ -0,0 +1,21 @@
+const getWebpackConfig = require('@nrwl/react/plugins/webpack');
+const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+function getCustomWebpackConfig(webpackConfig) {
+  const config = getWebpackConfig(webpackConfig);
+  const isProduction = webpackConfig.mode === 'production';
+
+  if (!isProduction) {
+    webpackConfig.devServer = {
+      ...webpackConfig.devServer,
+      liveReload: false,
+      hot: true,
+    };
+
+    config.plugins.push(new ReactRefreshPlugin());
+  }
+
+  return config;
+}
+
+module.exports = getCustomWebpackConfig;
diff --git a/workspace.json b/workspace.json
index 3a722fe..c3ef0ca 100644
--- a/workspace.json
+++ b/workspace.json
@@ -27,7 +27,7 @@
             "assets": ["apps/react/src/favicon.ico", "apps/react/src/assets"],
             "styles": ["apps/react/src/styles.css"],
             "scripts": [],
-            "webpackConfig": "@nrwl/react/plugins/webpack"
+            "webpackConfig": "./webpack"
           },
           "configurations": {
             "production": {