diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
index da395e352e..0b0eabf77f 100644
--- a/cypress/integration/sitemap-vrt/constants.ts
+++ b/cypress/integration/sitemap-vrt/constants.ts
@@ -316,7 +316,7 @@ export const SITEMAP = [
   "/patterns/notifications-and-feedback/",
   "/patterns/pricing/",
   "/patterns/privacy/",
-  "/patterns/status/",
+  "/patterns/object-status/",
   "/primitives/combobox-primitive/",
   "/patterns/create/",
   "/primitives/",
diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
index 8647bcfb57..b5acee5edc 100644
--- a/packages/paste-website/package.json
+++ b/packages/paste-website/package.json
@@ -154,6 +154,7 @@
     "airtable": "^0.11.6",
     "color": "^3.1.2",
     "common-tags": "^1.8.2",
+    "cookie": "^1.0.2",
     "date-fns": "2.21.3",
     "deepmerge": "4.2.2",
     "dogapi": "^2.8.4",
@@ -175,6 +176,7 @@
     "micromark-extension-mdxjs": "^2.0.0",
     "minimist": "^1.2.8",
     "next": "^14.0.0",
+    "nookies": "^2.5.2",
     "openai": "^4.79.1",
     "pretty-format": "^28.1.0",
     "prism-react-renderer": "^1.3.5",
diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
index 4c1df8801e..fbb353f898 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
@@ -11,9 +11,14 @@ import { SiteSearch } from "../../site-search";
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const { breakpointIndex } = useWindowSize();
-  const isMacOS = navigator.platform.toUpperCase().includes("MAC");
+  // navigator is not available in SSR, settign a default until it renders to client
+  const [isMacOS, setIsMacOS] = React.useState<boolean>();
   const platformTriggerKey = isMacOS ? "Meta" : "Control";
 
+  React.useEffect(() => {
+    setIsMacOS(typeof window !== "undefined" && navigator && navigator?.platform.toUpperCase().includes("MAC"));
+  }, []);
+
   const onOpen = (): void => {
     setIsOpen(true);
   };
@@ -68,7 +73,7 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          {breakpointIndex === 0 ? null : (
+          {breakpointIndex === 0 || isMacOS === undefined ? null : (
             <>
               <Box as="span" color="colorText" aria-hidden="true" marginLeft="space30" lineHeight="lineHeight20">
                 <KeyboardKeyGroup {...keyCombinationState}>
diff --git a/packages/paste-website/src/hooks/useDarkMode.tsx b/packages/paste-website/src/hooks/useDarkMode.tsx
index 02b7bd725e..6c7fa2b850 100644
--- a/packages/paste-website/src/hooks/useDarkMode.tsx
+++ b/packages/paste-website/src/hooks/useDarkMode.tsx
@@ -1,28 +1,26 @@
 import type { ValueOf } from "@twilio-paste/types";
 import * as React from "react";
 
-import { SimpleStorage } from "../utils/SimpleStorage";
+import { setCookie } from "../utils/cookies";
 
 export type UseDarkModeReturn = [ValidThemeName, () => void, boolean];
 
+export const themeCookieKey = "paste-docs-theme";
+
 const ValidThemes = {
   DEFAULT: "twilio",
   DARK: "twilio-dark",
 } as const;
 
-type ValidThemeName = ValueOf<typeof ValidThemes>;
-
-const isValidTheme = (themeName: ValidThemeName): boolean => {
-  return Object.values(ValidThemes).includes(themeName);
-};
+export type ValidThemeName = ValueOf<typeof ValidThemes>;
 
-export const useDarkMode = (): UseDarkModeReturn => {
-  const [theme, setTheme] = React.useState<ValidThemeName>(ValidThemes.DEFAULT);
+export const useDarkMode = (defaultValue: ValidThemeName): UseDarkModeReturn => {
+  const [theme, setTheme] = React.useState<ValidThemeName>(defaultValue);
   const [componentMounted, setComponentMounted] = React.useState(false);
 
   const setMode = (mode: ValidThemeName): void => {
-    SimpleStorage.set("theme", mode);
     setTheme(mode);
+    setCookie(null, themeCookieKey, mode);
   };
 
   const toggleTheme = (): void => {
@@ -34,16 +32,6 @@ export const useDarkMode = (): UseDarkModeReturn => {
   };
 
   React.useEffect(() => {
-    const localTheme = SimpleStorage.get("theme") as ValidThemeName;
-
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) {
-      setMode(ValidThemes.DARK);
-    } else if (localTheme && isValidTheme(localTheme)) {
-      setTheme(localTheme);
-    } else {
-      setMode(ValidThemes.DEFAULT);
-    }
-
     setComponentMounted(true);
   }, []);
 
diff --git a/packages/paste-website/src/pages/_app.tsx b/packages/paste-website/src/pages/_app.tsx
index 588491a509..9fc7353105 100644
--- a/packages/paste-website/src/pages/_app.tsx
+++ b/packages/paste-website/src/pages/_app.tsx
@@ -1,9 +1,11 @@
 import { datadogRum } from "@datadog/browser-rum";
 import { Theme } from "@twilio-paste/theme";
-import type { AppProps } from "next/app";
+import type { AppContext, AppInitialProps, AppProps } from "next/app";
+import NextApp from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import Script from "next/script";
+import { parseCookies } from "nookies";
 import * as React from "react";
 
 import packageJSON from "../../../paste-core/core-bundle/package.json";
@@ -11,18 +13,24 @@ import { CookieConsent } from "../components/CookieConsent";
 import { DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN, ENVIRONMENT_CONTEXT, SITE_BREAKPOINTS } from "../constants";
 import { DarkModeContext } from "../context/DarkModeContext";
 import { PreviewThemeContext } from "../context/PreviewThemeContext";
-import { useDarkMode } from "../hooks/useDarkMode";
+import { ValidThemeName, themeCookieKey, useDarkMode } from "../hooks/useDarkMode";
 import * as gtag from "../lib/gtag";
 import { SimpleStorage } from "../utils/SimpleStorage";
 import { inCypress } from "../utils/inCypress";
 
 const isProd = ENVIRONMENT_CONTEXT === "production";
 
-const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
+interface AppPageProps {
+  serverThemeCookie?: ValidThemeName;
+}
+
+const App = ({ Component, pageProps, serverThemeCookie }: AppProps & AppPageProps): React.ReactElement => {
+  const cookieTheme: ValidThemeName =
+    serverThemeCookie || (parseCookies()[themeCookieKey] as ValidThemeName) || "twilio";
   const router = useRouter();
   const localStorageKey = "cookie-consent-accepted";
-  const [theme, toggleMode, componentMounted] = useDarkMode();
-  const [previewTheme, setPreviewTheme] = React.useState("twilio");
+  const [theme, toggleMode, componentMounted] = useDarkMode(cookieTheme);
+  const [previewTheme, setPreviewTheme] = React.useState<string>(cookieTheme);
   const [cookiesAccepted, setCookiesAccepted] = React.useState<null | string>();
 
   React.useEffect(() => {
@@ -111,26 +119,37 @@ const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
         </>
       )}
       <Theme.Provider
-        theme={theme}
+        theme={serverThemeCookie || theme}
         customBreakpoints={SITE_BREAKPOINTS}
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
       >
-        {componentMounted ? (
-          <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
-            <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
-              <Component {...pageProps} />
-              {cookiesAccepted === null && (
-                <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />
-              )}
-            </PreviewThemeContext.Provider>
-          </DarkModeContext.Provider>
-        ) : (
-          <></>
-        )}
+        <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
+          <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
+            <Component {...pageProps} />
+            {cookiesAccepted === null && <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />}
+          </PreviewThemeContext.Provider>
+        </DarkModeContext.Provider>
       </Theme.Provider>
     </>
   );
 };
 
+App.getInitialProps = async (context: AppContext): Promise<AppPageProps & AppInitialProps> => {
+  const ctx = await NextApp.getInitialProps(context);
+  const cookies = context.ctx.req?.headers?.cookie;
+  const responseCookie = context.ctx?.res?.getHeader(themeCookieKey);
+
+  if (cookies) {
+    const cookiestring = new RegExp(`${themeCookieKey}=[^;]+`).exec(cookies);
+    const decodedString = decodeURIComponent(cookiestring ? cookiestring.toString().replace(/^[^=]+./, "") : "");
+
+    return { ...ctx, serverThemeCookie: decodedString as ValidThemeName };
+  } else if (responseCookie) {
+    return { ...ctx, serverThemeCookie: responseCookie as ValidThemeName };
+  }
+
+  return { ...ctx };
+};
+
 export default App;
diff --git a/packages/paste-website/src/pages/blog/2023-06-12-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2023-06-12-paste-newsletter.mdx
index 9a65a85cbb..d54ee5bad4 100644
--- a/packages/paste-website/src/pages/blog/2023-06-12-paste-newsletter.mdx
+++ b/packages/paste-website/src/pages/blog/2023-06-12-paste-newsletter.mdx
@@ -140,7 +140,7 @@ We can't thank Megan enough for her contributions. Her dedication to creating a
 | **Navigation UI Kit components**   | Complementary React components to implement our Navigation UI kit.                                        |
 | **Progress Steps component**       | A highly requested component that shows a user a clear path to complete a complex multi-step task.        |
 | **Number Input component**         | An input that limits data to number entry and has styled +/- buttons.                                     |
-| **Status components**              | Components that implement the [Status Pattern](/patterns/status), including Status Badge and Status Menu. |
+| **Status components**              | Components that implement the [Object Status Pattern](/patterns/object-status), including Status Badge and Status Menu. |
 | **Checkbox and Radio Menu Items**  | A menu that presents a list of items that a user can choose to perform an action with.                    |
 | **Design of the Slider component** | A component that allows a draggable input over a range of numbers.                                        |
 
diff --git a/packages/paste-website/src/pages/blog/2023-08-02-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2023-08-02-paste-newsletter.mdx
index 354e6ef633..5ffb57e3d9 100644
--- a/packages/paste-website/src/pages/blog/2023-08-02-paste-newsletter.mdx
+++ b/packages/paste-website/src/pages/blog/2023-08-02-paste-newsletter.mdx
@@ -123,7 +123,7 @@ Providing a common way for a user to control or edit their account, settings or
 
 <ResponsiveImage src={StatusBadgeImage} alt="Preview of the Navigation UI Kit components" />
 
-The [Status Badge](/components/status-badge) further evolves from our [Status Pattern](/patterns/status), allowing you to communicate status updates for any process or connection seamlessly. It provides an implementation of the Status Pattern using an appropriate combination of status level indicators, icons and colors.
+The [Status Badge](/components/status-badge) further evolves from our [Object Status Pattern](/patterns/object-status), allowing you to communicate status updates for any process or connection seamlessly. It provides an implementation of the Status Pattern using an appropriate combination of status level indicators, icons and colors.
 
 ### [Status Menu](/components/status-menu)
 
diff --git a/packages/paste-website/src/pages/components/description-list/index.mdx b/packages/paste-website/src/pages/components/description-list/index.mdx
index e0477e0b55..ca703317c0 100644
--- a/packages/paste-website/src/pages/components/description-list/index.mdx
+++ b/packages/paste-website/src/pages/components/description-list/index.mdx
@@ -89,7 +89,7 @@ Use a basic Description List for conveying small, static bits of data.
 
 ### Description List with Icon
 
-The Description List can be used with [Status Pattern](/patterns/status).
+The Description List can be used with [Object Status Pattern](/patterns/object-status).
 
 <LivePreview
   scope={{
diff --git a/packages/paste-website/src/pages/components/status-badge/index.mdx b/packages/paste-website/src/pages/components/status-badge/index.mdx
index 0932292329..a42ac573db 100644
--- a/packages/paste-website/src/pages/components/status-badge/index.mdx
+++ b/packages/paste-website/src/pages/components/status-badge/index.mdx
@@ -90,7 +90,7 @@ export const getStaticProps = async () => {
 
 ## About Status Badge
 
-Status badge is an implementation of the [Status Pattern](/patterns/status) to display the status of a process or connectivity in your product.
+Status badge is an implementation of the [Object Status Pattern](/patterns/object-status) to display the status of a process or connectivity in your product.
 
 ### Accessibility
 
diff --git a/packages/paste-website/src/pages/components/status-menu/index.mdx b/packages/paste-website/src/pages/components/status-menu/index.mdx
index 6729a079a9..6c7f9ae8ee 100644
--- a/packages/paste-website/src/pages/components/status-menu/index.mdx
+++ b/packages/paste-website/src/pages/components/status-menu/index.mdx
@@ -71,7 +71,7 @@ export const getStaticProps = async () => {
 
 ### About Status Menu
 
-Use a Status Menu to both display and change the status of a connection or process. It closely follows the [Status Pattern](/patterns/status) and comes with preconfigured options for displaying the status of both processes and connections, using the correct icons for each.
+Use a Status Menu to both display and change the status of a connection or process. It closely follows the [Object Status Pattern](/patterns/object-status) and comes with preconfigured options for displaying the status of both processes and connections, using the correct icons for each.
 
 ### Accessibility
 
diff --git a/packages/paste-website/src/pages/patterns/object-status/index.mdx b/packages/paste-website/src/pages/patterns/object-status/index.mdx
index a44719c607..f8ed965e2d 100644
--- a/packages/paste-website/src/pages/patterns/object-status/index.mdx
+++ b/packages/paste-website/src/pages/patterns/object-status/index.mdx
@@ -139,7 +139,7 @@ export const getStaticProps = async () => {
         </Heading>
         <Paragraph marginBottom="space0">
           Create a composition with <Anchor href="/primitives/box">Box</Anchor>,{' '}
-          <Anchor href="/components/icon">Icon</Anchor>, and <Anchor href="/components/text">Text</Anchor>.
+          <Anchor href="/components/icon">Icon</Anchor>, and <Anchor href="/primitives/text">Text</Anchor>.
         </Paragraph>
     </Card>
   </Column>
diff --git a/packages/paste-website/src/utils/cookies.ts b/packages/paste-website/src/utils/cookies.ts
new file mode 100644
index 0000000000..0bf422bb8e
--- /dev/null
+++ b/packages/paste-website/src/utils/cookies.ts
@@ -0,0 +1,30 @@
+import { ParseOptions, parse } from "cookie";
+import { NextPageContext } from "next";
+import { parseCookies as parseRequestCookies } from "nookies";
+
+export { setCookie, destroyCookie } from "nookies";
+
+const cookieStringFromSetCookie = (cookies: string[] = []): string =>
+  cookies
+    .map((cookie) => {
+      const [keyValuePart] = cookie.split(";");
+      return keyValuePart;
+    })
+    .join("; ");
+
+const parseResponseCookies = (ctx: NextPageContext, options?: ParseOptions): Record<string, any> => {
+  let responseCookies: Record<string, any> = {};
+  if (ctx?.res) {
+    const setCookieHeader = ctx.res.getHeader("Set-Cookie");
+    const cookie = cookieStringFromSetCookie(Array.isArray(setCookieHeader) ? setCookieHeader : []);
+    responseCookies = parse(cookie, options);
+  }
+
+  return responseCookies;
+};
+
+export const getCookie = (ctx: NextPageContext, name: string, options?: ParseOptions): string => {
+  const responseCookies = parseResponseCookies(ctx, options);
+  const requestCookies = parseRequestCookies(ctx);
+  return responseCookies[name] || requestCookies[name];
+};
diff --git a/yarn.lock b/yarn.lock
index cfdb00f204..419823d928 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16289,6 +16289,7 @@ __metadata:
     airtable: ^0.11.6
     color: ^3.1.2
     common-tags: ^1.8.2
+    cookie: ^1.0.2
     date-fns: 2.21.3
     deepmerge: 4.2.2
     dogapi: ^2.8.4
@@ -16310,6 +16311,7 @@ __metadata:
     micromark-extension-mdxjs: ^2.0.0
     minimist: ^1.2.8
     next: ^14.0.0
+    nookies: ^2.5.2
     openai: ^4.79.1
     pretty-format: ^28.1.0
     prism-react-renderer: ^1.3.5
@@ -22377,13 +22379,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie@npm:~0.4.1":
+"cookie@npm:^0.4.1, cookie@npm:~0.4.1":
   version: 0.4.2
   resolution: "cookie@npm:0.4.2"
   checksum: a00833c998bedf8e787b4c342defe5fa419abd96b32f4464f718b91022586b8f1bafbddd499288e75c037642493c83083da426c6a9080d309e3bd90fd11baa9b
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55
+  languageName: node
+  linkType: hard
+
 "copy-descriptor@npm:^0.1.0":
   version: 0.1.1
   resolution: "copy-descriptor@npm:0.1.1"
@@ -35769,6 +35778,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"nookies@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "nookies@npm:2.5.2"
+  dependencies:
+    cookie: ^0.4.1
+    set-cookie-parser: ^2.4.6
+  checksum: 4cc6fd8d0ab9fce840ccdb161eefe9dee581f441429fc729f279924491ebd1c12c220f889b6e315d66f8ea00bef944966969c966c957a6b9918ced7d7f9cc8a8
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^4.0.3":
   version: 4.0.3
   resolution: "nopt@npm:4.0.3"
@@ -41673,6 +41692,13 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.4.6":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.1.1":
   version: 1.1.1
   resolution: "set-function-length@npm:1.1.1"