diff --git a/.env.example b/.env.example
index 816616c8e2..4cb8391745 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,4 @@
 STORYBOOK_CLIENT_ID=bdc1d425-9117-4867-acb9-c7307ddc2e0f
 STORYBOOK_LIBRARY_TOKEN=e26e4ca8934475e6a9aytefb028b2e9fa846b5b8
+PUBLIZON_BASEURL=http://publizon-mock.docker
+FBS_BASEURL=http://fbs-mock.docker
diff --git a/.eslintrc b/.eslintrc
index c9793176e1..88a1b17614 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -61,6 +61,7 @@
           "/**/*.test.tsx",
           "vitest.config.ts",
           "webpack.config.js",
+          "webpack.helpers.js",
           "postcss.config.js",
           "orval.config.ts",
           "cypress/plugins/index.js",
diff --git a/package.json b/package.json
index d3f3fe4945..cbe963d1a5 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.7",
     "cypress": "^9.6.1",
+    "dotenv": "^16.3.1",
     "eslint": "^8.15.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
diff --git a/src/core/storybook/serviceUrlArgs.ts b/src/core/storybook/serviceUrlArgs.ts
index 4223aa2422..be76c11f76 100644
--- a/src/core/storybook/serviceUrlArgs.ts
+++ b/src/core/storybook/serviceUrlArgs.ts
@@ -3,12 +3,13 @@ import { serviceUrlKeys } from "../utils/reduxMiddleware/extractServiceBaseUrls"
 export default {
   [serviceUrlKeys.fbs]: {
     name: "Base url for the FBS API",
-    defaultValue: "https://fbs-openplatform.dbc.dk",
+    defaultValue: process.env.FBS_BASEURL ?? "https://fbs-openplatform.dbc.dk",
     control: { type: "text" }
   },
   [serviceUrlKeys.publizon]: {
     name: "Base url for the Publizon API",
-    defaultValue: "https://pubhub-openplatform.dbc.dk",
+    defaultValue:
+      process.env.PUBLIZON_BASEURL ?? "https://pubhub-openplatform.dbc.dk",
     control: { type: "text" }
   },
   [serviceUrlKeys.dplCms]: {
diff --git a/webpack.config.js b/webpack.config.js
index f11540b38b..af6ca62d57 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,10 @@
 const path = require("path");
 const glob = require("glob");
+const webpack = require("webpack");
 const VersionFile = require("webpack-version-file-plugin");
 const { EnvironmentPlugin } = require("webpack");
 const ESLintPlugin = require("eslint-webpack-plugin");
+const { getWebPackEnvVariables } = require("./webpack.helpers");
 
 module.exports = (_env, argv) => {
   const production = argv.mode === "production";
@@ -42,6 +44,14 @@ module.exports = (_env, argv) => {
     );
   }
 
+  // Add environment variables to webpack in development mode
+  if (!production) {
+    const variables = getWebPackEnvVariables();
+    if (variables) {
+      plugins.push(new webpack.DefinePlugin(variables));
+    }
+  }
+
   return {
     entry: {
       ...entry,
diff --git a/webpack.helpers.js b/webpack.helpers.js
new file mode 100644
index 0000000000..fae3b58b42
--- /dev/null
+++ b/webpack.helpers.js
@@ -0,0 +1,18 @@
+const dotenv = require("dotenv");
+
+const getEnvVariables = () => {
+  return dotenv.config().parsed;
+};
+const convertEnvVariablesToWebpack = (env) =>
+  Object.keys(env).reduce(
+    (prev, next) => ({
+      ...prev,
+      [`process.env.${next}`]: JSON.stringify(env[next])
+    }),
+    {}
+  );
+
+exports.getWebPackEnvVariables = () => {
+  const variables = getEnvVariables();
+  return variables ? convertEnvVariablesToWebpack(variables) : null;
+};
diff --git a/yarn.lock b/yarn.lock
index 12a96e2584..fe808c8deb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6205,20 +6205,20 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-loader@^8.2.5:
-  version "8.2.5"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+babel-loader@^8.0.0:
+  version "8.2.4"
+  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz"
+  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^8.0.0:
-  version "8.2.4"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+babel-loader@^8.2.5:
+  version "8.2.5"
+  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
@@ -8944,6 +8944,11 @@ dotenv@^16.0.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz"
   integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 dotenv@^8.0.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
@@ -14785,9 +14790,9 @@ number-is-nan@^1.0.0:
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nyc@^15.1.0:
+nyc@15.1.0, nyc@^15.1.0:
   version "15.1.0"
-  resolved "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/nyc/-/nyc-15.1.0.tgz#1335dae12ddc87b6e249d5a1994ca4bdaea75f02"
   integrity sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==
   dependencies:
     "@istanbuljs/load-nyc-config" "^1.0.0"
@@ -15868,15 +15873,6 @@ postcss-load-config@^3.0.0:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
-postcss-loader@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz"
-  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.5"
-
 postcss-loader@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz"
@@ -15888,6 +15884,15 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz"