diff --git a/.github/workflows/docs-test.yml b/.github/workflows/docs-test.yml
index 884361e285..20f96a3dcf 100644
--- a/.github/workflows/docs-test.yml
+++ b/.github/workflows/docs-test.yml
@@ -36,6 +36,7 @@ jobs:
         working-directory: www/docs
         env:
           NODE_OPTIONS: "--max-old-space-size=8192"
+          API_URL: "https://docs.medusajs.com"
         run: yarn build
         
   lint:
@@ -99,6 +100,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Install Monorepo dependencies
+        run: yarn install
+
       - name: Install dependencies
         working-directory: www/docs
         run: yarn install
@@ -120,6 +124,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Install Monorepo dependencies
+        run: yarn install
+
       - name: Install dependencies
         working-directory: www/api-reference
         run: yarn install
diff --git a/www/.eslintrc.js b/www/.eslintrc.js
index 07e1258dbd..8fa705b58a 100644
--- a/www/.eslintrc.js
+++ b/www/.eslintrc.js
@@ -13,7 +13,6 @@ module.exports = {
   ],
   extends: [
     "eslint:recommended", 
-    "google", 
     "plugin:prettier/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
diff --git a/www/api-reference/.eslintrc.json b/www/api-reference/.eslintrc.json
index 1a0b2bb199..80c4b23f61 100644
--- a/www/api-reference/.eslintrc.json
+++ b/www/api-reference/.eslintrc.json
@@ -1,6 +1,7 @@
 {
   "extends": [
     "next/core-web-vitals",
+    "google",
     "../.eslintrc.js"
   ],
   "rules": {
diff --git a/www/api-reference/components/CodeBlock/index.tsx b/www/api-reference/components/CodeBlock/index.tsx
index ca5c13fc0a..4e51fce339 100644
--- a/www/api-reference/components/CodeBlock/index.tsx
+++ b/www/api-reference/components/CodeBlock/index.tsx
@@ -26,7 +26,7 @@ const CodeBlock = ({
     <div
       className={clsx(
         "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark relative mb-1 rounded",
-        "border-medusa-code-border w-full max-w-full border",
+        "border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
         "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade xs:dark:after:bg-code-fade-dark",
         collapsed && "max-h-[400px] overflow-auto",
         className
@@ -37,7 +37,7 @@ const CodeBlock = ({
           ...themes.vsDark,
           plain: {
             ...themes.vsDark.plain,
-            backgroundColor: colorMode === "light" ? "#111827" : "#1C1C1F",
+            backgroundColor: colorMode === "light" ? "#111827" : "#1B1B1B",
           },
         }}
         code={source.trim()}
@@ -78,7 +78,7 @@ const CodeBlock = ({
                       {tokens.length > 1 && (
                         <span
                           className={clsx(
-                            "text-medusa-fg-subtle mr-1 table-cell select-none",
+                            "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark mr-1 table-cell select-none",
                             "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark sticky left-0 w-[1%] px-1 text-right"
                           )}
                         >
diff --git a/www/api-reference/components/Tags/Operation/CodeSection/index.tsx b/www/api-reference/components/Tags/Operation/CodeSection/index.tsx
index 864ce2c961..030ba7eec3 100644
--- a/www/api-reference/components/Tags/Operation/CodeSection/index.tsx
+++ b/www/api-reference/components/Tags/Operation/CodeSection/index.tsx
@@ -28,7 +28,7 @@ const TagOperationCodeSection = ({
     <div className={clsx("mt-2 flex flex-col gap-2", className)}>
       <div
         className={clsx(
-          "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
+          "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
           "text-code-body flex w-full justify-between gap-1"
         )}
       >
diff --git a/www/api-reference/components/Tags/Section/index.tsx b/www/api-reference/components/Tags/Section/index.tsx
index 6340ad2521..01452f7a8c 100644
--- a/www/api-reference/components/Tags/Section/index.tsx
+++ b/www/api-reference/components/Tags/Section/index.tsx
@@ -39,7 +39,7 @@ const MDXContentClient = dynamic<MDXContentClientProps>(
 ) as React.FC<MDXContentClientProps>
 
 const TagSection = ({ tag }: TagSectionProps) => {
-  const { setActivePath } = useSidebar()
+  const { activePath, setActivePath } = useSidebar()
   const [loadPaths, setLoadPaths] = useState(false)
   const slugTagName = useMemo(() => getSectionId([tag.name]), [tag])
   const { area } = useArea()
@@ -64,8 +64,8 @@ const TagSection = ({ tag }: TagSectionProps) => {
   })
 
   useEffect(() => {
-    if (location.hash && location.hash.includes(slugTagName)) {
-      const tagName = location.hash.replace("#", "").split("_")
+    if (activePath && activePath.includes(slugTagName)) {
+      const tagName = activePath.split("_")
       if (tagName.length === 1 && tagName[0] === slugTagName) {
         const elm = document.getElementById(tagName[0]) as Element
         elm?.scrollIntoView()
@@ -73,7 +73,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
         setLoadPaths(true)
       }
     }
-  }, [slugTagName])
+  }, [slugTagName, activePath])
 
   return (
     <div
diff --git a/www/api-reference/providers/sidebar.tsx b/www/api-reference/providers/sidebar.tsx
index 7f7c72ecf9..3f8db934e4 100644
--- a/www/api-reference/providers/sidebar.tsx
+++ b/www/api-reference/providers/sidebar.tsx
@@ -259,6 +259,14 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
     }
   }
 
+  // this is mainly triggered by Algolia
+  const handleHashChange = useCallback(() => {
+    const currentPath = location.hash.replace("#", "")
+    if (currentPath !== activePath) {
+      setActivePath(currentPath)
+    }
+  }, [activePath])
+
   useEffect(() => {
     init()
 
@@ -271,13 +279,6 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       }
     }
 
-    const handleHashChange = () => {
-      const currentPath = location.hash.replace("#", "")
-      if (currentPath !== activePath) {
-        setActivePath(currentPath)
-      }
-    }
-
     window.addEventListener("scroll", handleScroll)
     window.addEventListener("hashchange", handleHashChange)
 
@@ -285,7 +286,7 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       window.removeEventListener("scroll", handleScroll)
       window.removeEventListener("hashchange", handleHashChange)
     }
-  }, [])
+  }, [handleHashChange])
 
   return (
     <SidebarContext.Provider
diff --git a/www/docs/.eslintrc.js b/www/docs/.eslintrc.js
index 551573e0a4..68de25d064 100644
--- a/www/docs/.eslintrc.js
+++ b/www/docs/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
   extends: [
+    "plugin:@docusaurus/recommended",
+    "google",
     "../.eslintrc.js",
-    "plugin:@docusaurus/recommended"
   ]
 }
\ No newline at end of file
diff --git a/www/docs/src/components/Navbar/Actions/index.tsx b/www/docs/src/components/Navbar/Actions/index.tsx
index 242c5c2027..07dff0bd46 100644
--- a/www/docs/src/components/Navbar/Actions/index.tsx
+++ b/www/docs/src/components/Navbar/Actions/index.tsx
@@ -17,6 +17,7 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
     <div className={clsx("lg:block hidden", className)}>
       {items.map((item, index) => {
         // eslint-disable-next-line no-case-declarations
+        const ItemIconElm = item.Icon
         const ItemIcon = item.icon ? Icon[item.icon] : null
         switch (item.type) {
           case "link":
@@ -31,11 +32,12 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
                   href={item.href}
                   title={item.title}
                   className={clsx(
-                    ItemIcon && "navbar-action-icon-item",
+                    (ItemIcon || ItemIconElm) && "navbar-action-icon-item",
                     item.className
                   )}
                 >
                   {item.label}
+                  {ItemIconElm}
                   {ItemIcon && <ItemIcon />}
                 </a>
               </Tooltip>
@@ -50,12 +52,13 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
               >
                 <button
                   className={clsx(
-                    ItemIcon && "navbar-action-icon-item",
+                    (ItemIcon || ItemIconElm) && "navbar-action-icon-item",
                     item.className
                   )}
                   {...item.events}
                 >
                   {item.label}
+                  {ItemIconElm}
                   {ItemIcon && <ItemIcon />}
                 </button>
               </Tooltip>
diff --git a/www/docs/src/css/components/docsearch.css b/www/docs/src/css/components/docsearch.css
index ac18e68cbb..fbdec112a6 100644
--- a/www/docs/src/css/components/docsearch.css
+++ b/www/docs/src/css/components/docsearch.css
@@ -174,7 +174,7 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
 
 .DocSearch-Button-Container {
   @apply before:content-[''] before:h-[20px] before:w-[20px] before:absolute before:left-0.5 before:top-[5px];
-  @apply before:bg-magnifying-glass before:bg-no-repeat;
+  @apply before:bg-magnifying-glass dark:before:bg-magnifying-glass-dark before:bg-no-repeat;
 }
 
 .DocSearch-Button-Placeholder {
diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css
index b8a038759c..801f2fbc39 100644
--- a/www/docs/src/css/custom.css
+++ b/www/docs/src/css/custom.css
@@ -146,10 +146,10 @@
   }
 
   .navbar-action-icon-item {
-    @apply bg-docs-button-neutral dark:bg-docs-button-neutral-dark hover:!bg-no-image active:!bg-no-image hover:bg-medusa-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark;
-    @apply active:bg-medusa-button-neutral-pressed dark:active:bg-medusa-button-neutral-pressed-dark;
-    @apply focus:shadow-button-secondary-focus dark:focus:shadow-button-secondary-focus-dark;
-    @apply border border-solid border-medusa-border-loud-muted dark:border-medusa-border-loud-muted-dark rounded;
+    @apply lg:bg-docs-button-neutral lg:dark:bg-docs-button-neutral-dark hover:!bg-no-image lg:active:!bg-no-image hover:bg-medusa-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark;
+    @apply lg:active:bg-medusa-button-neutral-pressed lg:dark:active:bg-medusa-button-neutral-pressed-dark;
+    @apply lg:focus:shadow-button-secondary-focus lg:dark:focus:shadow-button-secondary-focus-dark;
+    @apply lg:border lg:border-solid lg:border-medusa-border-loud-muted lg:dark:border-medusa-border-loud-muted-dark rounded;
     @apply w-2 h-2 flex justify-center items-center cursor-pointer;
   }
 
diff --git a/www/docs/src/theme/Icon/DarkMode/index.tsx b/www/docs/src/theme/Icon/DarkMode/index.tsx
index 310fc0ebe9..96161ff8c6 100644
--- a/www/docs/src/theme/Icon/DarkMode/index.tsx
+++ b/www/docs/src/theme/Icon/DarkMode/index.tsx
@@ -18,7 +18,7 @@ const IconDarkMode: React.FC<IconProps> = ({
         d="M18.1267 12.5017C17.136 12.9147 16.0732 13.1265 15 13.1251C10.5125 13.1251 6.875 9.48758 6.875 5.00008C6.875 3.89175 7.09667 2.83591 7.49833 1.87341C6.01789 2.49101 4.75331 3.53287 3.86386 4.86779C2.9744 6.20271 2.49986 7.77098 2.5 9.37508C2.5 13.8626 6.1375 17.5001 10.625 17.5001C12.2291 17.5002 13.7974 17.0257 15.1323 16.1362C16.4672 15.2468 17.5091 13.9822 18.1267 12.5017Z"
         className={
           iconColorClassName ||
-          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+          "stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark"
         }
         strokeWidth="1.5"
         strokeLinecap="round"
diff --git a/www/docs/src/theme/Icon/LightMode/index.tsx b/www/docs/src/theme/Icon/LightMode/index.tsx
index 782cc6a947..3851206bcd 100644
--- a/www/docs/src/theme/Icon/LightMode/index.tsx
+++ b/www/docs/src/theme/Icon/LightMode/index.tsx
@@ -18,7 +18,7 @@ const IconLightMode: React.FC<IconProps> = ({
         d="M10 2.5V4.375M15.3033 4.69667L13.9775 6.0225M17.5 10H15.625M15.3033 15.3033L13.9775 13.9775M10 15.625V17.5M6.0225 13.9775L4.69667 15.3033M4.375 10H2.5M6.0225 6.0225L4.69667 4.69667M13.125 10C13.125 10.8288 12.7958 11.6237 12.2097 12.2097C11.6237 12.7958 10.8288 13.125 10 13.125C9.1712 13.125 8.37634 12.7958 7.79029 12.2097C7.20424 11.6237 6.875 10.8288 6.875 10C6.875 9.1712 7.20424 8.37634 7.79029 7.79029C8.37634 7.20424 9.1712 6.875 10 6.875C10.8288 6.875 11.6237 7.20424 12.2097 7.79029C12.7958 8.37634 13.125 9.1712 13.125 10Z"
         className={
           iconColorClassName ||
-          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+          "stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark"
         }
         strokeWidth="1.5"
         strokeLinecap="round"
diff --git a/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx b/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx
index f3837ecb93..67280960b8 100644
--- a/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx
+++ b/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { useColorMode, useThemeConfig } from "@docusaurus/theme-common"
 import ColorModeToggle from "@theme/ColorModeToggle"
 import type { Props } from "@theme/Navbar/ColorModeToggle"
+import clsx from "clsx"
 
 export default function NavbarColorModeToggle({
   className,
@@ -16,9 +17,9 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={className}
-      buttonClassName={
+      buttonClassName={clsx(
         "hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
-      }
+      )}
       value={colorMode}
       onChange={setColorMode}
     />
diff --git a/www/docs/src/theme/Navbar/Content/index.tsx b/www/docs/src/theme/Navbar/Content/index.tsx
index 33bc9fb81e..b7ceabb4ec 100644
--- a/www/docs/src/theme/Navbar/Content/index.tsx
+++ b/www/docs/src/theme/Navbar/Content/index.tsx
@@ -14,6 +14,8 @@ import { ThemeConfig } from "@medusajs/docs"
 import useIsBrowser from "@docusaurus/useIsBrowser"
 import clsx from "clsx"
 import { useSidebar } from "@site/src/providers/Sidebar"
+import IconSidebar from "../../Icon/Sidebar"
+import IconChevronDoubleLeftMiniSolid from "../../Icon/ChevronDoubleLeftMiniSolid"
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -140,9 +142,11 @@ export default function NavbarContent(): JSX.Element {
                       }, 100)
                     },
                   },
-                  icon: !sidebarContext?.hiddenSidebarContainer
-                    ? "sidebar"
-                    : "chevron-double-left-mini-solid",
+                  Icon: !sidebarContext?.hiddenSidebarContainer ? (
+                    <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ) : (
+                    <IconChevronDoubleLeftMiniSolid iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ),
                 },
               ]}
               className="sidebar-toggler"
@@ -151,7 +155,6 @@ export default function NavbarContent(): JSX.Element {
           <Tooltip text="Switch theme">
             <NavbarColorModeToggle
               className={clsx(
-                "lg:block hidden",
                 "navbar-action-icon-item !w-2 !h-2 [&>button]:!rounded"
               )}
             />
diff --git a/www/docs/src/theme/Navbar/Logo/index.tsx b/www/docs/src/theme/Navbar/Logo/index.tsx
index cf4647df99..74674b2218 100644
--- a/www/docs/src/theme/Navbar/Logo/index.tsx
+++ b/www/docs/src/theme/Navbar/Logo/index.tsx
@@ -11,7 +11,7 @@ export default function NavbarLogo(): JSX.Element {
         titleClassName="navbar__title text--truncate"
       />
       <MobileLogo
-        className="navbar__brand lg:hidden"
+        className="navbar__brand lg:hidden mx-auto"
         imageClassName="navbar__logo"
         titleClassName="navbar__title text--truncate"
       />
diff --git a/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
index 91104f647e..04c51c93c5 100644
--- a/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
+++ b/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
@@ -19,8 +19,12 @@ export default function MobileSidebarToggle(): JSX.Element {
       className="navbar__toggle !block lg:!hidden clean-btn"
       type="button"
     >
-      {!shown && <IconSidebar />}
-      {shown && <IconXMark />}
+      {!shown && (
+        <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+      {shown && (
+        <IconXMark iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
     </button>
   )
 }
diff --git a/www/docs/src/types/index.d.ts b/www/docs/src/types/index.d.ts
index 627218d0e5..e8d84a2589 100644
--- a/www/docs/src/types/index.d.ts
+++ b/www/docs/src/types/index.d.ts
@@ -107,6 +107,7 @@ declare module "@medusajs/docs" {
     type: string
     title?: string
     icon?: string
+    Icon?: React.ReactElement
     className?: string
     label?: string
     html?: string
@@ -120,10 +121,10 @@ declare module "@medusajs/docs" {
   export declare type NavbarActionButton = NavbarActionBase & {
     type: "button"
     events?: {
-      onClick?: (e: MouseEvent) => void
-      onMouseEnter?: (e: MouseEvent) => void
-      onMouseLeave?: (e: MouseEvent) => void
-      onMouseOver?: (e: MouseEvent) => void
+      onClick?: MouseEventHandler<HTMLButtonElement>
+      onMouseEnter?: MouseEventHandler<HTMLButtonElement>
+      onMouseLeave?: MouseEventHandler<HTMLButtonElement>
+      onMouseOver?: MouseEventHandler<HTMLButtonElement>
     }
   }
 
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index afeeb682e0..ed88b9c005 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -547,7 +547,7 @@ module.exports = {
         "button-danger-pressed": "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 100%)",
         "button-danger-pressed-dark": "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.14) 100%)",
         "code-fade": "linear-gradient(90deg, #11182700, #111827 24px)",
-        "code-fade-dark": "linear-gradient(90deg, #1C1C1F00, #1C1C1F 24px)",
+        "code-fade-dark": "linear-gradient(90deg, #1B1B1B00, #1B1B1B 24px)",
         // TODO remove if not used
         "docs-button-neutral": "linear-gradient(180deg, #FFF 30.10%, #F8F9FA 100%)",
         "docs-button-neutral-dark": "linear-gradient(180deg, #2E2E32 0%, #28282C 32.67%)",