diff --git a/assets/about/team_3.avif b/assets/about/team_3.avif
index 7858065de..19ec73d36 100644
Binary files a/assets/about/team_3.avif and b/assets/about/team_3.avif differ
diff --git a/assets/tailwind-theme.css b/assets/tailwind-theme.css
index 6694224d2..b4a18b2c6 100644
--- a/assets/tailwind-theme.css
+++ b/assets/tailwind-theme.css
@@ -1145,6 +1145,7 @@
     --text-6xl: 3.5rem;
     --text-6xl--line-height: 4rem;
     --text-6xl--letter-spacing: -0.1925rem;
+    --breakpoint-3xl: 110rem;
 
     /* Animation */
     --animate-accordion-down: accordion-down 0.2s ease-out;
diff --git a/pcweb/components/docpage/navbar/buttons/sidebar.py b/pcweb/components/docpage/navbar/buttons/sidebar.py
index 2da5dd101..1bee9486b 100644
--- a/pcweb/components/docpage/navbar/buttons/sidebar.py
+++ b/pcweb/components/docpage/navbar/buttons/sidebar.py
@@ -107,7 +107,7 @@ def navbar_sidebar_drawer(trigger) -> rx.Component:
                     rx.cond(
                         HostingBannerState.is_banner_visible,
                         "!top-[137px]",
-                        "!top-[74px]",
+                        "!top-[77px]",
                     ),
                 ),
             )
diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py
index 77ca712a7..d78665023 100644
--- a/pcweb/components/docpage/sidebar/sidebar.py
+++ b/pcweb/components/docpage/sidebar/sidebar.py
@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import reflex as rx
+import reflex_ui as ui
 
 from pcweb.components.docpage.navbar.state import NavbarState
 from pcweb.styles.colors import c_color
