diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 3e3466825c..3bec30fa31 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -56,12 +56,11 @@ import TSDBStatusPage from "./pages/TSDBStatusPage";
 import FlagsPage from "./pages/FlagsPage";
 import ConfigPage from "./pages/ConfigPage";
 import AgentPage from "./pages/AgentPage";
-import { Suspense, useEffect } from "react";
+import { Suspense } from "react";
 import ErrorBoundary from "./components/ErrorBoundary";
 import { ThemeSelector } from "./components/ThemeSelector";
 import { Notifications } from "@mantine/notifications";
-import { useAppDispatch } from "./state/hooks";
-import { updateSettings, useSettings } from "./state/settingsSlice";
+import { useSettings } from "./state/settingsSlice";
 import SettingsMenu from "./components/SettingsMenu";
 import ReadinessWrapper from "./components/ReadinessWrapper";
 import NotificationsProvider from "./components/NotificationsProvider";
@@ -172,37 +171,12 @@ const theme = createTheme({
   },
 });
 
-// This dynamically/generically determines the pathPrefix by stripping the first known
-// endpoint suffix from the window location path. It works out of the box for both direct
-// hosting and reverse proxy deployments with no additional configurations required.
-const getPathPrefix = (path: string) => {
-  if (path.endsWith("/")) {
-    path = path.slice(0, -1);
-  }
-
-  const pagePaths = [
-    ...mainNavPages,
-    ...allStatusPages,
-    { path: "/agent" },
-  ].map((p) => p.path);
-
-  const pagePath = pagePaths.find((p) => path.endsWith(p));
-  return path.slice(0, path.length - (pagePath || "").length);
-};
-
 const navLinkXPadding = "md";
 
 function App() {
   const [opened, { toggle }] = useDisclosure();
 
-  const pathPrefix = getPathPrefix(window.location.pathname);
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    dispatch(updateSettings({ pathPrefix }));
-  }, [pathPrefix, dispatch]);
-
-  const { agentMode, consolesLink } = useSettings();
+  const { agentMode, consolesLink, pathPrefix } = useSettings();
 
   const navLinks = (
     <>
diff --git a/web/ui/mantine-ui/src/state/settingsSlice.ts b/web/ui/mantine-ui/src/state/settingsSlice.ts
index 1591c43882..ea744e0149 100644
--- a/web/ui/mantine-ui/src/state/settingsSlice.ts
+++ b/web/ui/mantine-ui/src/state/settingsSlice.ts
@@ -4,7 +4,7 @@ import { initializeFromLocalStorage } from "./initializeFromLocalStorage";
 
 interface Settings {
   consolesLink: string | null;
-  lookbackDelta: string,
+  lookbackDelta: string;
   agentMode: boolean;
   ready: boolean;
   pathPrefix: string;
@@ -30,6 +30,32 @@ export const localStorageKeyEnableSyntaxHighlighting =
 export const localStorageKeyEnableLinter = "settings.enableLinter";
 export const localStorageKeyShowAnnotations = "settings.showAnnotations";
 
+// This dynamically/generically determines the pathPrefix by stripping the first known
+// endpoint suffix from the window location path. It works out of the box for both direct
+// hosting and reverse proxy deployments with no additional configurations required.
+const getPathPrefix = (path: string) => {
+  if (path.endsWith("/")) {
+    path = path.slice(0, -1);
+  }
+
+  const pagePaths = [
+    "/query",
+    "/alerts",
+    "/targets",
+    "/rules",
+    "/service-discovery",
+    "/status",
+    "/tsdb-status",
+    "/flags",
+    "/config",
+    "/alertmanager-discovery",
+    "/agent",
+  ];
+
+  const pagePath = pagePaths.find((p) => path.endsWith(p));
+  return path.slice(0, path.length - (pagePath || "").length);
+};
+
 export const initialState: Settings = {
   consolesLink:
     GLOBAL_CONSOLES_LINK === "CONSOLES_LINK_PLACEHOLDER" ||
@@ -44,7 +70,7 @@ export const initialState: Settings = {
     GLOBAL_LOOKBACKDELTA === null
       ? ""
       : GLOBAL_LOOKBACKDELTA,
-  pathPrefix: "",
+  pathPrefix: getPathPrefix(window.location.pathname),
   useLocalTime: initializeFromLocalStorage<boolean>(
     localStorageKeyUseLocalTime,
     false