diff --git a/package-lock.json b/package-lock.json
index 2762147a..22c8d80b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^5.2.4",
         "css-minimizer-webpack-plugin": "^2.0.0",
+        "dotenv-webpack": "^8.0.1",
         "eslint": "^7.26.0",
         "eslint-config-airbnb": "^18.2.1",
         "eslint-config-prettier": "^8.3.0",
@@ -9865,6 +9866,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "dev": true,
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -30976,6 +31010,30 @@
         "is-obj": "^2.0.0"
       }
     },
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true
+    },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "dev": true,
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
diff --git a/package.json b/package.json
index aa757a0f..0cbca8ce 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
diff --git a/src/index.html b/src/index.html
index 993b5d2f..8f80ba0b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,12 +4,12 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script async src="<%= htmlWebpackPlugin.options.GA_URL %>"></script>
+  <script async src="<%= process.env.GA_URL %>"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-    var url = "<%= htmlWebpackPlugin.options.GA_URL %>";
+    var url = "<%= process.env.GA_URL %>";
     var regex = /id=(.*)/;
     var id = url.match(regex)[1];
     gtag('config', id);
diff --git a/webpack.common.js b/webpack.common.js
index 1b2722c0..1aa51c42 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -2,7 +2,9 @@ const path = require('path');
 const Webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     target: 'web',
@@ -78,7 +80,9 @@ module.exports = {
     },
 
     plugins: [
-        
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
         new Webpack.DefinePlugin({
             "process.env": {
                 "APP_ENV": JSON.stringify(process.env.APP_ENV)
@@ -104,6 +108,7 @@ module.exports = {
             }
         }),
         new MiniCssExtractPlugin({ filename: 'css/[name]-[fullhash].css' }),
-        new CleanWebpackPlugin()
+        new CleanWebpackPlugin(),
+        new Dotenv(),
     ]
 };
diff --git a/webpack.dev.js b/webpack.dev.js
index 0be6e5ff..865c4608 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,7 +1,6 @@
 const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const commonConfig = require('./webpack.common');
 
@@ -43,11 +42,7 @@ module.exports = merge(commonConfig, {
 
     plugins: [
         new Webpack.DefinePlugin({
-            ENV: JSON.stringify('development'),
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/index.html',
-             GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-K4MLHWSVVT',
+            ENV: JSON.stringify('development')
         }),
         new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerPort: 8081 })
     ],
diff --git a/webpack.prod.js b/webpack.prod.js
index 6f6aea41..ccb33d3a 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,6 +1,6 @@
 const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 const commonConfig = require('./webpack.common');
 
 module.exports = merge(commonConfig, {
@@ -33,13 +33,8 @@ module.exports = merge(commonConfig, {
     },
 
     plugins: [
-        new HtmlWebpackPlugin({
-            template: 'src/index.html',
-            GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-GFR8PTXMDM',
-        }),
         new Webpack.DefinePlugin({
-            ENV: JSON.stringify('production'),
-            
+            ENV: JSON.stringify('production')
         })
     ]
 });
