diff --git a/libs/mf-tools/src/lib/web-components/bootstrap-utils.ts b/libs/mf-tools/src/lib/web-components/bootstrap-utils.ts
index 5f13f4e0..5359178a 100644
--- a/libs/mf-tools/src/lib/web-components/bootstrap-utils.ts
+++ b/libs/mf-tools/src/lib/web-components/bootstrap-utils.ts
@@ -7,9 +7,10 @@ import {
   PlatformRef,
   Type,
   Version,
+  VERSION,
 } from '@angular/core';
 import { platformBrowser } from '@angular/platform-browser';
-import { VERSION } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
 import {
   getGlobalStateSlice,
   setGlobalStateSlice,
@@ -211,6 +212,7 @@ function shareShellZone(injector: Injector) {
 
 function connectMicroFrontendRouter(injector: Injector) {
   const router = injector.get(Router);
+  const baseHref = injector.get(APP_BASE_HREF, '');
   const useHash = location.href.includes('#');
 
   if (!router) {
@@ -218,5 +220,5 @@ function connectMicroFrontendRouter(injector: Injector) {
     return;
   }
 
-  connectRouter(router, useHash);
+  connectRouter(router, useHash, baseHref);
 }
diff --git a/libs/mf-tools/src/lib/web-components/router-utils.ts b/libs/mf-tools/src/lib/web-components/router-utils.ts
index 2fea414d..b0b33c4a 100644
--- a/libs/mf-tools/src/lib/web-components/router-utils.ts
+++ b/libs/mf-tools/src/lib/web-components/router-utils.ts
@@ -20,10 +20,17 @@ export function endsWith(prefix: string): UrlMatcher {
   };
 }
 
-export function connectRouter(router: Router, useHash = false): void {
+export function connectRouter(
+  router: Router,
+  useHash = false,
+  baseHref?: string
+): void {
   let url: string;
   if (!useHash) {
     url = `${location.pathname.substring(1)}${location.search}`;
+    if (baseHref && url.startsWith(baseHref)) {
+      url = url.replace(baseHref, '');
+    }
     router.navigateByUrl(url);
     window.addEventListener('popstate', () => {
       router.navigateByUrl(url);