@@ -25,14 +26,26 @@
 
 Scrollable_SideBar = """
 function scrollToActiveSidebarLink() {
+  const sidebarContainer = document.getElementById('sidebar-container');
+  if (!sidebarContainer) return;
+
   const currentPath = window.location.pathname.replace(/\\/+$|\\/$/g, "") + "/";
 
-  const activeLink = document.querySelector(`#sidebar-container a[href="${currentPath}"]`) ||
-                    document.querySelector(`#sidebar-container a[href="${currentPath.slice(0, -1)}"]`);
+  const activeLink = sidebarContainer.querySelector(`a[href="${currentPath}"]`) ||
+                    sidebarContainer.querySelector(`a[href="${currentPath.slice(0, -1)}"]`);
 
   if (activeLink) {
-    activeLink.scrollIntoView({
-      block: "center",
+    // Get the scrollable parent within the sidebar
+    const scrollableParent = activeLink.closest('[class*="overflow-y-scroll"]') || sidebarContainer;
+    const linkRect = activeLink.getBoundingClientRect();
+    const containerRect = scrollableParent.getBoundingClientRect();
+
+    // Calculate the scroll position to center the link
+    const scrollTop = scrollableParent.scrollTop + (linkRect.top - containerRect.top) - (containerRect.height / 2) + (linkRect.height / 2);
+
+    scrollableParent.scrollTo({
+      top: scrollTop,
+      behavior: 'instant'
     });
   }
 }
@@ -44,7 +57,7 @@
 });
 
 document.addEventListener('click', (e) => {
-  const link = e.target.closest('a[href^="/docs"]');
+  const link = e.target.closest('#sidebar-container a[href^="/docs"]');
   if (link) {
     setTimeout(scrollToActiveSidebarLink, 200);
   }
@@ -103,26 +116,29 @@ def sidebar_leaf(
                 rx.cond(
                     item.link == url,
                     sidebar_link(
+                        rx.el.div(
+                            class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-m-slate-2 dark:bg-m-slate-10 z-[-1]",
+                        ),
                         rx.flex(
                             rx.text(
                                 item.names,
-                                class_name="font-small text-violet-9 transition-color",
+                                class_name="text-sm text-primary-10 font-[525] transition-color pl-4",
                             ),
-                            padding="0px 8px 0px 28px",
-                            class_name="border-l-[1.5px] border-violet-9",
+                            class_name="border-l-[1.5px] border-primary-10 relative ml-[2.5rem] max-w-[14rem] h-8 flex items-center",
                         ),
                         href=item.link,
+                        class_name="w-full relative",
                     ),
                     sidebar_link(
                         rx.flex(
                             rx.text(
                                 item.names,
-                                class_name="font-small text-slate-9 transition-color hover:text-slate-11 w-full",
+                                class_name="text-sm text-m-slate-7 hover:text-m-slate-11 dark:hover:text-m-slate-5 transition-color w-full font-[525]",
                             ),
-                            padding="0px 8px 0px 28px",
-                            class_name="border-l-[1.5px] border-slate-4 hover:border-slate-8",
+                            class_name="border-l-[1.5px] border-m-slate-4 dark:border-m-slate-9 hover:border-m-slate-8 dark:hover:border-m-slate-5 pl-4 h-8 flex items-center",
                         ),
                         href=item.link,
+                        class_name="w-full ml-[2.5rem]",
                     ),
                 ),
             ),
@@ -161,7 +177,7 @@ def sidebar_icon(name):
     }
 
     return (
-        rx.icon(tag=icon_map.get(name), size=16, class_name="mr-5")
+        rx.icon(tag=icon_map.get(name), size=16, class_name="mr-4")
         if name in icon_map
         else rx.fragment()
     )
@@ -183,17 +199,22 @@ def sidebar_item_comp(
                     sidebar_icon(item.names),
                     rx.text(
                         item.names,
-                        class_name="font-small",
+                        class_name="text-sm font-[525]",
                     ),
                     rx.box(class_name="flex-grow"),
-                    rx.accordion.icon(
-                        class_name="size-4 !text-slate-9 group-hover:!text-violet-9"
+                    ui.icon(
+                        "ArrowDown01Icon",
+                        class_name="size-4 group-data-[state=open]:rotate-180 transition-transform",
                     ),
-                    class_name="!px-0 flex items-center !bg-transparent !hover:bg-transparent !py-2 !pr-0 w-full !text-slate-9 aria-expanded:text-slate-11 hover:!text-slate-11 transition-color group",
+                    class_name="!px-0 flex items-center !bg-transparent !hover:bg-transparent !py-1 !pr-0 w-full !text-m-slate-7 hover:!text-m-slate-11 dark:hover:!text-m-slate-5 dark:!text-m-slate-6 transition-color group xl:max-w-[14rem]",
                 ),
+                class_name="justify-start !ml-[2.5rem]",
             ),
             rx.accordion.content(
                 rx.accordion.root(
+                    rx.accordion.item(
+                        class_name="absolute left-[2.5rem] size-full !shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:!shadow-[1.5px_0_0_0_var(--m-slate-9)_inset] z-[-1] pointer-events-none !rounded-none",
+                    ),
                     *[
                         sidebar_item_comp(
                             item_index="index" + str(child_index),
@@ -206,10 +227,7 @@ def sidebar_item_comp(
                     type="multiple",
                     collapsible=True,
                     default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
-                    style={
-                        "box-shadow": "inset 1.25px 0 0 0 var(--c-slate-4) !important"
-                    },
-                    class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none !bg-transparent !rounded-none",
+                    class_name="!my-1 flex flex-col items-start gap-1 list-none !bg-transparent !rounded-none !shadow-none relative",
                 ),
                 class_name="!p-0 w-full !bg-transparent before:!h-0 after:!h-0",
             ),
@@ -296,36 +314,31 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
         rx.el.div(
             rx.box(
                 rx.box(
-                    rx.box(
-                        rx.icon(
-                            tag=icon,
-                            size=16,
-                            class_name="!text-slate-9",
-                        ),
-                        class_name="flex justify-center items-center border-slate-4 bg-white-1 shadow-medium border rounded-md size-8",
+                    rx.icon(
+                        tag=icon,
+                        size=16,
                     ),
                     rx.el.h3(
                         name,
-                        class_name="font-small"
-                        + rx.cond(
-                            SidebarState.sidebar_index == index,
-                            " text-slate-11",
-                            " text-slate-9",
+                        class_name=ui.cn(
+                            "w-full font-[525]",
                         ),
                     ),
-                    class_name="flex flex-row justify-start items-center gap-3 w-full",
-                ),
-                rx.box(
-                    class_name="bg-violet-9 rounded-full shrink-0 size-[7px]"
-                    + rx.cond(
-                        SidebarState.sidebar_index == index, " visible", " hidden"
+                    class_name=ui.cn(
+                        "flex flex-row justify-start items-center gap-2.5 w-full text-sm text-m-slate-7 hover:text-primary-10 dark:hover:text-primary-9 h-8",
+                        rx.cond(
+                            SidebarState.sidebar_index == index,
+                            "text-primary-10 dark:text-primary-9",
+                            "",
+                        ),
                     ),
                 ),
-                class_name="cursor-pointer flex flex-row justify-between items-center hover:bg-slate-3 p-[0.5rem_1rem_0.5rem_0.5rem] rounded-2xl w-full transition-bg self-stretch"
-                + rx.cond(
-                    SidebarState.sidebar_index == index,
-                    " bg-slate-3",
-                    " bg-transparent",
+                class_name="cursor-pointer flex flex-row items-center gap-2.5",
+            ),
+            rx.cond(
+                SidebarState.sidebar_index == index,
+                rx.el.div(
+                    class_name="absolute left-0 top-0 w-full h-full bg-m-slate-2 dark:bg-m-slate-10 rounded-lg z-[-1]",
                 ),
             ),
             rx.el.a(
@@ -334,10 +347,10 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
                 class_name="inset-0 absolute z-[-1]",
                 aria_label=f"Navigate to {name}",
             ),
-            class_name="w-full text-slate-9 hover:!text-slate-9 relative",
+            class_name="w-full",
             on_click=[SidebarState.set_sidebar_index(index), rx.redirect(url)],
         ),
-        class_name="w-full",
+        class_name="w-full pl-[2.5rem] relative",
     )
 
 
@@ -356,11 +369,11 @@ def create_sidebar_section(
         rx.link(
             rx.el.h2(
                 section_title,
-                class_name="font-smbold text-[0.875rem] text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
+                class_name="font-mono text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9 uppercase text-[0.8125rem] leading-6 font-medium",
             ),
             underline="none",
             href=section_url,
-            class_name="py-3",
+            class_name="h-8 mb-2 flex items-center justify-start ml-[2.5rem]",
         ),
         rx.accordion.root(
             *[
@@ -375,7 +388,7 @@ def create_sidebar_section(
             type="multiple",
             collapsible=True,
             default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
-            class_name="ml-0 pl-0 w-full !bg-transparent !shadow-none rounded-[0px]",
+            class_name="ml-0 pl-0 w-full !bg-transparent !shadow-none rounded-[0px] flex flex-col gap-1",
         ),
         class_name="flex flex-col items-start ml-0 w-full",
     )
@@ -421,7 +434,7 @@ def sidebar_comp(
                 # sidebar_category(
                 #     "CLI Reference", cloud_pages[0].path, "book-marked", 1
                 # ),
-                class_name="flex flex-col items-start gap-1 w-full list-none",
+                class_name="flex flex-col items-start gap-2 w-full list-none",
             ),
             rx.cond(  # pyright: ignore [reportCallIssue]
                 rx.State.router.page.path.startswith("/docs/ai-builder/"),
@@ -444,7 +457,7 @@ def sidebar_comp(
                     #     "codesandbox",
                     #     2,
                     # ),
-                    class_name="flex flex-col items-start gap-1 w-full list-none",
+                    class_name="flex flex-col items-start gap-2 w-full list-none",
                 ),
                 # If the path doesn't start with /docs/cloud, check for general docs
                 rx.cond(  # pyright: ignore [reportCallIssue]
@@ -474,7 +487,7 @@ def sidebar_comp(
                             "building-2",
                             3,
                         ),
-                        class_name="flex flex-col items-start gap-1 w-full list-none",
+                        class_name="flex flex-col items-start gap-2 w-full list-none",
                     ),
                 ),
             ),
@@ -494,7 +507,7 @@ def sidebar_comp(
                             hosting_index,
                             url,
                         ),
-                        class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                        class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                     ),
                 ),
                 # (
@@ -507,7 +520,7 @@ def sidebar_comp(
                 #             cli_ref_index,
                 #             url,
                 #         ),
-                #         class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                #         class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                 #     ),
                 # ),
             ),
@@ -532,7 +545,7 @@ def sidebar_comp(
                                 ai_builder_integrations_index,
                                 url,
                             ),
-                            class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                            class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                         ),
                     ),
                     (
@@ -545,7 +558,7 @@ def sidebar_comp(
                                 mcp_index,
                                 url,
                             ),
-                            class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                            class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                         ),
                     ),
                     # (
@@ -558,7 +571,7 @@ def sidebar_comp(
                     #             ai_builder_integrations_index,
                     #             url,
                     #         ),
-                    #         class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                    #         class_name="flex flex-col items-start gap-6  w-full list-none list-style-none",
                     #     ),
                     # ),
                 ),
@@ -597,7 +610,7 @@ def sidebar_comp(
                                     recipes_index,
                                     url,
                                 ),
-                                class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                                class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                             ),
                         ),
                         (
@@ -635,8 +648,9 @@ def sidebar_comp(
                                     ),
                                     underline="none",
                                     href=custom_components.path,
+                                    class_name="w-fit lg:ml-[2.5rem]",
                                 ),
-                                class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                                class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                             ),
                         ),
                         (
@@ -649,7 +663,7 @@ def sidebar_comp(
                                     api_reference_index,
                                     url,
                                 ),
-                                class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                                class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                             ),
                         ),
                         (
@@ -669,7 +683,7 @@ def sidebar_comp(
                                     enterprise_component_index,
                                     url,
                                 ),
-                                class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                                class_name="flex flex-col items-start gap-8  w-full list-none list-style-none",
                             ),
                         ),
                     ),
@@ -685,7 +699,7 @@ def sidebar_comp(
                 "background_color": "transparent",
             },
         },
-        class_name="flex flex-col !pb-24 gap-6 items-start max-h-[90%] p-[1rem_0rem_1rem_1rem] lg-p2 scroll-p-4 fixed w-full overflow-y-scroll hidden-scrollbar lg:max-w-[300px]",
+        class_name="flex flex-col pb-24 gap-8 items-start h-full pt-8 pr-4 scroll-p-4 overflow-y-scroll hidden-scrollbar w-full 3xl:pl-0 pl-6",
     )
 
 
diff --git a/pcweb/flexdown.py b/pcweb/flexdown.py
index d14d6edda..27c7a8429 100644
--- a/pcweb/flexdown.py
+++ b/pcweb/flexdown.py
@@ -672,6 +672,16 @@ def markdown_with_shiki(*args, **kwargs):
     """
     return rx.markdown(
         *args,
-        component_map={"pre": markdown_codeblock},
+        component_map={
+            "h1": lambda text: h1_comp_xd(text=text),
+            "h2": lambda text: h2_comp_xd(text=text),
+            "h3": lambda text: h3_comp_xd(text=text),
+            "h4": lambda text: h4_comp_xd(text=text),
+            "p": lambda text: text_comp(text=text),
+            "li": lambda text: list_comp(text=text),
+            "a": doclink2,
+            "pre": markdown_codeblock,
+            "img": lambda src: img_comp_xd(src=src),
+        },
         **kwargs,
     )
