diff --git a/assets/tailwind-theme.css b/assets/tailwind-theme.css
index 2b31897ab..fbf4e63e1 100644
--- a/assets/tailwind-theme.css
+++ b/assets/tailwind-theme.css
@@ -1699,6 +1699,14 @@
         /* padding: 0rem 0.125rem 0rem 0.125rem; */
     }
 
+    /* Override Radix Code (rt-Code) accent coloring so inline code matches slate theme */
+    code.rt-Code,
+    code.rt-Code.rt-variant-soft,
+    .rt-Code.rt-variant-soft {
+        color: var(--c-slate-11) !important;
+        background-color: var(--c-slate-3) !important;
+    }
+
     .code-error-style {
         font-family: var(--font-jetbrains);
         font-size: 0.835rem;
@@ -1803,6 +1811,44 @@
         }
     }
 
+    .code-block button,
+    .code-block > button {
+        border: none !important;
+        border-width: 0 !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        opacity: 0 !important;
+        transition: opacity 0.15s ease-out !important;
+        pointer-events: none;
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 0.375rem !important;
+        font-size: 0.8125rem !important;
+        font-weight: 500 !important;
+        color: var(--c-slate-11) !important;
+        top: 8px !important;
+        right: 12px !important;
+        padding: 6px 8px !important;
+    }
+
+    .code-block button::after,
+    .code-block > button::after {
+        content: "Copy";
+    }
+
+    .code-block:hover button,
+    .code-block:hover > button,
+    .code-block button:focus-visible {
+        opacity: 1 !important;
+        pointer-events: auto;
+    }
+
+    .code-block button:hover,
+    .code-block > button:hover {
+        background: var(--c-slate-3) !important;
+        background-color: var(--c-slate-3) !important;
+    }
+
 
     .tab-style {
         color: var(--c-slate-9);
@@ -1814,6 +1860,89 @@
         letter-spacing: -0.01094rem;
     }
 
