diff --git a/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx
index f94a8efc78..792ea70d5c 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx
@@ -6,13 +6,11 @@ import { CheckMini, SquareTwoStack } from "@medusajs/icons"
 export type CodeBlockCopyActionProps = {
   source: string
   inHeader: boolean
-  iconColor: string
 }
 
 export const CodeBlockCopyAction = ({
   source,
   inHeader,
-  iconColor,
 }: CodeBlockCopyActionProps) => {
   const [copied, setCopied] = useState(false)
 
@@ -24,16 +22,27 @@ export const CodeBlockCopyAction = ({
     }
   }, [copied])
 
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
+
   return (
     <CopyButton
       text={source}
       tooltipClassName="font-base"
-      className={clsx("h-fit", !inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
-      tooltipInnerClassName={clsx(inHeader && "flex")}
+      className={clsx("group")}
+      buttonClassName={clsx(!inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
+      tooltipInnerClassName={clsx(
+        inHeader && "flex",
+        "h-fit rounded-docs_sm",
+        "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
+      )}
       onCopy={() => setCopied(true)}
     >
-      {!copied && <SquareTwoStack className={clsx(iconColor)} />}
-      {copied && <CheckMini className={clsx(iconColor)} />}
+      {!copied && <SquareTwoStack className={clsx(iconClassName)} />}
+      {copied && <CheckMini className={clsx(iconClassName)} />}
     </CopyButton>
   )
 }
diff --git a/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
index 81ea65e7bf..7544ac1685 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import clsx from "clsx"
-import React, { useMemo } from "react"
-import { CodeBlockStyle, Link, Tooltip } from "@/components"
+import React from "react"
+import { Link, Tooltip } from "@/components"
 import { ExclamationCircle, PlaySolid } from "@medusajs/icons"
-import { useColorMode } from "@/providers"
 import { GITHUB_ISSUES_PREFIX } from "@/constants"
 import { CodeBlockCopyAction } from "./Copy"
 
@@ -16,7 +15,6 @@ export type CodeBlockActionsProps = {
   inInnerCode?: boolean
   isCollapsed: boolean
   canShowApiTesting?: boolean
-  blockStyle: CodeBlockStyle
   onApiTesting: React.Dispatch<React.SetStateAction<boolean>>
   noReport?: boolean
   noCopy?: boolean
@@ -30,23 +28,15 @@ export const CodeBlockActions = ({
   isCollapsed,
   isSingleLine = false,
   canShowApiTesting = false,
-  blockStyle,
   onApiTesting,
   noReport = false,
   noCopy = false,
 }: CodeBlockActionsProps) => {
-  const { colorMode } = useColorMode()
-  const iconColor = useMemo(
-    () =>
-      clsx(
-        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-fg-secondary",
-        ]
-      ),
-    [blockStyle, colorMode]
-  )
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
 
   return (
     <div
@@ -88,29 +78,35 @@ export const CodeBlockActions = ({
           <Tooltip
             text="Test API"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
-            <PlaySolid
-              className={clsx("cursor-pointer", iconColor)}
+            <span
+              className={clsx(
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]",
+                "cursor-pointer"
+              )}
               onClick={() => onApiTesting(true)}
-            />
+            >
+              <PlaySolid className={clsx(iconClassName)} />
+            </span>
           </Tooltip>
         )}
         {!noReport && (
           <Tooltip
             text="Report Issue"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
             <Link
               href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
@@ -120,21 +116,17 @@ export const CodeBlockActions = ({
               className={clsx(
                 "bg-transparent border-none cursor-pointer rounded",
                 "[&:not(:first-child)]:ml-docs_0.5",
-                "inline-flex justify-center items-center invisible xs:visible"
+                "inline-flex justify-center items-center invisible xs:visible",
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]"
               )}
               rel="noreferrer"
             >
-              <ExclamationCircle className={clsx(iconColor)} />
+              <ExclamationCircle className={clsx(iconClassName)} />
             </Link>
           </Tooltip>
         )}
-        {!noCopy && (
-          <CodeBlockCopyAction
-            source={source}
-            inHeader={inHeader}
-            iconColor={iconColor}
-          />
-        )}
+        {!noCopy && <CodeBlockCopyAction source={source} inHeader={inHeader} />}
       </div>
     </div>
   )
diff --git a/www/packages/docs-ui/src/components/CodeBlock/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
index 1c882a2f76..541215447e 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -262,7 +262,6 @@ export const CodeBlock = ({
       source,
       canShowApiTesting,
       setShowTesting,
-      blockStyle,
       noReport,
       noCopy,
       collapsibleType,
diff --git a/www/packages/docs-ui/src/components/LinkButton/index.tsx b/www/packages/docs-ui/src/components/LinkButton/index.tsx
new file mode 100644
index 0000000000..d06f43e8a7
--- /dev/null
+++ b/www/packages/docs-ui/src/components/LinkButton/index.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+
+import type { LinkProps as NextLinkProps } from "next/link"
+import Link from "next/link"
+import clsx from "clsx"
+
+type LinkButtonProps = NextLinkProps & {
+  variant?: "base" | "interactive" | "subtle" | "muted"
+  className?: string
+} & React.AllHTMLAttributes<HTMLAnchorElement>
+
+export const LinkButton = ({
+  variant = "base",
+  className,
+  ...linkProps
+}: LinkButtonProps) => {
+  return (
+    <Link
+      {...linkProps}
+      className={clsx(
+        className,
+        "inline-flex justify-center items-center",
+        "gap-docs_0.25 rounded-docs_xs",
+        "text-compact-small-plus disabled:text-medusa-fg-disabled",
+        "focus:shadow-borders-focus no-underline",
+        variant === "base" && [
+          "text-medusa-fg-base hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-base",
+        ],
+        variant === "interactive" && [
+          "text-medusa-fg-interactive hover:text-medusa-interactive-hover",
+          "focus:text-medusa-fg-interactive",
+        ],
+        variant === "subtle" && [
+          "text-medusa-fg-subtle hover:text-medusa-fg-base",
+          "focus:text-medusa-fg-subtle",
+        ],
+        variant === "muted" && [
+          "text-medusa-fg-muted hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-muted",
+        ]
+      )}
+    />
+  )
+}
diff --git a/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx b/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx
index af6a014a47..4af5df4be4 100644
--- a/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { CurrentItemsState, useSidebar } from "../../.."
+import { Button, CurrentItemsState, useSidebar } from "../../.."
 import clsx from "clsx"
 import Link from "next/link"
 import { SidebarItemLink } from "types"
@@ -61,22 +61,19 @@ export const MainNavBreadcrumbs = () => {
   return (
     <div
       className={clsx(
-        "flex items-center",
+        "flex items-center gap-docs_0.25",
         "text-medusa-fg-muted text-compact-small"
       )}
     >
       {Array.from(breadcrumbItems).map(([link, title]) => (
         <React.Fragment key={link}>
           <span>/</span>
-          <Link
-            href={link}
-            className={clsx(
-              "hover:text-medusa-fg-base transition-colors",
-              "px-docs_0.5 py-docs_0.25"
-            )}
+          <Button
+            variant="transparent-clear"
+            className="px-docs_0.5 py-docs_0.25"
           >
-            {title}
-          </Link>
+            <Link href={link}>{title}</Link>
+          </Button>
         </React.Fragment>
       ))}
     </div>
diff --git a/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx b/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx
index 1f84c42cf5..bcdeba74ba 100644
--- a/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx
@@ -2,7 +2,7 @@
 
 import React from "react"
 import { useColorMode } from "../../../providers"
-import { Button } from "../../.."
+import { Button, Tooltip } from "../../.."
 import { Moon, Sun } from "@medusajs/icons"
 import clsx from "clsx"
 
@@ -10,13 +10,15 @@ export const MainNavColorMode = () => {
   const { colorMode, toggleColorMode } = useColorMode()
 
   return (
-    <Button
-      variant="transparent-clear"
-      className={clsx("!p-[6.5px] text-medusa-fg-muted")}
-      onClick={toggleColorMode}
-    >
-      {colorMode === "light" && <Sun />}
-      {colorMode === "dark" && <Moon />}
-    </Button>
+    <Tooltip place="bottom" tooltipChildren="Change Theme">
+      <Button
+        variant="transparent-clear"
+        className={clsx("!p-[6.5px] text-medusa-fg-muted")}
+        onClick={toggleColorMode}
+      >
+        {colorMode === "light" && <Sun />}
+        {colorMode === "dark" && <Moon />}
+      </Button>
+    </Tooltip>
   )
 }
diff --git a/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx b/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx
index 289fcfd045..e2988a7d1b 100644
--- a/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx
@@ -46,9 +46,9 @@ export const MainNavHelpButton = () => {
     <div className="relative" ref={ref}>
       <Tooltip
         tooltipChildren={
-          <span className="flex gap-[6px]">
+          <span className="flex gap-[6px] items-center">
             <span>Need help?</span>
-            <Kbd>?</Kbd>
+            <Kbd className="w-docs_1 h-docs_1">?</Kbd>
           </span>
         }
         place="bottom"
@@ -56,7 +56,7 @@ export const MainNavHelpButton = () => {
       >
         <Button
           variant="transparent-clear"
-          className="text-medusa-fg-muted"
+          className="text-medusa-fg-muted !px-[6.5px] !py-[6.5px]"
           onClick={() => setShowMenu((prev) => !prev)}
         >
           <QuestionMark />
diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx
index ecbea2a6a9..e543a9ee6f 100644
--- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx
@@ -9,11 +9,13 @@ import { MainNavigationDropdownIcon } from "../Icon"
 export type MainNavigationDropdownSelectedProps = {
   item: NavigationDropdownItem
   onClick: () => void
+  isActive: boolean
 }
 
 export const MainNavigationDropdownSelected = ({
   item,
   onClick,
+  isActive,
 }: MainNavigationDropdownSelectedProps) => {
   if (item.type === "divider") {
     return <></>
@@ -22,15 +24,22 @@ export const MainNavigationDropdownSelected = ({
   return (
     <div
       className={clsx(
-        "flex justify-between items-center",
-        "cursor-pointer rounded-docs_sm hover:bg-medusa-bg-hover"
+        "flex justify-between items-center gap-docs_0.25",
+        "cursor-pointer rounded-docs_sm group"
       )}
       tabIndex={-1}
       onClick={onClick}
     >
       <MainNavigationDropdownIcon icon={item.icon} />
-      <div className="flex gap-[6px] py-docs_0.25 px-docs_0.5 items-center">
-        <span className="text-medusa-fg-base whitespace-nowrap flex-1">
+      <div
+        className={clsx(
+          "flex gap-[6px] py-docs_0.25 px-docs_0.5",
+          "items-center group-hover:bg-medusa-button-transparent-hover",
+          "rounded-docs_sm",
+          isActive && "bg-medusa-button-transparent-hover"
+        )}
+      >
+        <span className="text-medusa-fg-base whitespace-nowrap flex-1 text-compact-small-plus">
           {item.title}
         </span>
         <TrianglesMini className="text-medusa-fg-muted" />
diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx
index b1a8737bb7..afe65ccd97 100644
--- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx
@@ -34,6 +34,7 @@ export const MainNavigationDropdown = () => {
         <MainNavigationDropdownSelected
           item={selectedItem}
           onClick={() => setMenuOpen((prev) => !prev)}
+          isActive={menuOpen}
         />
       )}
       <MainNavigationDropdownMenu
diff --git a/www/packages/docs-ui/src/components/MainNav/index.tsx b/www/packages/docs-ui/src/components/MainNav/index.tsx
index 5c8e5fac36..58bd6ae92e 100644
--- a/www/packages/docs-ui/src/components/MainNav/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/index.tsx
@@ -4,9 +4,14 @@ import clsx from "clsx"
 import React from "react"
 import { MainNavigationDropdown } from "./NavigationDropdown"
 import { MainNavBreadcrumbs } from "./Breadcrumb"
-import { Button, SearchModalOpener, useMainNav, useSidebar } from "../.."
+import {
+  Button,
+  LinkButton,
+  SearchModalOpener,
+  useMainNav,
+  useSidebar,
+} from "../.."
 import { MainNavColorMode } from "./ColorMode"
-import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
 import { MainNavHelpButton } from "./HelpButton"
@@ -39,7 +44,9 @@ export const MainNav = () => {
       <div className="flex items-center gap-docs_0.75">
         <div className="flex items-center gap-[6px] text-medusa-fg-muted">
           {editDate && <MainNavEditDate date={editDate} />}
-          <Link href={reportIssueLink}>Report Issue</Link>
+          <LinkButton href={reportIssueLink} variant="muted" target="_blank">
+            Report Issue
+          </LinkButton>
         </div>
         <MainNavDivider />
         <div className="flex items-center gap-docs_0.25">
diff --git a/www/packages/docs-ui/src/components/Menu/Action/index.tsx b/www/packages/docs-ui/src/components/Menu/Action/index.tsx
index dd678299b8..92bc53b04e 100644
--- a/www/packages/docs-ui/src/components/Menu/Action/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/Action/index.tsx
@@ -10,25 +10,27 @@ export type MenuActionProps = {
 
 export const MenuAction = ({ item }: MenuActionProps) => {
   return (
-    <span
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base cursor-pointer"
-      )}
-      tabIndex={-1}
-      onClick={item.action}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small flex-1">{item.title}</span>
-      {item.shortcut && (
-        <span className="text-medusa-fg-subtle text-compact-small">
-          {item.shortcut}
+    <div className="px-docs_0.25">
+      <span
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base cursor-pointer"
+        )}
+        tabIndex={-1}
+        onClick={item.action}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
         </span>
-      )}
-    </span>
+        <span className="text-compact-small flex-1">{item.title}</span>
+        {item.shortcut && (
+          <span className="text-medusa-fg-subtle text-compact-small">
+            {item.shortcut}
+          </span>
+        )}
+      </span>
+    </div>
   )
 }
diff --git a/www/packages/docs-ui/src/components/Menu/Divider/index.tsx b/www/packages/docs-ui/src/components/Menu/Divider/index.tsx
index 4527c2d032..08f547a109 100644
--- a/www/packages/docs-ui/src/components/Menu/Divider/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/Divider/index.tsx
@@ -3,5 +3,34 @@
 import React from "react"
 
 export const MenuDivider = () => {
-  return <hr className="bg-medusa-border-menu-top mt-[3px] mb-[3px]" />
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 205 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="197"
+        height="8"
+        transform="translate(4)"
+        fill="var(--docs-bg-component)"
+      />
+      <rect
+        x="-4"
+        y="3"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-top)"
+      />
+      <rect
+        x="-4"
+        y="4"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-bot)"
+      />
+    </svg>
+  )
 }
diff --git a/www/packages/docs-ui/src/components/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/Menu/Item/index.tsx
index b5a343a956..bf5b4a2914 100644
--- a/www/packages/docs-ui/src/components/Menu/Item/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/Item/index.tsx
@@ -11,19 +11,21 @@ export type MenuItemProps = {
 
 export const MenuItem = ({ item }: MenuItemProps) => {
   return (
-    <Link
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base"
-      )}
-      href={item.link}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small">{item.title}</span>
-    </Link>
+    <div className="px-docs_0.25">
+      <Link
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base"
+        )}
+        href={item.link}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
+        </span>
+        <span className="text-compact-small">{item.title}</span>
+      </Link>
+    </div>
   )
 }
diff --git a/www/packages/docs-ui/src/components/Menu/index.tsx b/www/packages/docs-ui/src/components/Menu/index.tsx
index f886b7a5f6..deb6a917da 100644
--- a/www/packages/docs-ui/src/components/Menu/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/index.tsx
@@ -14,7 +14,7 @@ export const Menu = ({ items, className }: MenuProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-component p-docs_0.25 rounded-docs_DEFAULT",
+        "bg-medusa-bg-component py-docs_0.25 rounded-docs_DEFAULT",
         "shadow-elevation-flyout dark:shadow-elevation-flyout-dark",
         className
       )}
diff --git a/www/packages/docs-ui/src/components/Pagination/Card/index.tsx b/www/packages/docs-ui/src/components/Pagination/Card/index.tsx
index 045316e944..8c0df2b755 100644
--- a/www/packages/docs-ui/src/components/Pagination/Card/index.tsx
+++ b/www/packages/docs-ui/src/components/Pagination/Card/index.tsx
@@ -21,7 +21,7 @@ export const PaginationCard = ({
   return (
     <div
       className={clsx(
-        "relative flex flex-1 gap-docs_0.75 items-center",
+        "relative flex-1",
         "py-docs_0.5 px-docs_0.75 rounded",
         "bg-medusa-bg-component hover:bg-medusa-bg-component-hover",
         "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
@@ -30,28 +30,30 @@ export const PaginationCard = ({
       )}
     >
       <Link href={link} className="absolute top-0 left-0 w-full h-full" />
-      {type === "previous" && (
-        <TriangleLeftMini className="text-medusa-fg-muted" />
-      )}
-      <div
-        className={clsx(
-          "flex-1",
-          type === "previous" && "text-left",
-          type === "next" && "text-right"
+      <div className={clsx("h-[40px] flex gap-docs_0.75 items-center")}>
+        {type === "previous" && (
+          <TriangleLeftMini className="text-medusa-fg-muted" />
         )}
-      >
-        {parentTitle && (
-          <span className="block text-compact-small text-medusa-fg-subtle">
-            {parentTitle}
+        <div
+          className={clsx(
+            "flex-1",
+            type === "previous" && "text-left",
+            type === "next" && "text-right"
+          )}
+        >
+          {parentTitle && (
+            <span className="block text-compact-small text-medusa-fg-subtle">
+              {parentTitle}
+            </span>
+          )}
+          <span className="block text-compact-small-plus text-medusa-fg-base">
+            {title}
           </span>
+        </div>
+        {type === "next" && (
+          <TriangleRightMini className="text-medusa-fg-muted" />
         )}
-        <span className="block text-compact-small-plus text-medusa-fg-base">
-          {title}
-        </span>
       </div>
-      {type === "next" && (
-        <TriangleRightMini className="text-medusa-fg-muted" />
-      )}
     </div>
   )
 }
diff --git a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
index f7a9e674a3..132da8ecf9 100644
--- a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
@@ -3,7 +3,7 @@
 import React, { MouseEvent, useMemo } from "react"
 import clsx from "clsx"
 import { useMobile, useSearch } from "@/providers"
-import { Button } from "@/components"
+import { Button, Tooltip } from "@/components"
 import { MagnifyingGlass } from "@medusajs/icons"
 import { useKeyboardShortcut } from "@/hooks"
 
@@ -53,19 +53,21 @@ export const SearchModalOpener = ({
         </Button>
       )}
       {!isMobile && (
-        <Button
-          className={clsx(
-            "relative hover:cursor-pointer group",
-            "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
-            "justify-between items-center text-medusa-fg-muted",
-            className
-          )}
-          variant="transparent-clear"
-          onClick={handleOpen}
-        >
-          <MagnifyingGlass />
-          <span>{isApple ? "⌘" : "Ctrl"}K</span>
-        </Button>
+        <Tooltip place="bottom" tooltipChildren="Ask or search">
+          <Button
+            className={clsx(
+              "relative hover:cursor-pointer group",
+              "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
+              "justify-between items-center text-medusa-fg-muted",
+              className
+            )}
+            variant="transparent-clear"
+            onClick={handleOpen}
+          >
+            <MagnifyingGlass />
+            <span>{isApple ? "⌘" : "Ctrl"}K</span>
+          </Button>
+        </Tooltip>
       )}
     </>
   )
diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
index fd283b9abf..62b02946ba 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
@@ -69,7 +69,9 @@ export const SidebarItemCategory = ({
   )
 
   return (
-    <div className={clsx("my-docs_0.75 w-full relative", className)}>
+    <div
+      className={clsx("my-docs_0.75 first:!mt-0 w-full relative", className)}
+    >
       <div className="px-docs_0.75">
         <div
           className={clsx(
diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx
index a55d9b29c3..be4265978f 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx
@@ -118,7 +118,12 @@ export const SidebarItemLink = ({
           shallow={!item.isPathHref}
           {...item.linkProps}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "inline-block pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -129,7 +134,6 @@ export const SidebarItemLink = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pt-docs_0.125 pb-docs_0.5"
           )}
         >
diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx
index 8b997bb77d..e1a124bf8d 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx
@@ -116,7 +116,12 @@ export const SidebarItemSubCategory = ({
             className
           )}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -127,7 +132,6 @@ export const SidebarItemSubCategory = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pb-docs_0.5 pt-docs_0.125"
           )}
         >
diff --git a/www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx
index 42e24273b1..431c5b24d1 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx
@@ -46,7 +46,7 @@ export const SidebarTopMedusaMenu = () => {
         <span className="text-compact-small-plus text-medusa-fg-base flex-1">
           Medusa Docs
         </span>
-        <EllipsisHorizontal className="text-medusa-fg-subtle" />
+        <EllipsisHorizontal className="text-medusa-fg-muted" />
       </div>
       <div
         className={clsx(
diff --git a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
index 95c5c74623..efef5d071a 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
@@ -24,7 +24,7 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
               <SidebarChild item={parentItem} />
             </>
           )}
-          <DottedSeparator className="!my-0" />
+          <DottedSeparator wrapperClassName="!my-0" />
         </div>
       </div>
     )
diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts
index 7e97501834..35c582d5b0 100644
--- a/www/packages/docs-ui/src/components/index.ts
+++ b/www/packages/docs-ui/src/components/index.ts
@@ -34,6 +34,7 @@ export * from "./Kbd"
 export * from "./Label"
 export * from "./LearningPath"
 export * from "./Link"
+export * from "./LinkButton"
 export * from "./Loading"
 export * from "./Loading/Dots"
 export * from "./Loading/Spinner"
diff --git a/www/packages/docs-ui/src/layouts/main-content.tsx b/www/packages/docs-ui/src/layouts/main-content.tsx
index d3b78eeacd..836bcd03e9 100644
--- a/www/packages/docs-ui/src/layouts/main-content.tsx
+++ b/www/packages/docs-ui/src/layouts/main-content.tsx
@@ -48,7 +48,7 @@ export const MainContentLayout = ({
           "flex-col items-center",
           "h-full w-full",
           "overflow-y-scroll overflow-x-hidden",
-          "md:rounded shadow-elevation-card-rest",
+          "md:rounded-t-docs_DEFAULT shadow-elevation-card-rest",
           mainWrapperClasses
         )}
         id="main"
diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
index f43e7c03d0..4275837bb1 100644
--- a/www/packages/tailwind/base.tailwind.config.js
+++ b/www/packages/tailwind/base.tailwind.config.js
@@ -234,9 +234,9 @@ module.exports = {
           "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
 
         "elevation-code-block":
-          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
+          "0px 0px 0px 1px #18181B, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20)",
         "elevation-code-block-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px #27272A, 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         active: "0px 0px 0px 3px #E1F0FF",
         "active-dark": "0px 0px 0px 3px #2C2250",
         "border-base":
@@ -317,128 +317,142 @@ module.exports = {
       },
       fontSize: {
         h1: [
-          "2rem",
+          "24px",
           {
-            lineHeight: "2.75rem",
+            lineHeight: "36px",
             fontWeight: "500",
           },
         ],
         h2: [
-          "1.5rem",
+          "18px",
           {
-            lineHeight: "2rem",
+            lineHeight: "28px",
             fontWeight: "500",
           },
         ],
         h3: [
-          "1.125rem",
+          "16px",
           {
-            lineHeight: "1.75rem",
+            lineHeight: "24px",
             fontWeight: "500",
           },
         ],
         h4: [
           "1rem",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
-        "compact-large-plus": [
-          "1rem",
+        "compact-x-large-plus": [
+          "18px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
+            fontWeight: "500",
+          },
+        ],
+        "compact-x-large": [
+          "18px",
+          {
+            lineHeight: "20px",
+            fontWeight: "400",
+          },
+        ],
+        "compact-large-plus": [
+          "16px",
+          {
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-large": [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-medium-plus": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-medium": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-small-plus": [
-          "0.8125rem",
+          "13px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-small": [
-          "0.8125rem",
+          "13px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-x-small-plus": [
-          "0.75rem",
+          "12px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-x-small": [
-          "0.75rem",
+          "12px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "x-large-plus": [
-          "1.125rem",
+          "18px",
           {
-            lineHeight: "1.6875rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         "x-large": [
-          "1.125rem",
+          "18px",
           {
-            lineHeight: "1.6875rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
         "large-plus": [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.5rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         large: [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.5rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
         "medium-plus": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.3125rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         medium: [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.3125rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
@@ -456,6 +470,20 @@ module.exports = {
             fontWeight: "500",
           },
         ],
+        "x-small": [
+          "12px",
+          {
+            lineHeight: "150%",
+            fontWeight: "400",
+          },
+        ],
+        "x-small-plus": [
+          "12px",
+          {
+            lineHeight: "150%",
+            fontWeight: "500",
+          },
+        ],
         "code-label": [
           "12px",
           {
@@ -466,7 +494,7 @@ module.exports = {
         "code-body": [
           "12px",
           {
-            lineHeight: "18px",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
diff --git a/www/packages/tailwind/theme-presets.js b/www/packages/tailwind/theme-presets.js
index 8d1167aa07..7ea1366eb0 100644
--- a/www/packages/tailwind/theme-presets.js
+++ b/www/packages/tailwind/theme-presets.js
@@ -37,6 +37,7 @@ const light = {
   "--docs-border-danger": "rgba(190, 18, 60, 1)",
   "--docs-border-transparent": "rgba(255, 255, 255, 0)",
   "--docs-border-menu-top": "rgba(228, 228, 231, 1)",
+  "--docs-border-menu-bot": "rgba(255, 255, 255, 1)",
 
   "--docs-button-inverted": "rgba(39, 39, 42, 1)",
   "--docs-button-inverted-hover": "rgba(63, 63, 70, 1)",
@@ -140,6 +141,7 @@ const dark = {
   "--docs-border-danger": "rgba(190, 18, 60, 1)",
   "--docs-border-transparent": "rgba(255, 255, 255, 0)",
   "--docs-border-menu-top": "rgba(255, 255, 255, 0.08)",
+  "--docs-border-menu-bot": "rgba(255, 255, 255, 0.08)",
 
   "--docs-button-inverted": "rgba(82, 82, 91, 1)",
   "--docs-button-inverted-hover": "rgba(113, 113, 122, 1)",