diff --git a/pcweb/pages/landing/views/products.py b/pcweb/pages/landing/views/products.py
index 0d7a9e726..fbd1917d6 100644
--- a/pcweb/pages/landing/views/products.py
+++ b/pcweb/pages/landing/views/products.py
@@ -45,7 +45,7 @@ def product_card(
                 class_name="size-4 text-secondary-11 group-hover:text-slate-12 group-hover:translate-x-1 transition-all duration-300",
             ),
             to=url,
-            class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors border-t max-lg:border-b border-slate-3",
+            class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors border-t max-lg:border-b border-slate-3 mt-auto shrink-0",
         ),
         class_name="flex flex-col",
     )
diff --git a/pcweb/templates/docpage/blocks/headings.py b/pcweb/templates/docpage/blocks/headings.py
index eef04a56b..629d5add5 100644
--- a/pcweb/templates/docpage/blocks/headings.py
+++ b/pcweb/templates/docpage/blocks/headings.py
@@ -91,8 +91,8 @@ def create(
         href = rx.State.router.page.full_path + "#" + id_
         scroll_margin = rx.cond(
             HostingBannerState.is_banner_visible,
-            "scroll-m-[8.5rem]",
-            "scroll-m-[5rem]",
+            "scroll-mt-[113px]",
+            "scroll-mt-[77px]",
         )
 
         return super().create(
@@ -113,7 +113,7 @@ def create(
             href=href,
             on_click=lambda: rx.set_clipboard(href),
             # as_child=True,
-            class_name="flex flex-row items-center gap-6 hover:!text-violet-11 text-slate-12 cursor-pointer mb-2 transition-colors group",
+            class_name="flex flex-row items-center gap-6 hover:!text-violet-11 cursor-pointer mb-6 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
         )
 
 
@@ -125,7 +125,7 @@ def h1_comp(text: str) -> rx.Component:
     return h_comp_common(
         text=text,
         heading="h1",
-        class_name="font-x-large lg:font-xx-large",
+        class_name="lg:text-5xl text-3xl font-[525]",
     )
 
 
@@ -134,7 +134,7 @@ def h1_comp_xd(text: str) -> rx.Component:
     return h_comp_common(
         text=text,
         heading="h1",
-        class_name="font-x-large lg:font-xx-large",
+        class_name="lg:text-5xl text-3xl font-[525]",
     )
 
 
@@ -144,7 +144,7 @@ def h2_comp(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="font-large lg:font-x-large",
+        class_name="lg:text-4xl text-2xl font-[525]",
     )
 
 
@@ -154,7 +154,7 @@ def h2_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="font-large lg:font-x-large",
+        class_name="lg:text-3xl text-2xl font-[525]",
     )
 
 
@@ -164,7 +164,7 @@ def h3_comp(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="font-large",
+        class_name="lg:text-2xl text-xl font-[525]",
     )
 
 
@@ -174,7 +174,7 @@ def h3_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="font-large",
+        class_name="lg:text-2xl text-lg font-[525]",
     )
 
 
