diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx
deleted file mode 100644
index e27477b..0000000
--- a/pages/app/app-context.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { createContext, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
-import mapValues from "lodash/mapValues";
-
-import { applyDensity, applyMode, Density, disableMotion, Mode } from "@cloudscape-design/global-styles";
-
-interface AppUrlParams {
-  mode: Mode;
-  density: Density;
-  direction: "ltr" | "rtl";
-  motionDisabled: boolean;
-  i18n: boolean;
-  screenshotMode: boolean;
-}
-
-export interface AppContextType<T = unknown> {
-  pageId?: string;
-  urlParams: AppUrlParams & T;
-  setUrlParams: (newParams: Partial<AppUrlParams & T>) => void;
-}
-
-const appContextDefaults: AppContextType = {
-  pageId: undefined,
-  urlParams: {
-    mode: Mode.Light,
-    density: Density.Comfortable,
-    direction: "ltr",
-    motionDisabled: false,
-    i18n: true,
-    screenshotMode: false,
-  },
-  setUrlParams: () => {},
-};
-
-const AppContext = createContext<AppContextType>(appContextDefaults);
-
-export default AppContext;
-
-function parseQuery(urlParams: URLSearchParams) {
-  const queryParams: Record<string, any> = { ...appContextDefaults.urlParams };
-  urlParams.forEach((value, key) => (queryParams[key] = value));
-
-  return mapValues(queryParams, (value) => {
-    if (value === "true" || value === "false") {
-      return value === "true";
-    }
-    return value;
-  });
-}
-
-function formatQuery(params: AppUrlParams) {
-  const query: Record<string, string> = {};
-  for (const [key, value] of Object.entries(params)) {
-    if (value === appContextDefaults.urlParams[key as keyof AppUrlParams]) {
-      continue;
-    }
-    query[key as keyof AppUrlParams] = String(value);
-  }
-  return query;
-}
-
-export function AppContextProvider({ children }: { children: React.ReactNode }) {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const urlParams = parseQuery(searchParams) as AppUrlParams;
-
-  function setUrlParams(newParams: Partial<AppUrlParams>) {
-    setSearchParams(formatQuery({ ...urlParams, ...newParams }));
-
-    if ((newParams.direction ?? "ltr") !== (urlParams.direction ?? "ltr")) {
-      window.location.reload();
-    }
-  }
-
-  useEffect(() => {
-    applyMode(urlParams.mode);
-  }, [urlParams.mode]);
-
-  useEffect(() => {
-    applyDensity(urlParams.density);
-  }, [urlParams.density]);
-
-  useEffect(() => {
-    disableMotion(urlParams.motionDisabled);
-  }, [urlParams.motionDisabled]);
-
-  document.documentElement.setAttribute("dir", urlParams.direction);
-
-  return <AppContext.Provider value={{ urlParams, setUrlParams: setUrlParams }}>{children}</AppContext.Provider>;
-}
diff --git a/pages/app/index.tsx b/pages/app/index.tsx
index 1020a3c..4fcd70c 100644
--- a/pages/app/index.tsx
+++ b/pages/app/index.tsx
@@ -1,9 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Suspense, useContext } from "react";
+import { Suspense } from "react";
 import { HashRouter, Route, Routes, useHref, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 
+import { AppModesProvider, useAppModes } from "@cloudscape-design/build-tools/lib/dev-pages-utils";
 import Alert from "@cloudscape-design/components/alert";
 import AppLayout from "@cloudscape-design/components/app-layout";
 import Box from "@cloudscape-design/components/box";
@@ -14,7 +15,6 @@ import Spinner from "@cloudscape-design/components/spinner";
 import TopNavigation from "@cloudscape-design/components/top-navigation";
 import { Density, Mode } from "@cloudscape-design/global-styles";
 
-import AppContext, { AppContextProvider } from "./app-context";
 import { pages, pagesMap } from "./pages";
 
 import "@cloudscape-design/global-styles/index.css";
@@ -22,15 +22,15 @@ import "@cloudscape-design/global-styles/index.css";
 export default function App() {
   return (
     <HashRouter>
-      <AppContextProvider>
+      <AppModesProvider>
         <AppBody />
-      </AppContextProvider>
+      </AppModesProvider>
     </HashRouter>
   );
 }
 
 function AppBody() {
-  const { urlParams } = useContext(AppContext);
+  const { urlParams } = useAppModes();
   const routes = (
     <>
       <Navigation />
@@ -70,7 +70,7 @@ function Page({ pageId }: { pageId: string }) {
 function Navigation() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const { urlParams, setUrlParams } = useContext(AppContext);
+  const { urlParams, setUrlParams } = useAppModes();
   const isDarkMode = urlParams.mode === Mode.Dark;
   const isCompactMode = urlParams.density === Density.Compact;
   const isRtl = urlParams.direction === "rtl";
diff --git a/pages/app/screenshot-area.tsx b/pages/app/screenshot-area.tsx
index ec3208b..717ef0c 100644
--- a/pages/app/screenshot-area.tsx
+++ b/pages/app/screenshot-area.tsx
@@ -1,14 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode, useContext } from "react";
+import { ReactNode } from "react";
 import clsx from "clsx";
 
-import AppContext from "./app-context";
+import { useAppModes } from "@cloudscape-design/build-tools/lib/dev-pages-utils";
 
 import styles from "./screenshot-area.module.css";
 
 export function ScreenshotArea({ children }: { children: ReactNode }) {
-  const { urlParams } = useContext(AppContext);
+  const { urlParams } = useAppModes();
   return <div className={clsx("screenshot-area", urlParams.screenshotMode && styles["no-animation"])}>{children}</div>;
 }