+    .pill-tab-list {
+        display: inline-flex !important;
+        gap: 2px !important;
+        padding: 4px !important;
+        background: var(--c-slate-3) !important;
+        border-radius: 10px !important;
+        border-bottom: none !important;
+        box-shadow: none !important;
+        width: fit-content !important;
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    .pill-tab-list::before,
+    .pill-tab-list::after {
+        display: none !important;
+        content: none !important;
+    }
+
+    .pill-tab {
+        appearance: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        border: none !important;
+        padding: 8px 16px !important;
+        font-size: 0.9375rem !important;
+        font-weight: 450 !important;
+        color: var(--c-slate-11) !important;
+        border-radius: 7px !important;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: color 0.12s, background-color 0.12s, box-shadow 0.12s;
+        letter-spacing: 0 !important;
+        line-height: 1.25rem !important;
+        box-shadow: none !important;
+    }
+
+    .pill-tab::before,
+    .pill-tab::after,
+    .pill-tab:hover::before,
+    .pill-tab:hover::after,
+    .pill-tab[data-state='active']::before,
+    .pill-tab[data-state='active']::after,
+    .pill-tab[data-state='active']:hover::before,
+    .pill-tab[data-state='active']:hover::after {
+        background: transparent !important;
+        background-color: transparent !important;
+        box-shadow: none !important;
+        content: none !important;
+        display: none !important;
+    }
+
+    .pill-tab:hover {
+        color: var(--c-slate-11) !important;
+        background: transparent !important;
+    }
+
+    .pill-tab .rt-BaseTabListTriggerInner,
+    .pill-tab:hover .rt-BaseTabListTriggerInner,
+    .pill-tab:focus-visible .rt-BaseTabListTriggerInner,
+    .pill-tab:focus-visible:hover .rt-BaseTabListTriggerInner {
+        background-color: transparent !important;
+        background: transparent !important;
+    }
+
+    .pill-tab[data-state='active'],
+    .pill-tab[data-state='active']:hover {
+        color: var(--c-slate-12) !important;
+        font-weight: 500 !important;
+        background: var(--c-slate-1) !important;
+        background-color: var(--c-slate-1) !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+    }
+
+    :where(.dark, .dark *) .pill-tab[data-state='active'] {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
+    }
+
+    .tab-style:hover:not([data-state='active'])::before {
+        background: transparent !important;
+        background-color: transparent !important;
+    }
+
     .tab-style:hover {
         color: var(--c-slate-11);
     }
diff --git a/pcweb/components/docpage/sidebar/sidebar_items/learn.py b/pcweb/components/docpage/sidebar/sidebar_items/learn.py
index 2d54bdc5d..a8b522006 100644
--- a/pcweb/components/docpage/sidebar/sidebar_items/learn.py
+++ b/pcweb/components/docpage/sidebar/sidebar_items/learn.py
@@ -10,8 +10,8 @@ def get_sidebar_items_learn():
         create_item(
             "Getting Started",
             children=[
-                getting_started.introduction,
                 getting_started.installation,
+                getting_started.introduction,
                 getting_started.basics,
                 getting_started.project_structure,
                 getting_started.dashboard_tutorial,
diff --git a/pcweb/docgen_pipeline.py b/pcweb/docgen_pipeline.py
index 0f6211f6a..294ac908f 100644
--- a/pcweb/docgen_pipeline.py
+++ b/pcweb/docgen_pipeline.py
@@ -610,15 +610,19 @@ def _render_tabs(self, block: DirectiveBlock) -> rx.Component:
                 rx.tabs.trigger(
                     title,
                     value=value,
-                    class_name="tab-style font-base font-semibold text-[1.25rem]",
+                    class_name="pill-tab",
                 )
             )
             contents.append(
-                rx.tabs.content(self._render_children(body_blocks), value=value),
+                rx.tabs.content(
+                    self._render_children(body_blocks),
+                    value=value,
+                    class_name="pt-6",
+                ),
             )
 
         return rx.tabs.root(
-            rx.tabs.list(*triggers, class_name="mt-4"),
+            rx.tabs.list(*triggers, class_name="pill-tab-list mt-2"),
             *contents,
             default_value="tab1",
         )
@@ -646,29 +650,43 @@ def _render_definition(self, block: DirectiveBlock) -> rx.Component:
 
     def _render_section(self, block: DirectiveBlock) -> rx.Component:
         """Render a ``md section`` directive."""
-        from pcweb.styles.colors import c_color
-
         sections = self._split_children_by_heading(block.children)
-        return rx.box(
-            rx.vstack(
+        return rx.el.div(
+            rx.el.div(
                 *[
-                    rx.fragment(
-                        rx.text(
-                            rx.text.span(header, font_weight="bold"),
-                            width="100%",
+                    rx.el.div(
+                        rx.el.div(
+                            header,
+                            style={
+                                "fontWeight": "600",
+                                "color": "var(--c-slate-12)",
+                                "fontSize": "1rem",
+                                "lineHeight": "1.5",
+                            },
                         ),
-                        rx.box(self._render_children(body), width="100%"),
+                        rx.el.div(
+                            self._render_children(body),
+                            style={"width": "100%"},
+                        ),
+                        style={
+                            "display": "flex",
+                            "flexDirection": "column",
+                            "gap": "0.25rem",
+                            "width": "100%",
+                        },
                     )
                     for header, body in sections
                 ],
-                text_align="left",
-                margin_y="1em",
-                width="100%",
+                style={
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "1.25rem",
+                    "width": "100%",
+                    "paddingLeft": "1.5rem",
+                    "borderLeft": "1.5px solid var(--c-slate-4)",
+                },
             ),
-            border_left=f"1.5px {c_color('slate', 4)} solid",
-            padding_left="1em",
-            width="100%",
-            align_items="center",
+            style={"width": "100%", "margin": "1.5rem 0"},
         )
 
 
diff --git a/pcweb/flexdown.py b/pcweb/flexdown.py
index 15bd884ac..d2579cef8 100644
--- a/pcweb/flexdown.py
+++ b/pcweb/flexdown.py
@@ -153,35 +153,20 @@ def render(self, env) -> rx.Component:
             for i in range(len(header_indices) - 1)
         ]
 
-        return rx.box(
-            rx.vstack(
-                *[
-                    rx.fragment(
-                        rx.text(
-                            rx.text.span(
-                                header,
-                                font_weight="bold",
-                            ),
-                            width="100%",
-                        ),
-                        rx.box(
-                            markdown(section),
-                            width="100%",
-                        ),
-                    )
-                    for header, section in sections
-                ],
-                text_align="left",
-                margin_y="1em",
-                width="100%",
-            ),
-            border_left=f"1.5px {c_color('slate', 4)} solid",
-            padding_left="1em",
-            width="100%",
-            align_items="center",
+        return rx.el.div(
+            *[
+                rx.el.div(
+                    rx.el.div(header, class_name="font-bold text-slate-12"),
+                    rx.el.div(markdown(section), class_name="w-full"),
+                    class_name="flex flex-col gap-1 w-full",
+                )
+                for header, section in sections
+            ],
+            class_name="flex flex-col gap-6 w-full my-4 pl-6 border-l border-slate-4",
         )
 
 
+
 class DefinitionBlock(flexdown.blocks.Block):
     starting_indicator = "```md definition"
     ending_indicator = "```"
diff --git a/pcweb/templates/docpage/blocks/headings.py b/pcweb/templates/docpage/blocks/headings.py
index 629d5add5..72dbe6832 100644
--- a/pcweb/templates/docpage/blocks/headings.py
+++ b/pcweb/templates/docpage/blocks/headings.py
@@ -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 cursor-pointer mb-6 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
+            class_name="flex flex-row items-center gap-2 hover:!text-violet-11 cursor-pointer mb-3 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="lg:text-5xl text-3xl font-[525]",
+        class_name="lg:text-4xl text-3xl font-semibold",
     )
 
 
@@ -134,7 +134,7 @@ def h1_comp_xd(text: str) -> rx.Component:
     return h_comp_common(
         text=text,
         heading="h1",
-        class_name="lg:text-5xl text-3xl font-[525]",
+        class_name="lg:text-4xl text-3xl font-semibold",
     )
 
 
@@ -144,7 +144,7 @@ def h2_comp(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="lg:text-4xl text-2xl font-[525]",
+        class_name="lg:text-3xl text-2xl font-semibold",
     )
 
 
@@ -154,7 +154,7 @@ def h2_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="lg:text-3xl text-2xl font-[525]",
+        class_name="lg:text-2xl text-xl font-semibold",
     )
 
 
@@ -164,7 +164,7 @@ def h3_comp(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="lg:text-2xl text-xl font-[525]",
+        class_name="lg:text-xl text-lg font-semibold",
     )
 
 
@@ -174,7 +174,7 @@ def h3_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="lg:text-2xl text-lg font-[525]",
+        class_name="lg:text-xl text-lg font-semibold",
     )
 
 
@@ -184,7 +184,7 @@ def h4_comp(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="lg:text-xl text-lg font-[525]",
+        class_name="lg:text-base text-base font-semibold",
     )
 
 
@@ -194,7 +194,7 @@ def h4_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="lg:text-xl text-lg font-[525]",
+        class_name="lg:text-base text-base font-semibold",
     )
 
 
diff --git a/pcweb/templates/docpage/blocks/typography.py b/pcweb/templates/docpage/blocks/typography.py
index 64bbaab5b..4c85d20e0 100644
--- a/pcweb/templates/docpage/blocks/typography.py
+++ b/pcweb/templates/docpage/blocks/typography.py
@@ -35,20 +35,20 @@ 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-[475] text-secondary-11 mb-4 leading-7")
+    return rx.text(text, class_name="font-normal text-secondary-11 mb-4 leading-7")
 
 
 @rx.memo
 def text_comp_2(text: rx.Var[str]) -> rx.Component:
     return rx.text(
         text,
-        class_name="font-[475] text-secondary-11 max-w-[80%] mb-10",
+        class_name="font-normal text-secondary-11 max-w-[80%] mb-10",
     )
 
 
 @rx.memo
 def list_comp(text: rx.Var[str]) -> rx.Component:
-    return rx.list_item(text, class_name="font-[475] text-secondary-11 mb-4")
+    return rx.list_item(text, class_name="font-normal text-secondary-11 mb-4")
 
 
 @rx.memo
diff --git a/pcweb/templates/docpage/docpage.py b/pcweb/templates/docpage/docpage.py
index 1d1c6d378..b8fcc8a04 100644
--- a/pcweb/templates/docpage/docpage.py
+++ b/pcweb/templates/docpage/docpage.py
@@ -710,8 +710,8 @@ def wrapper(*args, **kwargs) -> rx.Component:
                             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 "",
+                            "flex-1 h-auto mx-auto lg:max-w-[52rem] px-4 overflow-y-auto",
+                            "lg:max-w-[64rem]" if not show_right_sidebar else "",
                         ),
                     ),
                     rx.box(
@@ -790,7 +790,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                             ),
                         ),
                         class_name=(
-                            "w-[240px] h-screen sticky top-0 shrink-0 hidden xl:block"
+                            "w-[240px] h-screen sticky top-0 shrink-0 hidden 2xl:block"
                         ),
                     )
                     if show_right_sidebar and not pseudo_right_bar
diff --git a/pcweb/views/docs_navbar.py b/pcweb/views/docs_navbar.py
index 7b14c18e4..cb4d407ae 100644
--- a/pcweb/views/docs_navbar.py
+++ b/pcweb/views/docs_navbar.py
@@ -70,7 +70,7 @@ def menu_item(text: str, href: str, active_str: str = "") -> rx.Component:
             to=href,
         ),
         class_name=ui.cn(
-            "xl:flex hidden h-full items-center justify-center",
+            "md:flex hidden h-full items-center justify-center",
             rx.cond(active, active_cn, ""),
         ),
         custom_attrs={"role": "menuitem"},
@@ -111,7 +111,7 @@ def navigation_menu() -> rx.Component:
             ),
             ui.navigation_menu.item(
                 navbar_sidebar_button(),
-                class_name="xl:hidden flex",
+                class_name="md:hidden flex",
                 unstyled=True,
                 custom_attrs={"role": "menuitem"},
             ),