@@ -184,7 +184,7 @@ def h4_comp(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="font-md-smbold",
+        class_name="lg:text-xl text-lg font-[525]",
     )
 
 
@@ -194,7 +194,7 @@ def h4_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="font-md-smbold",
+        class_name="lg:text-xl text-lg font-[525]",
     )
 
 
diff --git a/pcweb/templates/docpage/blocks/typography.py b/pcweb/templates/docpage/blocks/typography.py
index 53751941f..652f0c7a3 100644
--- a/pcweb/templates/docpage/blocks/typography.py
+++ b/pcweb/templates/docpage/blocks/typography.py
@@ -35,17 +35,24 @@ def definition(title: str, *children) -> rx.Component:
 
 @rx.memo
 def text_comp(text: rx.Var[str]) -> rx.Component:
-    return rx.text(text, class_name="font-normal text-slate-12 mb-4 leading-7")
+    return rx.text(
+        text, class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 mb-4 leading-7"
+    )
 
 
 @rx.memo
 def text_comp_2(text: rx.Var[str]) -> rx.Component:
-    return rx.text(text, class_name="font-normal text-slate-12 max-w-[80%] mb-10")
+    return rx.text(
+        text,
+        class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 max-w-[80%] mb-10",
+    )
 
 
 @rx.memo
 def list_comp(text: rx.Var[str]) -> rx.Component:
