diff --git a/apps/backoffice/src/app/layouts/components/AppSidebar.tsx b/apps/backoffice/src/app/layouts/components/AppSidebar.tsx
index ad2aca258..5798f27f0 100644
--- a/apps/backoffice/src/app/layouts/components/AppSidebar.tsx
+++ b/apps/backoffice/src/app/layouts/components/AppSidebar.tsx
@@ -10,7 +10,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 const NAV_ITEMS = [
   { label: 'Dashboard', icon: IconDashboard, path: '/dashboard' },
   { label: 'Items', icon: IconBox, path: '/items' },
-  { label: 'User Management', icon: IconUsers, path: '/user-management' },
+  { label: 'User Management', icon: IconUsers, path: '/um' },
   { label: 'Audit Log', icon: IconClipboardList, path: '/audit-log' },
 ];
 
diff --git a/apps/backoffice/vite.config.mts b/apps/backoffice/vite.config.mts
index 74bb91caf..1203f176b 100644
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -24,9 +24,9 @@ export default defineConfig({
     host: 'localhost',
   },
   preview: { port: 4201, host: 'localhost' },
-  plugins: [react(), nxViteTsPaths()],
+  plugins: [react(), nxViteTsPaths(), userManagementSpaFallback()],
   resolve: {
-    dedupe: [userManagementSpaFallback(), 'react', 'react-dom', 'react-router-dom', '@tanstack/react-query'],
+    dedupe: ['react', 'react-dom', 'react-router-dom', '@tanstack/react-query'],
   },
   build: {
     outDir: '../../dist/apps/backoffice',
diff --git a/user-management-config/fhc.theme.ts b/user-management-config/fhc.theme.ts
index 04bfcdcde..6620b0b4a 100644
--- a/user-management-config/fhc.theme.ts
+++ b/user-management-config/fhc.theme.ts
@@ -88,9 +88,9 @@ export const FHC_COLORS = {
  */
 export const FHC_LAYOUT = {
   sidebar: {
-    bg: "linear-gradient(180deg, #5D2E1F 0%, #3D1E14 100%)",
-    headerBg: "rgba(93, 46, 31, 0.82)",
-    footerBg: "rgba(61, 30, 20, 0.62)",
+    bg: "linear-gradient(180deg, #1A3A5C 0%, #0F2440 100%)",
+    headerBg: "rgba(26, 58, 92, 0.82)",
+    footerBg: "rgba(15, 36, 64, 0.62)",
     border: "rgba(255,255,255,0.10)",
     text: "rgba(255,255,255,0.76)",
     mutedText: "rgba(255,255,255,0.42)",
@@ -102,7 +102,7 @@ export const FHC_LAYOUT = {
     activeBg: "rgba(255,255,255,0.15)",
     activeBorder: "rgba(255,255,255,0.14)",
     sectionLine: "rgba(255,255,255,0.10)",
-    rail: "linear-gradient(180deg, #FFD700 0%, #4A90E2 100%)",
+    rail: "linear-gradient(180deg, #4A90E2 0%, #1A3A5C 100%)",
   },
   header: {
     bg: "rgba(255,255,255,0.92)",
@@ -117,11 +117,11 @@ export const FHC_LAYOUT = {
     cardBg: "rgba(255,255,255,0.92)",
   },
   brand: {
-    brick: "#5D2E1F",
-    brickDark: "#3D1E14",
+    brick: "#1A3A5C",
+    brickDark: "#0F2440",
     blue: "#4A90E2",
     blueDark: "#357ABD",
-    gold: "#FFD700",
+    gold: "#4A90E2",
     text: "#1F2937",
   },
   sizes: {
diff --git a/user-management-config/project.theme.ts b/user-management-config/project.theme.ts
index f87e687ba..e8a460ff4 100644
--- a/user-management-config/project.theme.ts
+++ b/user-management-config/project.theme.ts
@@ -124,14 +124,14 @@ export const projectTheme: DesignConfig = {
     // contentMaxWidth: "1440px",            // TODO: cap the content column
 
     // ── Side-menu skin (defaults follow the FHC brick theme) ───────────────
-    sidebarBackground: "linear-gradient(180deg, #5D2E1F 0%, #3D1E14 100%)",
+    sidebarBackground: "linear-gradient(180deg, #1A3A5C 0%, #0F2440 100%)",
     sidebarColor: "rgba(255,255,255,0.76)",
     sidebarMutedColor: "rgba(255,255,255,0.42)",
     sidebarActiveBackground: "rgba(255,255,255,0.15)",
     sidebarActiveColor: "#FFFFFF",
     sidebarHoverBackground: "rgba(255,255,255,0.08)",
     sidebarBorder: "rgba(255,255,255,0.10)",
-    sidebarRail: "linear-gradient(180deg, #FFD700 0%, #4A90E2 100%)",
+    sidebarRail: "linear-gradient(180deg, #4A90E2 0%, #1A3A5C 100%)",
     sidebarBrandLabel: "User Management",
     sidebarBrandSublabel: "Federal Housing",
 
@@ -181,11 +181,11 @@ export const projectTheme: DesignConfig = {
     menuHoverColor: "#357ABD",               // tab hover text
 
     // ── Create / edit modal skin (shared BackofficeModal) ──────────────────
-    modalAccentColor: "#5D2E1F",             // brick top strip
-    modalHeaderBackground: "#F6ECE8",        // header bg (view)
-    modalHeaderEditBackground: "#EACFC4",    // header bg (edit)
-    modalIconBackground: "#EACFC4",          // header icon chip bg
-    modalIconColor: "#5D2E1F",               // header icon chip color
+    modalAccentColor: "#357ABD",             // blue top strip
+    modalHeaderBackground: "#EEF4FC",        // header bg (view)
+    modalHeaderEditBackground: "#D9E8FA",    // header bg (edit)
+    modalIconBackground: "#D9E8FA",          // header icon chip bg
+    modalIconColor: "#357ABD",               // header icon chip color
     modalTitleColor: "#1F2937",              // modal title text
     modalFocusColor: "#357ABD",              // input focus ring inside modals
     modalSurface: "#ffffff",                 // modal body surface