diff --git a/config-overrides.js b/config-overrides.js
index 7874bc5d..46c0b335 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -1,5 +1,24 @@
-// Overrides create-react-app webpack configs without ejecting
-// https://github.com/timarney/react-app-rewired
+const path = require('path');
 
 const { useBabelRc, override } = require('customize-cra');
-module.exports = override(useBabelRc());
+
+module.exports = override(
+  // Use Babel config from .babelrc
+  useBabelRc(),
+
+  // Add Webpack alias for Keycloak configuration based on the environment
+  (config) => {
+    const isProduction = process.env.NODE_ENV === 'production';
+
+    // Define the path to the correct keycloak-config based on the environment
+    config.resolve.alias['keycloak-config'] = path.resolve(
+      __dirname,
+      isProduction
+        ? 'src/keycloak-config.prod.json'   // Production environment
+        : 'src/keycloak-config.json'        // Development environment
+    );
+
+    // Return the modified Webpack config
+    return config;
+  }
+);
diff --git a/src/context/AuthContextProvider.tsx b/src/context/AuthContextProvider.tsx
index 266aad6b..a02eff6b 100644
--- a/src/context/AuthContextProvider.tsx
+++ b/src/context/AuthContextProvider.tsx
@@ -1,24 +1,22 @@
 import axios from 'axios';
+import keycloakConfig from 'keycloak-config';
 import Keycloak, { KeycloakConfig, KeycloakInitOptions } from 'keycloak-js';
-import React, { createContext, useEffect, useState, useMemo } from 'react';
+import React, { createContext, useEffect, useMemo, useState } from 'react';
 
-if (!process.env.REACT_APP_KEYCLOAK_API_URL) {
-  throw new Error('REACT_APP_KEYCLOAK_API_URL is not defined');
+const getDotEnvKeycloakApiUrl= (keycloakApiUrl: string): string => {
+  if (!process.env[keycloakApiUrl]) {
+    throw new Error(`${keycloakApiUrl} is not defined`);
+  }
+  return process.env[keycloakApiUrl];
 }
 
-const keycloakConfig: KeycloakConfig = {
-  realm: 'gaia-x',
-  clientId: 'portal',
-  url: process.env.REACT_APP_KEYCLOAK_API_URL,
+const config: KeycloakConfig = {
+  ...keycloakConfig.config,
+  url: getDotEnvKeycloakApiUrl(keycloakConfig.config.url)
 };
 
 const keycloak = new Keycloak(keycloakConfig);
-
-const keycloakInitOptions: KeycloakInitOptions = {
-  onLoad: 'check-sso',
-  checkLoginIframe: false,
-  pkceMethod: 'S256',
-};
+const initOptions = keycloakConfig.initOptions as KeycloakInitOptions;
 
 export interface AuthContextType {
   isAuthenticated: boolean;
@@ -35,7 +33,7 @@ const defaultAuthContextValues: AuthContextType = {
   token: '',
   login: () => Promise.resolve(),
   logout: () => Promise.resolve(),
-  hasRole: (role: string) => false,
+  hasRole: (_role: string) => false,
   redirectPath: null,
   setRedirectPath: () => {},
 };
@@ -58,7 +56,7 @@ const AuthContextProvider: React.FC<AuthContextProviderProps> = ({
   // Initialise Keycloak
   useEffect(() => {
     keycloak
-      .init(keycloakInitOptions)
+      .init(initOptions)
       .then((authenticated) => {
         setIsAuthenticated(authenticated);
         if (authenticated) {
diff --git a/src/keycloak-config.json b/src/keycloak-config.json
new file mode 100644
index 00000000..9cccc03f
--- /dev/null
+++ b/src/keycloak-config.json
@@ -0,0 +1,12 @@
+{
+  "config": {
+    "realm": "gaia-x",
+    "clientId": "portal",
+    "url": "https://fc-keycloak.gxfs.gx4fm.org/"
+  },
+  "initOptions": {
+    "onLoad": "check-sso",
+    "checkLoginIframe": false,
+    "pkceMethod": "S256"
+  }
+}
diff --git a/src/keycloak-config.prod.json b/src/keycloak-config.prod.json
new file mode 100644
index 00000000..9cccc03f
--- /dev/null
+++ b/src/keycloak-config.prod.json
@@ -0,0 +1,12 @@
+{
+  "config": {
+    "realm": "gaia-x",
+    "clientId": "portal",
+    "url": "https://fc-keycloak.gxfs.gx4fm.org/"
+  },
+  "initOptions": {
+    "onLoad": "check-sso",
+    "checkLoginIframe": false,
+    "pkceMethod": "S256"
+  }
+}