-    return rx.list_item(text, class_name="font-normal text-slate-12 mb-4")
+    return rx.list_item(
+        text, class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 mb-4"
+    )
 
 
 @rx.memo
diff --git a/pcweb/templates/docpage/docpage.py b/pcweb/templates/docpage/docpage.py
index 5a9ebcade..acff5d774 100644
--- a/pcweb/templates/docpage/docpage.py
+++ b/pcweb/templates/docpage/docpage.py
@@ -26,22 +26,34 @@ def right_sidebar_item_highlight():
     // Delay to ensure DOM is fully loaded
     setTimeout(() => {
         const tocLinks = document.querySelectorAll('#toc-navigation a');
-        const activeClass = 'text-violet-9';
-        const defaultClass = 'text-slate-9';
+        const activeClasses = [
+            'text-m-violet-9',
+            'dark:text-m-violet-10',
+            'shadow-[1.5px_0_0_0_var(--primary-10)_inset]',
+            'dark:shadow-[1.5px_0_0_0_var(--primary-9)_inset]',
+        ];
+        const defaultClasses = ['text-m-slate-7', 'dark:text-m-slate-6'];
 
         function normalizeId(id) {
             return id.toLowerCase().replace(/\s+/g, '-');
         }
 
+        function setDefaultState(link) {
+            activeClasses.forEach(cls => link.classList.remove(cls));
+            defaultClasses.forEach(cls => link.classList.add(cls));
+        }
+
+        function setActiveState(link) {
+            defaultClasses.forEach(cls => link.classList.remove(cls));
+            activeClasses.forEach(cls => link.classList.add(cls));
+        }
+
         function highlightTocLink() {
             // Get the current hash from the URL
             const currentHash = window.location.hash.substring(1);
 
             // Reset all links
-            tocLinks.forEach(link => {
-                link.classList.remove(activeClass);
-                link.classList.add(defaultClass);
-            });
+            tocLinks.forEach(link => setDefaultState(link));
 
             // If there's a hash, find and highlight the corresponding link
             if (currentHash) {
@@ -52,8 +64,7 @@ def right_sidebar_item_highlight():
                 });
 
                 if (correspondingLink) {
-                    correspondingLink.classList.remove(defaultClass);
-                    correspondingLink.classList.add(activeClass);
+                    setActiveState(correspondingLink);
                 }
             }
         }
@@ -62,14 +73,10 @@ def right_sidebar_item_highlight():
         tocLinks.forEach(link => {
             link.addEventListener('click', (e) => {
                 // Remove active class from all links
-                tocLinks.forEach(otherLink => {
-                    otherLink.classList.remove(activeClass);
-                    otherLink.classList.add(defaultClass);
-                });
+                tocLinks.forEach(otherLink => setDefaultState(otherLink));
 
                 // Add active class to clicked link
-                e.target.classList.remove(defaultClass);
-                e.target.classList.add(activeClass);
+                setActiveState(e.target);
             });
         });
 
@@ -93,14 +100,10 @@ def right_sidebar_item_highlight():
 
                     if (correspondingLink) {
                         // Reset all links
-                        tocLinks.forEach(link => {
-                            link.classList.remove(activeClass);
-                            link.classList.add(defaultClass);
-                        });
+                        tocLinks.forEach(link => setDefaultState(link));
 
                         // Highlight current link
-                        correspondingLink.classList.remove(defaultClass);
-                        correspondingLink.classList.add(activeClass);
+                        setActiveState(correspondingLink);
                     }
                 }
             });
@@ -389,9 +392,9 @@ def breadcrumb(path: str, nav_sidebar: rx.Component):
 
         # Add the breadcrumb item to the list
         breadcrumbs.append(
-            rx.link(
+            rx.el.a(
                 to_title_case(to_snake_case(segment), sep=" "),
-                class_name="font-small text-slate-9 hover:!text-slate-11 transition-color"
+                class_name="min-h-8 flex items-center text-sm font-[525] text-m-slate-12 dark:text-m-slate-3 last:text-m-slate-7 dark:last:text-m-slate-6 hover:text-primary-10 dark:hover:text-primary-9"
                 + (" truncate" if i == len(segments) - 1 else ""),
                 underline="none",
                 href=current_path,
@@ -401,16 +404,15 @@ def breadcrumb(path: str, nav_sidebar: rx.Component):
         # If it's not the last segment, add a separator
         if i < len(segments) - 1:
             breadcrumbs.append(
-                rx.icon(
-                    tag="chevron-right",
-                    size=14,
-                    class_name="lg:flex hidden !text-slate-8",
+                ui.icon(
+                    "ArrowRight01Icon",
+                    class_name="lg:flex hidden dark:text-m-slate-6 text-m-slate-7 size-4",
                 ),
             )
             breadcrumbs.append(
                 rx.text(
                     "/",
-                    class_name="font-sm text-slate-8 lg:hidden flex",
+                    class_name="font-sm dark:text-m-slate-6 text-m-slate-7 lg:hidden flex",
                 )
             )
     from pcweb.components.hosting_banner import HostingBannerState
@@ -428,14 +430,14 @@ def breadcrumb(path: str, nav_sidebar: rx.Component):
             class_name="flex flex-row items-center gap-[5px] lg:gap-4 overflow-hidden",
         ),
         rx.box(
-            rx.icon(tag="chevron-down", size=14, class_name="!text-slate-9"),
+            ui.icon("ArrowDown01Icon", size=14, class_name="!text-slate-9"),
             class_name="p-[0.563rem] lg:hidden flex",
         ),
         class_name=ui.cn(
-            "relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-[135px] mb-6 lg:mb-8 p-[0.5rem_1rem_0.5rem_1rem] lg:p-0 border-b lg:border-none w-full",
+            "relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-[139px] lg:p-0 border-b lg:border-none w-full max-lg:py-2",
             rx.cond(
                 HostingBannerState.is_banner_visible,
-                "lg:mt-[175px]",
+                "lg:mt-[139px]",
                 "lg:mt-[145px] mt-[77px]",
             ),
         ),
@@ -630,11 +632,12 @@ def wrapper(*args, **kwargs) -> rx.Component:
                     rx.box(
                         sidebar,
                         class_name=(
-                            "w-full max-w-[300px] h-screen shrink-0 hidden lg:block z-10 "
+                            "w-[19.5rem] shrink-0 hidden lg:block z-10 border-r border-m-slate-4 dark:border-m-slate-10 sticky left-0 "
+                            "before:content-[''] before:absolute before:top-0 before:bottom-0 before:right-0 before:w-[100vw] before:bg-white-1 dark:before:bg-m-slate-11 before:-z-10 "
                             + rx.cond(
                                 HostingBannerState.is_banner_visible,
-                                " mt-[146px]",
-                                " mt-[90px]",
+                                " top-[113px] h-[calc(100vh-113px)]",
+                                " top-[77px] h-[calc(100vh-77px)]",
                             )
                         ),
                     ),
@@ -642,7 +645,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                         rx.box(
                             breadcrumb(path=path, nav_sidebar=nav_sidebar),
                             class_name=(
-                                "px-0 xl:px-14 pt-0"
+                                "px-0 pt-0 mb-[2rem]"
                                 + rx.cond(
                                     HostingBannerState.is_banner_visible,
                                     " mt-[90px]",
@@ -651,72 +654,75 @@ def wrapper(*args, **kwargs) -> rx.Component:
                             ),
                         ),
                         rx.box(
-                            rx.el.article(comp),
+                            rx.el.article(comp, class_name="[&>div]:!p-0"),
                             rx.el.nav(
                                 *links,
                                 class_name="flex flex-row gap-2 mt-8 lg:mt-10 mb-6 lg:mb-12",
                             ),
                             docpage_footer(path=path.rstrip("/")),
-                            class_name="lg:mt-0 mt-6 px-4 xl:px-10 h-auto bg-slate-1",
+                            class_name="lg:mt-0 h-auto",
+                        ),
+                        class_name=ui.cn(
+                            "flex-1 h-auto mx-auto lg:max-w-[42rem] px-4 overflow-y-auto",
+                            "lg:max-w-[56rem]" if not show_right_sidebar else "",
                         ),
-                        class_name="flex-1 bg-slate-1 h-auto mx-auto max-w-4xl overflow-y-auto",
-                        # class_name="flex-1 bg-slate-1 h-auto mx-auto overflow-y-auto "
-                        #     + "max-w-4xl" if show_right_sidebar and not pseudo_right_bar else "!max-w-7xl",
                     ),
                     rx.box(
                         rx.el.nav(
                             rx.box(
                                 rx.el.p(
-                                    "On this page",
-                                    class_name="font-smbold text-sm text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
+                                    "On This Page",
+                                    class_name="text-sm h-8 flex items-center justify-start font-[525] dark:text-m-slate-3 text-m-slate-12",
                                 ),
                                 rx.el.ul(
                                     *[
                                         (
                                             rx.el.li(
-                                                rx.link(
+                                                rx.el.a(
                                                     text,
-                                                    class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color break-words",
-                                                    underline="none",
+                                                    class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 break-words pl-4 min-h-7 flex items-center",
                                                     href=path
                                                     + "#"
                                                     + text.lower().replace(" ", "-"),
-                                                )
+                                                ),
+                                                class_name="min-h-8 flex items-center",
                                             )
                                             if level == 1
                                             else (
-                                                rx.list_item(
-                                                    rx.link(
+                                                rx.el.li(
+                                                    rx.el.a(
                                                         text,
-                                                        class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color break-words",
+                                                        class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 break-words min-h-7 pl-4 flex items-center",
                                                         underline="none",
                                                         href=path
                                                         + "#"
                                                         + text.lower().replace(
                                                             " ", "-"
                                                         ),
-                                                    )
+                                                    ),
+                                                    class_name="min-h-8 flex items-center",
                                                 )
                                                 if level == 2
                                                 else rx.el.li(
-                                                    rx.link(
+                                                    rx.el.a(
                                                         text,
                                                         underline="none",
-                                                        class_name="pl-3 block text-sm text-slate-9 hover:!text-slate-11 transition-color break-words",
+                                                        class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 break-words min-h-7 pl-8 flex items-center",
                                                         href=path
                                                         + "#"
                                                         + text.lower().replace(
                                                             " ", "-"
                                                         ),
-                                                    )
+                                                    ),
+                                                    class_name="min-h-8 flex items-center",
                                                 )
                                             )
                                         )
                                         for level, text in toc
                                     ],
-                                    class_name="flex flex-col gap-y-3 list-none",
+                                    class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:shadow-[1.5px_0_0_0_var(--m-slate-9)_inset]",
                                 ),
-                                class_name="flex flex-col justify-start gap-y-2 p-[0.875rem_0.5rem_0px_0.5rem] max-h-[80vh] overflow-y-auto sticky top-4",
+                                class_name="flex flex-col justify-start gap-y-4 max-h-[80vh] overflow-y-auto sticky top-4",
                             ),
                             class_name=(
                                 "w-full h-full"
@@ -736,9 +742,9 @@ def wrapper(*args, **kwargs) -> rx.Component:
                     else rx.box(
                         class_name="w-[180px] h-screen sticky top-0 shrink-0 hidden xl:block"
                     ),
-                    class_name="flex justify-center mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full lg:px-10",
+                    class_name="flex justify-center mx-auto mt-0 max-w-[108rem] h-full min-h-screen w-full",
                 ),
-                class_name="flex flex-col justify-center bg-slate-1 w-full relative",
+                class_name="flex flex-col justify-center bg-m-slate-1 dark:bg-m-slate-12 w-full relative",
                 on_mount=rx.call_script(right_sidebar_item_highlight()),
             )
 
diff --git a/pcweb/views/docs_navbar.py b/pcweb/views/docs_navbar.py
index 662582264..4971503be 100644
--- a/pcweb/views/docs_navbar.py
+++ b/pcweb/views/docs_navbar.py
@@ -151,7 +151,7 @@ def docs_navbar() -> rx.Component:
                 navigation_menu(),
                 class_name="relative flex w-full items-center h-full justify-between gap-6 mx-auto flex-row max-w-[108rem]",
             ),
-            class_name="w-full max-full h-[4.5rem] mx-auto flex flex-row items-center lg:px-16 px-6 backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-b dark:border-m-slate-10 bg-gradient-to-b from-[light-dark(#FFF,var(--m-slate-11))] to-[light-dark(var(--m-slate-1),var(--m-slate-12))]",
+            class_name="w-full max-full h-[4.5rem] mx-auto flex flex-row items-center 3xl:px-16 px-6 backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-b dark:border-m-slate-10 bg-gradient-to-b from-white to-m-slate-1 dark:from-m-slate-11 dark:to-m-slate-12",
         ),
         class_name="flex flex-col w-full top-0 z-[9999] fixed self-center",
     )