diff --git a/www/apps/api-reference/app/layout.tsx b/www/apps/api-reference/app/layout.tsx
index 1aaad14356..e66e474383 100644
--- a/www/apps/api-reference/app/layout.tsx
+++ b/www/apps/api-reference/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css"
 import Providers from "../providers"
-import { WideLayout } from "docs-ui"
+import { BareboneLayout, WideLayout } from "docs-ui"
 import { Inter, Roboto_Mono } from "next/font/google"
 import clsx from "clsx"
 
@@ -26,17 +26,18 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <WideLayout
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: false,
-      }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      showToc={false}
-      showBanner={false}
-      showBreadcrumbs={false}
-    >
-      {children}
-    </WideLayout>
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
+      <WideLayout
+        sidebarProps={{
+          expandItems: false,
+        }}
+        showToc={false}
+        showBanner={false}
+        showBreadcrumbs={false}
+        ProvidersComponent={Providers}
+      >
+        {children}
+      </WideLayout>
+    </BareboneLayout>
   )
 }
diff --git a/www/apps/api-reference/components/DownloadFull/index.tsx b/www/apps/api-reference/components/DownloadFull/index.tsx
index d60c6d42b4..5504cf398b 100644
--- a/www/apps/api-reference/components/DownloadFull/index.tsx
+++ b/www/apps/api-reference/components/DownloadFull/index.tsx
@@ -9,11 +9,7 @@ const DownloadFull = () => {
 
   return (
     <Button variant="secondary">
-      <Link
-        href={`${process.env.NEXT_PUBLIC_BASE_PATH}/download/${area}`}
-        download
-        target="_blank"
-      >
+      <Link href={`/api/download/${area}`} download target="_blank">
         Download OpenApi Specs Collection
       </Link>
     </Button>
diff --git a/www/apps/book/app/not-found.mdx b/www/apps/book/app/_not-found.mdx
similarity index 100%
rename from www/apps/book/app/not-found.mdx
rename to www/apps/book/app/_not-found.mdx
diff --git a/www/apps/book/app/fonts.ts b/www/apps/book/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/book/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+})
diff --git a/www/apps/book/app/globals.css b/www/apps/book/app/globals.css
index abdd9847fb..4f4a832011 100644
--- a/www/apps/book/app/globals.css
+++ b/www/apps/book/app/globals.css
@@ -16,10 +16,14 @@
     @apply bg-medusa-bg-highlight;
   }
 
-  * {
+  *:not(.code-block-elm) {
     scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
   }
 
+  .code-block-elm {
+    scrollbar-color: var(--docs-contrast-border-base) transparent;
+  }
+
   aside * {
     scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
   }
diff --git a/www/apps/book/app/layout.tsx b/www/apps/book/app/layout.tsx
index 13c157f552..ffb3ac9641 100644
--- a/www/apps/book/app/layout.tsx
+++ b/www/apps/book/app/layout.tsx
@@ -1,12 +1,9 @@
 import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
-import Providers from "@/providers"
 import "./globals.css"
-import { TightLayout } from "docs-ui"
 import { config } from "@/config"
+import { BareboneLayout } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
 import clsx from "clsx"
-import Feedback from "@/components/Feedback"
-import EditButton from "@/components/EditButton"
 
 export const metadata: Metadata = {
   title: {
@@ -19,34 +16,14 @@ export const metadata: Metadata = {
   ),
 }
 
-export const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
-  subsets: ["latin"],
-  variable: "--font-roboto-mono",
-})
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      showPagination={true}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
-    >
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
       {children}
-    </TightLayout>
+    </BareboneLayout>
   )
 }
diff --git a/www/apps/book/app/advanced-development/admin/constraints/page.mdx b/www/apps/book/app/learn/advanced-development/admin/constraints/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/admin/constraints/page.mdx
rename to www/apps/book/app/learn/advanced-development/admin/constraints/page.mdx
diff --git a/www/apps/book/app/advanced-development/admin/page.mdx b/www/apps/book/app/learn/advanced-development/admin/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/admin/page.mdx
rename to www/apps/book/app/learn/advanced-development/admin/page.mdx
diff --git a/www/apps/book/app/advanced-development/admin/tips/page.mdx b/www/apps/book/app/learn/advanced-development/admin/tips/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/admin/tips/page.mdx
rename to www/apps/book/app/learn/advanced-development/admin/tips/page.mdx
diff --git a/www/apps/book/app/advanced-development/admin/ui-routes/page.mdx b/www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/admin/ui-routes/page.mdx
rename to www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
diff --git a/www/apps/book/app/advanced-development/admin/widgets/page.mdx b/www/apps/book/app/learn/advanced-development/admin/widgets/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/admin/widgets/page.mdx
rename to www/apps/book/app/learn/advanced-development/admin/widgets/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/additional-data/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/additional-data/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/additional-data/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/additional-data/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/cors/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/cors/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/cors/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/cors/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/errors/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/errors/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/errors/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/errors/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/http-methods/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/http-methods/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/http-methods/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/http-methods/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/middlewares/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/middlewares/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/middlewares/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/middlewares/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/parameters/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/parameters/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/parameters/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/parameters/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/protected-routes/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/protected-routes/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/protected-routes/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/protected-routes/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/responses/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/responses/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/responses/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/responses/page.mdx
diff --git a/www/apps/book/app/advanced-development/api-routes/validation/page.mdx b/www/apps/book/app/learn/advanced-development/api-routes/validation/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/api-routes/validation/page.mdx
rename to www/apps/book/app/learn/advanced-development/api-routes/validation/page.mdx
diff --git a/www/apps/book/app/advanced-development/architecture/architectural-modules/page.mdx b/www/apps/book/app/learn/advanced-development/architecture/architectural-modules/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/architecture/architectural-modules/page.mdx
rename to www/apps/book/app/learn/advanced-development/architecture/architectural-modules/page.mdx
diff --git a/www/apps/book/app/advanced-development/architecture/overview/page.mdx b/www/apps/book/app/learn/advanced-development/architecture/overview/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/architecture/overview/page.mdx
rename to www/apps/book/app/learn/advanced-development/architecture/overview/page.mdx
diff --git a/www/apps/book/app/advanced-development/custom-cli-scripts/page.mdx b/www/apps/book/app/learn/advanced-development/custom-cli-scripts/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/custom-cli-scripts/page.mdx
rename to www/apps/book/app/learn/advanced-development/custom-cli-scripts/page.mdx
diff --git a/www/apps/book/app/advanced-development/custom-cli-scripts/seed-data/page.mdx b/www/apps/book/app/learn/advanced-development/custom-cli-scripts/seed-data/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/custom-cli-scripts/seed-data/page.mdx
rename to www/apps/book/app/learn/advanced-development/custom-cli-scripts/seed-data/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/configure-properties/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/configure-properties/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/configure-properties/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/configure-properties/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/default-properties/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/default-properties/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/default-properties/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/default-properties/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/index/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/index/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/index/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/index/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/infer-type/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/infer-type/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/infer-type/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/infer-type/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/manage-relationships/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/manage-relationships/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/primary-key/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/primary-key/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/primary-key/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/primary-key/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/property-types/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/property-types/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/property-types/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/property-types/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/relationships/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/relationships/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/relationships/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/relationships/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/searchable-property/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/searchable-property/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/searchable-property/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/searchable-property/page.mdx
diff --git a/www/apps/book/app/advanced-development/data-models/write-migration/page.mdx b/www/apps/book/app/learn/advanced-development/data-models/write-migration/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/data-models/write-migration/page.mdx
rename to www/apps/book/app/learn/advanced-development/data-models/write-migration/page.mdx
diff --git a/www/apps/book/app/advanced-development/events-and-subscribers/data-payload/page.mdx b/www/apps/book/app/learn/advanced-development/events-and-subscribers/data-payload/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/events-and-subscribers/data-payload/page.mdx
rename to www/apps/book/app/learn/advanced-development/events-and-subscribers/data-payload/page.mdx
diff --git a/www/apps/book/app/advanced-development/events-and-subscribers/emit-event/page.mdx b/www/apps/book/app/learn/advanced-development/events-and-subscribers/emit-event/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/events-and-subscribers/emit-event/page.mdx
rename to www/apps/book/app/learn/advanced-development/events-and-subscribers/emit-event/page.mdx
diff --git a/www/apps/book/app/advanced-development/module-links/custom-columns/page.mdx b/www/apps/book/app/learn/advanced-development/module-links/custom-columns/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/module-links/custom-columns/page.mdx
rename to www/apps/book/app/learn/advanced-development/module-links/custom-columns/page.mdx
diff --git a/www/apps/book/app/advanced-development/module-links/directions/page.mdx b/www/apps/book/app/learn/advanced-development/module-links/directions/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/module-links/directions/page.mdx
rename to www/apps/book/app/learn/advanced-development/module-links/directions/page.mdx
diff --git a/www/apps/book/app/advanced-development/module-links/page.mdx b/www/apps/book/app/learn/advanced-development/module-links/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/module-links/page.mdx
rename to www/apps/book/app/learn/advanced-development/module-links/page.mdx
diff --git a/www/apps/book/app/advanced-development/module-links/query/page.mdx b/www/apps/book/app/learn/advanced-development/module-links/query/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/module-links/query/page.mdx
rename to www/apps/book/app/learn/advanced-development/module-links/query/page.mdx
diff --git a/www/apps/book/app/advanced-development/module-links/remote-link/page.mdx b/www/apps/book/app/learn/advanced-development/module-links/remote-link/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/module-links/remote-link/page.mdx
rename to www/apps/book/app/learn/advanced-development/module-links/remote-link/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/container/page.mdx b/www/apps/book/app/learn/advanced-development/modules/container/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/container/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/container/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/db-operations/page.mdx b/www/apps/book/app/learn/advanced-development/modules/db-operations/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/db-operations/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/db-operations/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/isolation/page.mdx b/www/apps/book/app/learn/advanced-development/modules/isolation/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/isolation/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/isolation/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/multiple-services/page.mdx b/www/apps/book/app/learn/advanced-development/modules/multiple-services/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/multiple-services/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/multiple-services/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/options/page.mdx b/www/apps/book/app/learn/advanced-development/modules/options/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/options/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/options/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/page.mdx b/www/apps/book/app/learn/advanced-development/modules/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/service-constraints/page.mdx b/www/apps/book/app/learn/advanced-development/modules/service-constraints/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/service-constraints/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/service-constraints/page.mdx
diff --git a/www/apps/book/app/advanced-development/modules/service-factory/page.mdx b/www/apps/book/app/learn/advanced-development/modules/service-factory/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/modules/service-factory/page.mdx
rename to www/apps/book/app/learn/advanced-development/modules/service-factory/page.mdx
diff --git a/www/apps/book/app/advanced-development/page.mdx b/www/apps/book/app/learn/advanced-development/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/page.mdx
rename to www/apps/book/app/learn/advanced-development/page.mdx
diff --git a/www/apps/book/app/advanced-development/scheduled-jobs/execution-number/page.mdx b/www/apps/book/app/learn/advanced-development/scheduled-jobs/execution-number/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/scheduled-jobs/execution-number/page.mdx
rename to www/apps/book/app/learn/advanced-development/scheduled-jobs/execution-number/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/access-workflow-errors/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/access-workflow-errors/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/access-workflow-errors/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/access-workflow-errors/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/add-workflow-hook/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/add-workflow-hook/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/add-workflow-hook/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/add-workflow-hook/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/compensation-function/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/compensation-function/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/compensation-function/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/compensation-function/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/conditions/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/conditions/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/conditions/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/conditions/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/constructor-constraints/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/constructor-constraints/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/constructor-constraints/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/constructor-constraints/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/execute-another-workflow/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/execute-another-workflow/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/execute-another-workflow/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/execute-another-workflow/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/long-running-workflow/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/long-running-workflow/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/long-running-workflow/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/long-running-workflow/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/parallel-steps/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/parallel-steps/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/parallel-steps/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/parallel-steps/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/retry-failed-steps/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/retry-failed-steps/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/retry-failed-steps/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/retry-failed-steps/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/variable-manipulation/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/variable-manipulation/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/variable-manipulation/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/variable-manipulation/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/workflow-hooks/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/workflow-hooks/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/workflow-hooks/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/workflow-hooks/page.mdx
diff --git a/www/apps/book/app/advanced-development/workflows/workflow-timeout/page.mdx b/www/apps/book/app/learn/advanced-development/workflows/workflow-timeout/page.mdx
similarity index 100%
rename from www/apps/book/app/advanced-development/workflows/workflow-timeout/page.mdx
rename to www/apps/book/app/learn/advanced-development/workflows/workflow-timeout/page.mdx
diff --git a/www/apps/book/app/basics/admin-customizations/page.mdx b/www/apps/book/app/learn/basics/admin-customizations/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/admin-customizations/page.mdx
rename to www/apps/book/app/learn/basics/admin-customizations/page.mdx
diff --git a/www/apps/book/app/basics/api-routes/page.mdx b/www/apps/book/app/learn/basics/api-routes/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/api-routes/page.mdx
rename to www/apps/book/app/learn/basics/api-routes/page.mdx
diff --git a/www/apps/book/app/basics/commerce-modules/page.mdx b/www/apps/book/app/learn/basics/commerce-modules/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/commerce-modules/page.mdx
rename to www/apps/book/app/learn/basics/commerce-modules/page.mdx
diff --git a/www/apps/book/app/basics/events-and-subscribers/page.mdx b/www/apps/book/app/learn/basics/events-and-subscribers/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/events-and-subscribers/page.mdx
rename to www/apps/book/app/learn/basics/events-and-subscribers/page.mdx
diff --git a/www/apps/book/app/basics/loaders/page.mdx b/www/apps/book/app/learn/basics/loaders/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/loaders/page.mdx
rename to www/apps/book/app/learn/basics/loaders/page.mdx
diff --git a/www/apps/book/app/basics/medusa-container/page.mdx b/www/apps/book/app/learn/basics/medusa-container/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/medusa-container/page.mdx
rename to www/apps/book/app/learn/basics/medusa-container/page.mdx
diff --git a/www/apps/book/app/basics/modules-directory-structure/page.mdx b/www/apps/book/app/learn/basics/modules-directory-structure/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/modules-directory-structure/page.mdx
rename to www/apps/book/app/learn/basics/modules-directory-structure/page.mdx
diff --git a/www/apps/book/app/basics/modules/page.mdx b/www/apps/book/app/learn/basics/modules/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/modules/page.mdx
rename to www/apps/book/app/learn/basics/modules/page.mdx
diff --git a/www/apps/book/app/basics/page.mdx b/www/apps/book/app/learn/basics/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/page.mdx
rename to www/apps/book/app/learn/basics/page.mdx
diff --git a/www/apps/book/app/basics/project-directories-files/page.mdx b/www/apps/book/app/learn/basics/project-directories-files/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/project-directories-files/page.mdx
rename to www/apps/book/app/learn/basics/project-directories-files/page.mdx
diff --git a/www/apps/book/app/basics/scheduled-jobs/page.mdx b/www/apps/book/app/learn/basics/scheduled-jobs/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/scheduled-jobs/page.mdx
rename to www/apps/book/app/learn/basics/scheduled-jobs/page.mdx
diff --git a/www/apps/book/app/basics/workflows/page.mdx b/www/apps/book/app/learn/basics/workflows/page.mdx
similarity index 100%
rename from www/apps/book/app/basics/workflows/page.mdx
rename to www/apps/book/app/learn/basics/workflows/page.mdx
diff --git a/www/apps/book/app/customization/custom-features/api-route/page.mdx b/www/apps/book/app/learn/customization/custom-features/api-route/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/custom-features/api-route/page.mdx
rename to www/apps/book/app/learn/customization/custom-features/api-route/page.mdx
diff --git a/www/apps/book/app/customization/custom-features/module/page.mdx b/www/apps/book/app/learn/customization/custom-features/module/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/custom-features/module/page.mdx
rename to www/apps/book/app/learn/customization/custom-features/module/page.mdx
diff --git a/www/apps/book/app/customization/custom-features/page.mdx b/www/apps/book/app/learn/customization/custom-features/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/custom-features/page.mdx
rename to www/apps/book/app/learn/customization/custom-features/page.mdx
diff --git a/www/apps/book/app/customization/custom-features/workflow/page.mdx b/www/apps/book/app/learn/customization/custom-features/workflow/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/custom-features/workflow/page.mdx
rename to www/apps/book/app/learn/customization/custom-features/workflow/page.mdx
diff --git a/www/apps/book/app/customization/customize-admin/page.mdx b/www/apps/book/app/learn/customization/customize-admin/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/customize-admin/page.mdx
rename to www/apps/book/app/learn/customization/customize-admin/page.mdx
diff --git a/www/apps/book/app/customization/customize-admin/route/page.mdx b/www/apps/book/app/learn/customization/customize-admin/route/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/customize-admin/route/page.mdx
rename to www/apps/book/app/learn/customization/customize-admin/route/page.mdx
diff --git a/www/apps/book/app/customization/customize-admin/widget/page.mdx b/www/apps/book/app/learn/customization/customize-admin/widget/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/customize-admin/widget/page.mdx
rename to www/apps/book/app/learn/customization/customize-admin/widget/page.mdx
diff --git a/www/apps/book/app/customization/extend-models/create-links/page.mdx b/www/apps/book/app/learn/customization/extend-models/create-links/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/extend-models/create-links/page.mdx
rename to www/apps/book/app/learn/customization/extend-models/create-links/page.mdx
diff --git a/www/apps/book/app/customization/extend-models/define-link/page.mdx b/www/apps/book/app/learn/customization/extend-models/define-link/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/extend-models/define-link/page.mdx
rename to www/apps/book/app/learn/customization/extend-models/define-link/page.mdx
diff --git a/www/apps/book/app/customization/extend-models/extend-create-product/page.mdx b/www/apps/book/app/learn/customization/extend-models/extend-create-product/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/extend-models/extend-create-product/page.mdx
rename to www/apps/book/app/learn/customization/extend-models/extend-create-product/page.mdx
diff --git a/www/apps/book/app/customization/extend-models/page.mdx b/www/apps/book/app/learn/customization/extend-models/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/extend-models/page.mdx
rename to www/apps/book/app/learn/customization/extend-models/page.mdx
diff --git a/www/apps/book/app/customization/extend-models/query-linked-records/page.mdx b/www/apps/book/app/learn/customization/extend-models/query-linked-records/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/extend-models/query-linked-records/page.mdx
rename to www/apps/book/app/learn/customization/extend-models/query-linked-records/page.mdx
diff --git a/www/apps/book/app/customization/integrate-systems/handle-event/page.mdx b/www/apps/book/app/learn/customization/integrate-systems/handle-event/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/integrate-systems/handle-event/page.mdx
rename to www/apps/book/app/learn/customization/integrate-systems/handle-event/page.mdx
diff --git a/www/apps/book/app/customization/integrate-systems/page.mdx b/www/apps/book/app/learn/customization/integrate-systems/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/integrate-systems/page.mdx
rename to www/apps/book/app/learn/customization/integrate-systems/page.mdx
diff --git a/www/apps/book/app/customization/integrate-systems/schedule-task/page.mdx b/www/apps/book/app/learn/customization/integrate-systems/schedule-task/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/integrate-systems/schedule-task/page.mdx
rename to www/apps/book/app/learn/customization/integrate-systems/schedule-task/page.mdx
diff --git a/www/apps/book/app/customization/integrate-systems/service/page.mdx b/www/apps/book/app/learn/customization/integrate-systems/service/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/integrate-systems/service/page.mdx
rename to www/apps/book/app/learn/customization/integrate-systems/service/page.mdx
diff --git a/www/apps/book/app/customization/next-steps/page.mdx b/www/apps/book/app/learn/customization/next-steps/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/next-steps/page.mdx
rename to www/apps/book/app/learn/customization/next-steps/page.mdx
diff --git a/www/apps/book/app/customization/page.mdx b/www/apps/book/app/learn/customization/page.mdx
similarity index 100%
rename from www/apps/book/app/customization/page.mdx
rename to www/apps/book/app/learn/customization/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/instrumentation/page.mdx b/www/apps/book/app/learn/debugging-and-testing/instrumentation/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/instrumentation/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/instrumentation/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/logging/page.mdx b/www/apps/book/app/learn/debugging-and-testing/logging/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/logging/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/logging/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/page.mdx b/www/apps/book/app/learn/debugging-and-testing/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/modules-tests/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/modules-tests/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/modules-tests/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/modules-tests/page.mdx
diff --git a/www/apps/book/app/debugging-and-testing/testing-tools/page.mdx b/www/apps/book/app/learn/debugging-and-testing/testing-tools/page.mdx
similarity index 100%
rename from www/apps/book/app/debugging-and-testing/testing-tools/page.mdx
rename to www/apps/book/app/learn/debugging-and-testing/testing-tools/page.mdx
diff --git a/www/apps/book/app/deployment/page.mdx b/www/apps/book/app/learn/deployment/page.mdx
similarity index 100%
rename from www/apps/book/app/deployment/page.mdx
rename to www/apps/book/app/learn/deployment/page.mdx
diff --git a/www/apps/book/app/first-customizations/page.mdx b/www/apps/book/app/learn/first-customizations/page.mdx
similarity index 100%
rename from www/apps/book/app/first-customizations/page.mdx
rename to www/apps/book/app/learn/first-customizations/page.mdx
diff --git a/www/apps/book/app/learn/layout.tsx b/www/apps/book/app/learn/layout.tsx
new file mode 100644
index 0000000000..6f37c55a62
--- /dev/null
+++ b/www/apps/book/app/learn/layout.tsx
@@ -0,0 +1,24 @@
+import { TightLayout } from "docs-ui"
+import Feedback from "@/components/Feedback"
+import EditButton from "@/components/EditButton"
+import Providers from "../../providers"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <TightLayout
+      sidebarProps={{
+        expandItems: true,
+      }}
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+      ProvidersComponent={Providers}
+    >
+      {children}
+    </TightLayout>
+  )
+}
diff --git a/www/apps/book/app/more-resources/cheatsheet/page.mdx b/www/apps/book/app/learn/more-resources/cheatsheet/page.mdx
similarity index 100%
rename from www/apps/book/app/more-resources/cheatsheet/page.mdx
rename to www/apps/book/app/learn/more-resources/cheatsheet/page.mdx
diff --git a/www/apps/book/app/more-resources/page.mdx b/www/apps/book/app/learn/more-resources/page.mdx
similarity index 100%
rename from www/apps/book/app/more-resources/page.mdx
rename to www/apps/book/app/learn/more-resources/page.mdx
diff --git a/www/apps/book/app/page.mdx b/www/apps/book/app/learn/page.mdx
similarity index 100%
rename from www/apps/book/app/page.mdx
rename to www/apps/book/app/learn/page.mdx
diff --git a/www/apps/book/app/storefront-development/nextjs-starter/page.mdx b/www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx
similarity index 100%
rename from www/apps/book/app/storefront-development/nextjs-starter/page.mdx
rename to www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx
diff --git a/www/apps/book/app/storefront-development/page.mdx b/www/apps/book/app/learn/storefront-development/page.mdx
similarity index 100%
rename from www/apps/book/app/storefront-development/page.mdx
rename to www/apps/book/app/learn/storefront-development/page.mdx
diff --git a/www/apps/book/app/not-found.tsx b/www/apps/book/app/not-found.tsx
new file mode 100644
index 0000000000..36dfb6a183
--- /dev/null
+++ b/www/apps/book/app/not-found.tsx
@@ -0,0 +1,23 @@
+import { TightLayout } from "docs-ui"
+import Feedback from "../components/Feedback"
+import EditButton from "../components/EditButton"
+import NotFoundContent from "./_not-found.mdx"
+import Providers from "../providers"
+
+const NotFoundPage = () => {
+  return (
+    <TightLayout
+      sidebarProps={{
+        expandItems: true,
+      }}
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+      ProvidersComponent={Providers}
+    >
+      <NotFoundContent />
+    </TightLayout>
+  )
+}
+
+export default NotFoundPage
diff --git a/www/apps/book/app/page.tsx b/www/apps/book/app/page.tsx
new file mode 100644
index 0000000000..dc31d82618
--- /dev/null
+++ b/www/apps/book/app/page.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx"
+import { MainNav, RootProviders } from "docs-ui"
+import HomepageTopSection from "../components/Homepage/TopSection"
+import Providers from "../providers"
+import HomepageLinksSection from "../components/Homepage/LinksSection"
+import HomepageRecipesSection from "../components/Homepage/RecipesSection"
+import HomepageModulesSection from "../components/Homepage/ModulesSection"
+import HomepageFooter from "../components/Homepage/Footer"
+
+const Homepage = () => {
+  return (
+    <body
+      className={clsx(
+        "bg-medusa-bg-subtle font-base text-medium w-full",
+        "text-medusa-fg-subtle px-0.25 pt-0.25",
+        "h-screen overflow-hidden"
+      )}
+    >
+      <RootProviders>
+        <Providers>
+          <div
+            className={clsx(
+              "rounded-t bg-medusa-bg-base",
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "h-full w-full",
+              "overflow-y-scroll overflow-x-hidden"
+            )}
+            id="main"
+          >
+            <MainNav
+              className="border-b border-medusa-border-base"
+              itemsClassName={clsx(
+                "!my-1 [&_li_div]:!text-medusa-fg-subtle [&_li_a]:!text-medusa-fg-subtle",
+                "hover:[&_li_div]:!text-medusa-fg-base hover:[&_li_a]:!text-medusa-fg-base"
+              )}
+            />
+            <HomepageTopSection />
+            <HomepageLinksSection />
+            <HomepageRecipesSection />
+            <HomepageModulesSection />
+            <HomepageFooter />
+          </div>
+        </Providers>
+      </RootProviders>
+    </body>
+  )
+}
+
+export default Homepage
diff --git a/www/apps/book/components/Homepage/CodeTabs/index.tsx b/www/apps/book/components/Homepage/CodeTabs/index.tsx
new file mode 100644
index 0000000000..e7c00da4cf
--- /dev/null
+++ b/www/apps/book/components/Homepage/CodeTabs/index.tsx
@@ -0,0 +1,379 @@
+"use client"
+
+import { Link, VerticalCodeTab, VerticalCodeTabs } from "docs-ui"
+import { useState } from "react"
+
+type Tab = VerticalCodeTab & {
+  textSection: {
+    content: string
+    link: {
+      title: string
+      link: string
+    }
+  }
+}
+
+const HomepageCodeTabs = () => {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0)
+
+  const tabs: Tab[] = [
+    {
+      title: "Create API Route",
+      textSection: {
+        content:
+          "Expose custom features with REST API routes, then consume them from your client applications.",
+        link: {
+          title: "API Routes",
+          link: "/learn/basics/api-routes",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `export async function GET(
+  req: MedusaRequest,
+  res: MedusaResponse
+) {
+  const query = req.scope.resolve("query")
+
+  const { data } = await query.graph({
+    entity: "company",
+    fields: ["id", "name"],
+    filters: { name: "ACME" },
+  })
+
+  res.json({
+    companies: data
+  })
+}`,
+        highlights: [
+          ["1", "GET", "Create a GET endpoint."],
+          [
+            "5",
+            `query`,
+            "Query utility to retrieve data from a graph of\nall data models and their relations.",
+          ],
+          ["8", `"company"`, "Retrieve records of the `company` data model"],
+          ["13", "res.json", "Return a JSON response"],
+        ],
+      },
+    },
+    {
+      title: "Build Workflows",
+      textSection: {
+        content:
+          "Build flows as a series of steps, with retry mechanisms and tracking of each steps' status.",
+        link: {
+          title: "Workflows",
+          link: "/learn/basics/workflows",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `const handleDeliveryWorkflow = createWorkflow(
+  "handle-delivery",
+  function (input: WorkflowInput) {
+    notifyRestaurantStep(input.delivery_id);
+
+    const order = createOrderStep(input.delivery_id);
+
+    createFulfillmentStep(order);
+
+    awaitDeliveryStep();
+
+    return new WorkflowResponse("Delivery completed");
+  }
+)`,
+        highlights: [
+          [
+            "1",
+            "createWorkflow",
+            "Use the Workflows SDK to build a flow of a series of steps.",
+          ],
+          ["4", "notifyRestaurantStep", "Run steps in the worklfow"],
+          [
+            "10",
+            "awaitDeliveryStep",
+            "Wait for background actions to finish execution\nbefore performing some steps.",
+          ],
+        ],
+      },
+    },
+    {
+      title: "Add a Data Model",
+      textSection: {
+        content:
+          "Create data models that represent tables in the database using Medusa's Data Model Language.",
+        link: {
+          title: "DML",
+          link: "/learn/basics/modules#1-create-data-model",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `const DigitalProduct = model.define("digital_product", {
+  id: model.id().primaryKey(),
+  name: model.text(),
+  medias: model.hasMany(() => DigitalProductMedia, {
+    mappedBy: "digitalProduct"
+  })
+})
+.cascades({
+  delete: ["medias"]
+})`,
+        highlights: [
+          [
+            "1",
+            "model",
+            "Use Medusa's Data Model Language to\nrepresent custom tables in the database.",
+          ],
+          [
+            "4",
+            "hasMany",
+            "Create relations between models of the same module.",
+          ],
+        ],
+      },
+    },
+    {
+      title: "Build a Custom Module",
+      textSection: {
+        content:
+          "Build custom modules with commerce or architectural features and use them in API routes or workflows.",
+        link: {
+          title: "Modules",
+          link: "/learn/basics/modules",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `class DigitalProductModuleService extends MedusaService({
+  DigitalProduct,
+}) {
+  async authorizeLicense() {
+    console.log("License authorized!")
+  }
+}
+
+export async function POST(
+  req: MedusaRequest,
+  res: MedusaResponse
+) {
+  const digitalProductModuleService = req.scope.resolve(
+    "digitalProductModuleService"
+  )
+
+  await digitalProductModuleService.authorizeLicense()
+
+  res.json({ success: true })
+}`,
+        highlights: [
+          [
+            "1",
+            "DigitalProductModuleService",
+            "Create a service that accesses\nthe database to manage data models.",
+          ],
+          [
+            "1",
+            "MedusaService",
+            "Generate data-management methods\nfor your data models automatically.",
+          ],
+          [
+            "13",
+            "digitalProductModuleService",
+            "Resolve the database from the Medusa container\nin routes and other resources.",
+          ],
+          ["17", "authorizeLicense", "Use the service's custom methods."],
+        ],
+      },
+    },
+    {
+      title: "Link Data Models",
+      textSection: {
+        content:
+          "Add custom properties to Medusa's data models using module links to build custom use cases.",
+        link: {
+          title: "Module Links",
+          link: "/learn/advanced-development/module-links",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `const DigitalProduct = model.define("digital_product", {
+  id: model.id().primaryKey(),
+  name: model.text(),
+})
+
+export default defineLink(
+  DigitalProductModule.linkable.digitalProduct,
+  ProductModule.linkable.productVariant
+)`,
+        highlights: [
+          [
+            "6",
+            "defineLink",
+            "Create a link between data models of different modules.",
+          ],
+        ],
+      },
+    },
+    {
+      title: "Subscribe to Events",
+      textSection: {
+        content:
+          "Handle events emitted by the Medusa application to perform custom actions.",
+        link: {
+          title: "Subscribers",
+          link: "/learn/basics/events-and-subscribers",
+        },
+      },
+      code: {
+        lang: "ts",
+        source: `async function orderPlaced({
+  container,
+}: SubscriberArgs) {
+  const notificaitonModuleService = container.resolve(
+    Modules.NOTIFICATION
+  )
+
+  await notificaitonModuleService.createNotifications({
+    to: "customer@gmail.com",
+    channel: "email",
+    template: "order-placed"
+  })
+}
+
+export const config: SubscriberConfig = {
+  event: "order.placed",
+}`,
+        highlights: [
+          [
+            "1",
+            "orderPlaced",
+            "Define a subscriber that's\nexecuted when an event is emitted.",
+          ],
+          [
+            "4",
+            "notificaitonModuleService",
+            "Resolve a module's main service\nto use its methods.",
+          ],
+          ["8", "createNotification", "Send an email to a customer."],
+          [
+            "16",
+            `"order.placed"`,
+            "Execute the subscriber when an order is placed.",
+          ],
+        ],
+      },
+    },
+    {
+      title: "Customize Admin",
+      textSection: {
+        content:
+          "Inject widgets into predefined zones in the Medusa Admin, or add new pages.",
+        link: {
+          title: "Admin Customizations",
+          link: "/learn/basics/admin-customizations",
+        },
+      },
+      code: {
+        lang: "tsx",
+        source: `const ProductBrandWidget = () => {
+  const [brand, setBrand] = useState({
+    name: "Acme"
+  })
+
+  return (
+    <Container>
+      <Heading level="h2">Brand</Heading>
+      {brand && <span>Name: {brand.name}</span>}
+    </Container>
+  )
+}
+
+export const config = defineWidgetConfig({
+  zone: "product.details.before",
+})`,
+        highlights: [
+          [
+            "1",
+            "ProductBrandWidget",
+            "Create admin widgets as React components.",
+          ],
+          [
+            "7",
+            "Container",
+            "Use Medusa's UI components in your customizations.",
+          ],
+          [
+            "15",
+            `"product.details.before"`,
+            "Show the widget on the product details page.",
+          ],
+        ],
+      },
+    },
+    {
+      title: "Integrate Systems",
+      textSection: {
+        content:
+          "Build workflows around multiple systems to add more powerful features to Medusa.",
+        link: {
+          title: "Integrate Systems",
+          link: "/learn/customization/integrate-systems",
+        },
+      },
+      code: {
+        lang: "tsx",
+        source: `const syncBrandsFromSystemWorkflow = createWorkflow(
+  "sync-brands-from-system",
+  () => {
+    const toCreate = retrieveBrandsFromSystemStep()
+
+    const created = createBrandsInMedusaStep({ 
+      brands: toCreate
+    })
+
+    return new WorkflowResponse({
+      created,
+    })
+  }
+)`,
+        highlights: [
+          ["1", "createWorkflow", "Integrate systems using workflows."],
+          [
+            "4",
+            "retrieveBrandsFromSystemStep",
+            "Retrieve data from an external system.",
+          ],
+          ["6", "createBrandsInMedusaStep", "Sync data to Medusa."],
+        ],
+      },
+    },
+  ]
+
+  return (
+    <div className="row-span-2 pt-[56px] hidden lg:flex flex-col gap-1">
+      <VerticalCodeTabs
+        selectedTabIndex={selectedTabIndex}
+        setSelectedTabIndex={setSelectedTabIndex}
+        tabs={tabs}
+        className="h-[443px]"
+      />
+      <div className="flex gap-[6px] items-center mx-0.5">
+        <span className="text-medusa-fg-subtle text-small-plus">
+          {tabs[selectedTabIndex].textSection.content}
+        </span>
+        <span className="text-medusa-fg-subtle text-small">&#183;</span>
+        <Link
+          href={tabs[selectedTabIndex].textSection.link.link}
+          className="text-compact-small-plus"
+          withIcon
+        >
+          <span>{tabs[selectedTabIndex].textSection.link.title}</span>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default HomepageCodeTabs
diff --git a/www/apps/book/components/Homepage/Footer/index.tsx b/www/apps/book/components/Homepage/Footer/index.tsx
new file mode 100644
index 0000000000..0e69a321c2
--- /dev/null
+++ b/www/apps/book/components/Homepage/Footer/index.tsx
@@ -0,0 +1,24 @@
+import clsx from "clsx"
+import Feedback from "../../Feedback"
+import EditButton from "../../EditButton"
+
+const HomepageFooter = () => {
+  return (
+    <div className="py-4 w-full">
+      <div
+        className={clsx(
+          "flex flex-col lg:flex-row gap-2 justify-between lg:items-center",
+          "xl:mx-auto xl:max-w-[1136px] w-full px-1 sm:px-4 xl:px-0"
+        )}
+      >
+        <Feedback
+          showDottedSeparator={false}
+          question="Was this page helpful?"
+        />
+        <EditButton />
+      </div>
+    </div>
+  )
+}
+
+export default HomepageFooter
diff --git a/www/apps/book/components/Homepage/LinksSection/index.tsx b/www/apps/book/components/Homepage/LinksSection/index.tsx
new file mode 100644
index 0000000000..ac3672c6f7
--- /dev/null
+++ b/www/apps/book/components/Homepage/LinksSection/index.tsx
@@ -0,0 +1,95 @@
+import clsx from "clsx"
+import { Link } from "docs-ui"
+
+const HomepageLinksSection = () => {
+  const sections: SectionProps[] = [
+    {
+      title: "Customize Medusa Application",
+      links: [
+        {
+          href: "/learn",
+          text: "Create your first application",
+        },
+        {
+          href: "/learn/customization",
+          text: "Build a Module",
+        },
+        {
+          href: "https://docs.medusajs.com/v2/resources/integrations",
+          text: "Browse third-party integrations",
+        },
+      ],
+    },
+    {
+      title: "Admin Development",
+      links: [
+        {
+          href: "/learn/basics/admin-customizations",
+          text: "Build a UI Widget",
+        },
+        {
+          href: "/learn/advanced-development/admin/ui-routes",
+          text: "Add a UI Route",
+        },
+        {
+          href: "https://docs.medusajs.com/ui",
+          text: "Browse the UI component library",
+        },
+      ],
+    },
+    {
+      title: "Storefront Development",
+      links: [
+        {
+          href: "https://docs.medusajs.com/v2/resources/nextjs-starter",
+          text: "Explore our storefront starter",
+        },
+        {
+          href: "https://docs.medusajs.com/v2/resources/storefront-development",
+          text: "Build a custom storefront",
+        },
+        {
+          href: "https://docs.medusajs.com/ui",
+          text: "Browse the UI component library",
+        },
+      ],
+    },
+  ]
+  return (
+    <div
+      className={clsx(
+        "hidden lg:block py-4 w-full",
+        "border-y border-medusa-border-base xl:mx-auto"
+      )}
+    >
+      <div className="flex gap-4 flex-wrap xl:mx-auto xl:max-w-[1136px] w-full px-4 xl:px-0">
+        {sections.map((section, index) => (
+          <Section {...section} key={index} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+type SectionProps = {
+  title: string
+  links: {
+    text: string
+    href: string
+  }[]
+}
+
+const Section = ({ title, links }: SectionProps) => {
+  return (
+    <div className="flex flex-col gap-0.5 flex-1">
+      <h3 className="text-h3 text-medusa-fg-base">{title}</h3>
+      {links.map((link, index) => (
+        <Link key={index} className="text-compact-small-plus" href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default HomepageLinksSection
diff --git a/www/apps/book/components/Homepage/ModulesSection/index.tsx b/www/apps/book/components/Homepage/ModulesSection/index.tsx
new file mode 100644
index 0000000000..83ce2b3568
--- /dev/null
+++ b/www/apps/book/components/Homepage/ModulesSection/index.tsx
@@ -0,0 +1,203 @@
+import clsx from "clsx"
+import { Card, CardProps, IconHeadline, PuzzleColoredIcon } from "docs-ui"
+import { basePathUrl } from "../../../utils/base-path-url"
+
+const HomepageModulesSection = () => {
+  const sections: SectionProps[] = [
+    {
+      title: "Cart & Purchase",
+      text: "Checkout, Total calculations, and more",
+      modules: [
+        {
+          title: "Cart",
+          text: "Add to cart, checkout, and totals.",
+          href: "/resources/commerce-modules/cart",
+          image: basePathUrl("/images/cart-icon.png"),
+        },
+        {
+          title: "Payment",
+          text: "Process any payment type.",
+          href: "/resources/commerce-modules/payment",
+          image: basePathUrl("/images/payment-icon.png"),
+        },
+        {
+          title: "Customer",
+          text: "Customer and group management.",
+          href: "/resources/commerce-modules/customer",
+          image: basePathUrl("/images/customer-icon.png"),
+        },
+      ],
+    },
+    {
+      title: "Merchandising",
+      text: "Products, pricing, and promotions.",
+      modules: [
+        {
+          title: "Pricing",
+          text: "Configurable pricing engine",
+          href: "/resources/commerce-modules/pricing",
+          image: basePathUrl("/images/pricing-icon.png"),
+        },
+        {
+          title: "Promotion",
+          text: "Discounts and promotions",
+          href: "/resources/commerce-modules/promotion",
+          image: basePathUrl("/images/promotion-icon.png"),
+        },
+        {
+          title: "Product",
+          text: "Variants, categories, and bulk edits",
+          href: "/resources/commerce-modules/product",
+          image: basePathUrl("/images/product-icon.png"),
+        },
+      ],
+    },
+    {
+      title: "Fulfillment",
+      text: "OMS, fulfilment, and inventory.",
+      modules: [
+        {
+          title: "Order",
+          text: "Omnichannel order management",
+          href: "/resources/commerce-modules/order",
+          image: basePathUrl("/images/order-icon.png"),
+        },
+        {
+          title: "Inventory",
+          text: "Multi-warehouse and reservations",
+          href: "/resources/commerce-modules/inventory",
+          image: basePathUrl("/images/inventory-icon.png"),
+        },
+        {
+          title: "Fulfillment",
+          text: "Order fulfillment and shipping",
+          href: "/resources/commerce-modules/fulfillment",
+          image: basePathUrl("/images/fulfillment-icon.png"),
+        },
+        {
+          title: "Stock Location",
+          text: "Locations of stock-kept items",
+          href: "/resources/commerce-modules/stock-location",
+          image: basePathUrl("/images/stock-location-icon.png"),
+        },
+      ],
+    },
+    {
+      title: "Regions & Channels",
+      text: "Multi-region and omnichannel support.",
+      modules: [
+        {
+          title: "Region",
+          text: "Cross-border commerce",
+          href: "/resources/commerce-modules/region",
+          image: basePathUrl("/images/region-icon.png"),
+        },
+        {
+          title: "Sales Channel",
+          text: "Omnichannel sales",
+          href: "/resources/commerce-modules/sales-channel",
+          image: basePathUrl("/images/sales-channel-icon.png"),
+        },
+        {
+          title: "Tax",
+          text: "Granular tax control",
+          href: "/resources/commerce-modules/stock-location",
+          image: basePathUrl("/images/tax-icon.png"),
+        },
+        {
+          title: "Currency",
+          text: "Multi-currency support",
+          href: "/resources/commerce-modules/currency",
+          image: basePathUrl("/images/currency-icon.png"),
+        },
+      ],
+    },
+    {
+      title: "User Access",
+      text: "API keys and authentication.",
+      modules: [
+        {
+          title: "API Keys",
+          text: "Store and admin access",
+          href: "/resources/commerce-modules/api-key",
+          image: basePathUrl("/images/api-key-icon.png"),
+        },
+        {
+          title: "User Module",
+          text: "Admin user management",
+          href: "/resources/commerce-modules/user",
+          image: basePathUrl("/images/user-icon.png"),
+        },
+        {
+          title: "Auth",
+          text: "Integrate authentication methods",
+          href: "/resources/commerce-modules/auth",
+          image: basePathUrl("/images/auth-icon.png"),
+        },
+      ],
+    },
+  ]
+
+  return (
+    <div className="py-4 w-full border-y border-medusa-border-base">
+      <div
+        className={clsx(
+          "flex flex-col",
+          "gap-[40px] xs:gap-4",
+          "xl:mx-auto xl:max-w-[1136px] w-full px-1 sm:px-4 xl:px-0"
+        )}
+      >
+        <div className="flex flex-col gap-0.5 lg:max-w-[560px]">
+          <IconHeadline
+            title="Browse Commerce Modules"
+            icon={<PuzzleColoredIcon />}
+          />
+          <h2 className="text-medusa-fg-base text-h1">
+            All commerce features are provided as extendable modules in Medusa.
+          </h2>
+          <span className="text-medusa-fg-subtle text-small-plus">
+            Click on any of the commerce modules below to learn more about their
+            commerce features, and how to extend and use them for your custom
+            use-case.
+          </span>
+        </div>
+        {sections.map((section, index) => (
+          <Section {...section} key={index} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+type SectionProps = {
+  title: string
+  text: string
+  modules: Omit<CardProps, "type">[]
+}
+
+const Section = ({ title, text, modules }: SectionProps) => {
+  return (
+    <div
+      className={clsx("flex flex-col lg:flex-row", "gap-1.5 xs:gap-2 lg:gap-4")}
+    >
+      <div className="flex flex-col gap-0.5 text-medusa-fg-base w-full lg:w-1/3">
+        <h3 className="text-small-plus">{title}</h3>
+        <span className="text-h2">{text}</span>
+      </div>
+      <div
+        className={clsx(
+          "grid xs:grid-cols-2 xs:grid-rows-2",
+          "grid-cols-1 grid-rows-1",
+          "lg:gap-x-4 lg:gap-y-0.75 gap-0.75",
+          "w-full lg:w-2/3"
+        )}
+      >
+        {modules.map((card, index) => (
+          <Card {...card} type="default" key={index} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HomepageModulesSection
diff --git a/www/apps/book/components/Homepage/RecipesSection/index.tsx b/www/apps/book/components/Homepage/RecipesSection/index.tsx
new file mode 100644
index 0000000000..3e1be4509a
--- /dev/null
+++ b/www/apps/book/components/Homepage/RecipesSection/index.tsx
@@ -0,0 +1,90 @@
+import { TriangleRightMini } from "@medusajs/icons"
+import clsx from "clsx"
+import {
+  CalendarRefreshIcon,
+  Card,
+  CardProps,
+  ChefHatIcon,
+  IconHeadline,
+  ImageBinaryIcon,
+  Link,
+  ScrollTextIcon,
+  ShopIcon,
+} from "docs-ui"
+
+const HomepageRecipesSection = () => {
+  const cards: CardProps[] = [
+    {
+      type: "large",
+      title: "Marketplace",
+      text: "Build a marketplace with multiple vendors",
+      href: "https://docs.medusajs.com/v2/resources/recipes/marketplace/examples/vendors",
+      icon: ShopIcon,
+    },
+    {
+      type: "large",
+      title: "Subscriptions",
+      text: "Implement a subscription-based commerce store.",
+      href: "https://docs.medusajs.com/v2/resources/recipes/subscriptions/examples/standard",
+      icon: CalendarRefreshIcon,
+    },
+    {
+      type: "large",
+      title: "Restaurant-Delivery",
+      text: "Build a restaurant marketplace inspired by UberEats, with real-time delivery handling",
+      href: "https://docs.medusajs.com/v2/resources/recipes/marketplace/examples/restaurant-delivery",
+      icon: ChefHatIcon,
+    },
+    {
+      type: "large",
+      title: "Digital Products",
+      text: "Sell digital products with custom fulfillment.",
+      href: "https://docs.medusajs.com/v2/resources/recipes/digital-products/examples/standard",
+      icon: ImageBinaryIcon,
+    },
+  ]
+  return (
+    <div className={clsx("py-4 w-full")}>
+      <div
+        className={clsx(
+          "flex flex-col lg:flex-row",
+          "gap-2 lg:gap-4",
+          "xl:mx-auto xl:max-w-[1136px] w-full px-1 sm:px-4 xl:px-0"
+        )}
+      >
+        <div className="flex flex-col gap-1 w-full lg:w-1/3 xl:max-w-[336px]">
+          <div className="flex flex-col gap-0.5">
+            <IconHeadline title="Recipes" icon={<ScrollTextIcon />} />
+            <h2 className="text-h1 text-medusa-fg-base">
+              Medusa’s framework supports any business use case.
+            </h2>
+            <span className="text-medusa-fg-subtle text-small-plus">
+              These recipes show how you to build a use case by customizing and
+              extending existing data models and features, or creating new ones.
+            </span>
+          </div>
+          <Link
+            href={"https://docs.medusajs.com/v2/resources/recipes"}
+            className="flex gap-0.25 items-center text-compact-small-plus"
+            withIcon
+          >
+            <span>View All Recipes</span>
+          </Link>
+        </div>
+        <div
+          className={clsx(
+            "grid xs:grid-cols-2 xs:grid-rows-2 lg:gap-x-4 lg:gap-y-1.5",
+            "xs:gap-x-1.5 xs:gap-y-2 grid-cols-1 gap-1.5",
+            "w-full lg:w-2/3"
+          )}
+        >
+          {cards.map((card, index) => (
+            <Card {...card} key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HomepageRecipesSection
diff --git a/www/apps/book/components/Homepage/TopSection/index.tsx b/www/apps/book/components/Homepage/TopSection/index.tsx
new file mode 100644
index 0000000000..5f4f903bdd
--- /dev/null
+++ b/www/apps/book/components/Homepage/TopSection/index.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable @next/next/no-img-element */
+import clsx from "clsx"
+import { BookIcon, Card, IconHeadline, WindowPaintbrushIcon } from "docs-ui"
+import { basePathUrl } from "../../../utils/base-path-url"
+import HomepageCodeTabs from "../CodeTabs"
+
+const HomepageTopSection = () => {
+  return (
+    <div className="w-full relative">
+      <div
+        className={clsx(
+          "absolute h-full",
+          "left-0 top-0 w-full z-0 lg:hidden bg-contain bg-right-bottom bg-no-repeat"
+        )}
+        style={{
+          backgroundImage: `url(${basePathUrl(
+            "/images/get-started-card-md.png"
+          )})`,
+        }}
+      />
+      <div
+        className={clsx(
+          "absolute h-full lg:h-[calc(50%-32px)] border-b border-medusa-border-base",
+          "left-0 top-0 w-full z-1 bg-cover bg-repeat",
+          "bg-bg-stripes dark:bg-bg-stripes-dark"
+        )}
+      />
+      <div
+        className={clsx(
+          "w-fit mx-auto lg:grid lg:grid-cols-2 lg:grid-rows-2",
+          "xl:grid-cols-[336px_752px] lg:grid-cols-[25%_75%] lg:gap-x-4",
+          "2xl:pl-[184px] lg:pb-4 2xl:pr-[176px] z-[2] relative",
+          "xs:px-4 xs:pb-4 px-1 pb-8",
+          "flex justify-center items-start"
+        )}
+      >
+        <div className="flex flex-col gap-1.5 pt-1 xs:pt-4 lg:py-4">
+          <div className="flex flex-col gap-[10px]">
+            <IconHeadline title="Documentation" icon={<BookIcon />} />
+            <h2 className="text-medusa-fg-base text-h1 text-pretty w-full md:w-2/3 lg:w-full">
+              Learn how to build Medusa projects. Explore our guides.
+            </h2>
+          </div>
+          <Card
+            type="mini"
+            title="Get started"
+            text="Introduction"
+            themeImage={{
+              light: basePathUrl("/images/get-started-card.png"),
+              dark: basePathUrl("/images/get-started-card-dark.png"),
+            }}
+            href={"/learn"}
+          />
+        </div>
+        <HomepageCodeTabs />
+        <div className="pt-4 hidden lg:flex flex-col gap-0.5">
+          <IconHeadline
+            title="Optimized for Customizations"
+            icon={<WindowPaintbrushIcon />}
+          />
+          <h2 className="text-medusa-fg-base text-h1 text-pretty">
+            A digital commerce platform with a built-in framework for
+            customizations.
+          </h2>
+          <span className="text-small-plus text-medusa-fg-subtle">
+            Unlike other platforms, Medusa allows you to easily customize and
+            extend the behavior of your commerce platform to always fit your
+            business needs.
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HomepageTopSection
diff --git a/www/apps/book/config/index.ts b/www/apps/book/config/index.ts
index 8535ed7e77..43c73a685a 100644
--- a/www/apps/book/config/index.ts
+++ b/www/apps/book/config/index.ts
@@ -4,7 +4,7 @@ import { sidebarConfig } from "./sidebar"
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
-  titleSuffix: "Medusa v2 Docs",
+  titleSuffix: "Medusa v2 Documentation",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: sidebarConfig,
diff --git a/www/apps/book/generated/edit-dates.mjs b/www/apps/book/generated/edit-dates.mjs
index 4ef61ae0f0..c1a14cd970 100644
--- a/www/apps/book/generated/edit-dates.mjs
+++ b/www/apps/book/generated/edit-dates.mjs
@@ -1,116 +1,116 @@
 export const generatedEditDates = {
-  "app/basics/scheduled-jobs/page.mdx": "2024-09-30T08:43:53.132Z",
-  "app/basics/workflows/page.mdx": "2024-09-30T08:43:53.132Z",
-  "app/deployment/page.mdx": "2024-08-05T07:24:05+00:00",
-  "app/page.mdx": "2024-09-03T07:09:09.034Z",
-  "app/basics/commerce-modules/page.mdx": "2024-09-30T08:43:53.131Z",
-  "app/advanced-development/workflows/retry-failed-steps/page.mdx": "2024-09-30T08:43:53.130Z",
-  "app/advanced-development/workflows/workflow-hooks/page.mdx": "2024-09-30T08:43:53.131Z",
-  "app/cheatsheet/page.mdx": "2024-07-11T13:53:40+03:00",
-  "app/debugging-and-testing/logging/page.mdx": "2024-09-30T08:43:53.135Z",
-  "app/more-resources/page.mdx": "2024-07-04T17:26:03+03:00",
-  "app/storefront-development/page.mdx": "2024-09-11T10:58:59.290Z",
-  "app/storefront-development/nextjs-starter/page.mdx": "2024-07-04T17:26:03+03:00",
-  "app/basics/page.mdx": "2024-09-03T07:11:06.879Z",
-  "app/basics/admin-customizations/page.mdx": "2024-10-07T12:41:39.218Z",
-  "app/advanced-development/workflows/workflow-timeout/page.mdx": "2024-09-30T08:43:53.131Z",
-  "app/advanced-development/workflows/parallel-steps/page.mdx": "2024-09-30T08:43:53.130Z",
-  "app/advanced-development/page.mdx": "2024-07-04T17:26:03+03:00",
-  "app/first-customizations/page.mdx": "2024-09-11T10:48:42.374Z",
-  "app/debugging-and-testing/page.mdx": "2024-05-03T17:36:38+03:00",
-  "app/basics/medusa-container/page.mdx": "2024-09-30T08:43:53.132Z",
-  "app/basics/project-directories-files/page.mdx": "2024-10-03T12:46:52.762Z",
-  "app/basics/api-routes/page.mdx": "2024-09-11T10:48:31.777Z",
-  "app/basics/modules-directory-structure/page.mdx": "2024-10-03T13:03:35.957Z",
-  "app/advanced-development/workflows/access-workflow-errors/page.mdx": "2024-09-18T12:54:04.695Z",
-  "app/basics/events-and-subscribers/page.mdx": "2024-09-30T08:43:53.131Z",
-  "app/advanced-development/modules/container/page.mdx": "2024-09-30T08:43:53.125Z",
-  "app/advanced-development/workflows/execute-another-workflow/page.mdx": "2024-09-30T08:43:53.129Z",
-  "app/basics/loaders/page.mdx": "2024-09-03T08:00:45.993Z",
-  "app/advanced-development/admin/widgets/page.mdx": "2024-10-07T12:51:09.969Z",
-  "app/advanced-development/data-models/page.mdx": "2024-09-19T07:26:43.535Z",
-  "app/advanced-development/modules/remote-link/page.mdx": "2024-09-30T08:43:53.127Z",
-  "app/advanced-development/api-routes/protected-routes/page.mdx": "2024-09-30T08:43:53.121Z",
-  "app/advanced-development/workflows/add-workflow-hook/page.mdx": "2024-09-30T08:43:53.128Z",
-  "app/advanced-development/events-and-subscribers/data-payload/page.mdx": "2024-07-16T17:12:05+01:00",
-  "app/advanced-development/data-models/default-properties/page.mdx": "2024-09-19T07:32:06.118Z",
-  "app/advanced-development/workflows/advanced-example/page.mdx": "2024-09-11T10:46:59.975Z",
-  "app/advanced-development/events-and-subscribers/emit-event/page.mdx": "2024-09-30T08:43:53.125Z",
-  "app/advanced-development/workflows/conditions/page.mdx": "2024-09-30T08:43:53.128Z",
-  "app/advanced-development/modules/module-link-directions/page.mdx": "2024-07-24T09:16:01+02:00",
-  "app/advanced-development/admin/page.mdx": "2024-10-07T12:39:13.178Z",
-  "app/advanced-development/workflows/long-running-workflow/page.mdx": "2024-09-30T08:43:53.129Z",
-  "app/advanced-development/workflows/constructor-constraints/page.mdx": "2024-10-04T08:40:14.867Z",
-  "app/advanced-development/data-models/write-migration/page.mdx": "2024-07-15T17:46:10+02:00",
-  "app/advanced-development/data-models/manage-relationships/page.mdx": "2024-09-10T11:39:51.167Z",
-  "app/advanced-development/modules/remote-query/page.mdx": "2024-07-21T21:20:24+02:00",
-  "app/advanced-development/modules/options/page.mdx": "2024-10-16T08:49:27.162Z",
-  "app/advanced-development/data-models/relationships/page.mdx": "2024-09-30T08:43:53.125Z",
-  "app/advanced-development/workflows/compensation-function/page.mdx": "2024-09-30T08:43:53.128Z",
-  "app/advanced-development/modules/service-factory/page.mdx": "2024-09-30T08:43:53.127Z",
-  "app/advanced-development/data-models/primary-key/page.mdx": "2024-09-30T08:43:53.123Z",
-  "app/advanced-development/modules/module-links/page.mdx": "2024-09-30T08:43:53.126Z",
-  "app/advanced-development/data-models/searchable-property/page.mdx": "2024-09-30T08:43:53.125Z",
-  "app/advanced-development/scheduled-jobs/execution-number/page.mdx": "2024-07-02T09:41:15+00:00",
-  "app/advanced-development/api-routes/parameters/page.mdx": "2024-09-11T10:44:13.491Z",
-  "app/advanced-development/api-routes/http-methods/page.mdx": "2024-09-11T10:43:33.169Z",
-  "app/advanced-development/admin/tips/page.mdx": "2024-10-07T12:50:36.335Z",
-  "app/advanced-development/api-routes/cors/page.mdx": "2024-09-30T08:43:53.121Z",
-  "app/advanced-development/admin/ui-routes/page.mdx": "2024-10-07T12:52:37.509Z",
-  "app/advanced-development/api-routes/middlewares/page.mdx": "2024-09-11T10:45:31.861Z",
-  "app/advanced-development/modules/isolation/page.mdx": "2024-07-04T17:26:03+03:00",
-  "app/advanced-development/data-models/configure-properties/page.mdx": "2024-09-30T08:43:53.122Z",
-  "app/advanced-development/data-models/index/page.mdx": "2024-09-30T08:43:53.122Z",
-  "app/advanced-development/custom-cli-scripts/page.mdx": "2024-09-30T08:43:53.122Z",
-  "app/advanced-development/data-models/property-types/page.mdx": "2024-09-30T08:43:53.124Z",
-  "app/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx": "2024-09-30T08:43:53.136Z",
-  "app/debugging-and-testing/testing-tools/integration-tests/page.mdx": "2024-09-10T11:39:51.170Z",
-  "app/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx": "2024-09-30T08:43:53.139Z",
-  "app/debugging-and-testing/testing-tools/page.mdx": "2024-09-30T08:43:53.139Z",
-  "app/debugging-and-testing/testing-tools/unit-tests/module-example/page.mdx": "2024-09-02T11:04:27.232Z",
-  "app/debugging-and-testing/testing-tools/unit-tests/page.mdx": "2024-09-02T11:03:26.997Z",
-  "app/advanced-development/modules/service-constraints/page.mdx": "2024-09-30T08:43:53.127Z",
-  "app/advanced-development/api-routes/page.mdx": "2024-09-04T09:36:33.961Z",
-  "app/advanced-development/api-routes/responses/page.mdx": "2024-09-11T10:44:37.016Z",
-  "app/advanced-development/api-routes/validation/page.mdx": "2024-09-11T10:46:31.476Z",
-  "app/advanced-development/api-routes/errors/page.mdx": "2024-09-30T08:43:53.121Z",
-  "app/advanced-development/admin/constraints/page.mdx": "2024-09-10T11:39:51.165Z",
-  "app/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx": "2024-10-16T08:50:03.061Z",
-  "app/debugging-and-testing/testing-tools/modules-tests/page.mdx": "2024-10-16T08:50:23.232Z",
-  "app/advanced-development/module-links/custom-columns/page.mdx": "2024-09-16T15:51:33.570Z",
-  "app/advanced-development/module-links/directions/page.mdx": "2024-09-16T15:37:51.441Z",
-  "app/advanced-development/module-links/page.mdx": "2024-09-16T15:36:48.190Z",
-  "app/advanced-development/module-links/query/page.mdx": "2024-09-16T12:42:27.579Z",
-  "app/advanced-development/module-links/remote-link/page.mdx": "2024-09-16T12:42:27.581Z",
-  "app/advanced-development/modules/db-operations/page.mdx": "2024-09-16T14:38:29.150Z",
-  "app/advanced-development/modules/multiple-services/page.mdx": "2024-09-16T14:41:32.975Z",
-  "app/advanced-development/modules/page.mdx": "2024-09-16T14:33:48.217Z",
-  "app/debugging-and-testing/instrumentation/page.mdx": "2024-09-17T08:53:15.910Z",
-  "app/advanced-development/api-routes/additional-data/page.mdx": "2024-09-30T08:43:53.120Z",
-  "app/advanced-development/workflows/page.mdx": "2024-09-18T08:00:57.364Z",
-  "app/advanced-development/workflows/variable-manipulation/page.mdx": "2024-09-30T08:43:53.130Z",
-  "app/customization/custom-features/api-route/page.mdx": "2024-09-12T12:42:34.201Z",
-  "app/customization/custom-features/module/page.mdx": "2024-10-16T08:49:44.676Z",
-  "app/customization/custom-features/workflow/page.mdx": "2024-09-30T08:43:53.133Z",
-  "app/customization/extend-models/create-links/page.mdx": "2024-09-30T08:43:53.133Z",
-  "app/customization/extend-models/extend-create-product/page.mdx": "2024-09-30T08:43:53.134Z",
-  "app/customization/custom-features/page.mdx": "2024-09-12T11:18:13.271Z",
-  "app/customization/customize-admin/page.mdx": "2024-09-12T12:25:29.853Z",
-  "app/customization/customize-admin/route/page.mdx": "2024-10-07T12:43:11.335Z",
-  "app/customization/customize-admin/widget/page.mdx": "2024-10-07T12:44:24.538Z",
-  "app/customization/extend-models/define-link/page.mdx": "2024-09-30T08:43:53.134Z",
-  "app/customization/extend-models/page.mdx": "2024-09-12T12:38:57.394Z",
-  "app/customization/extend-models/query-linked-records/page.mdx": "2024-09-30T08:43:53.134Z",
-  "app/customization/integrate-systems/handle-event/page.mdx": "2024-09-30T08:43:53.135Z",
-  "app/customization/integrate-systems/page.mdx": "2024-09-12T12:33:29.827Z",
-  "app/customization/integrate-systems/schedule-task/page.mdx": "2024-09-30T08:43:53.135Z",
-  "app/customization/integrate-systems/service/page.mdx": "2024-10-16T08:49:50.899Z",
-  "app/customization/next-steps/page.mdx": "2024-09-12T10:50:04.873Z",
-  "app/customization/page.mdx": "2024-09-12T11:16:18.504Z",
-  "app/more-resources/cheatsheet/page.mdx": "2024-07-11T16:11:26.480Z",
-  "app/architecture/architectural-modules/page.mdx": "2024-09-23T12:51:04.520Z",
-  "app/architecture/overview/page.mdx": "2024-09-23T12:55:01.339Z",
-  "app/advanced-development/data-models/infer-type/page.mdx": "2024-09-30T08:43:53.123Z",
-  "app/advanced-development/custom-cli-scripts/seed-data/page.mdx": "2024-10-03T11:11:07.181Z",
-  "app/basics/modules/page.mdx": "2024-10-16T08:49:39.997Z"
+  "app/learn/basics/scheduled-jobs/page.mdx": "2024-09-30T08:43:53.132Z",
+  "app/learn/basics/workflows/page.mdx": "2024-09-30T08:43:53.132Z",
+  "app/learn/deployment/page.mdx": "2024-08-05T07:24:05+00:00",
+  "app/learn/page.mdx": "2024-09-03T07:09:09.034Z",
+  "app/learn/basics/commerce-modules/page.mdx": "2024-09-30T08:43:53.131Z",
+  "app/learn/advanced-development/workflows/retry-failed-steps/page.mdx": "2024-09-30T08:43:53.130Z",
+  "app/learn/advanced-development/workflows/workflow-hooks/page.mdx": "2024-09-30T08:43:53.131Z",
+  "app/learn/cheatsheet/page.mdx": "2024-07-11T13:53:40+03:00",
+  "app/learn/debugging-and-testing/logging/page.mdx": "2024-09-30T08:43:53.135Z",
+  "app/learn/more-resources/page.mdx": "2024-07-04T17:26:03+03:00",
+  "app/learn/storefront-development/page.mdx": "2024-09-11T10:58:59.290Z",
+  "app/learn/storefront-development/nextjs-starter/page.mdx": "2024-07-04T17:26:03+03:00",
+  "app/learn/basics/page.mdx": "2024-09-03T07:11:06.879Z",
+  "app/learn/basics/admin-customizations/page.mdx": "2024-10-07T12:41:39.218Z",
+  "app/learn/advanced-development/workflows/workflow-timeout/page.mdx": "2024-09-30T08:43:53.131Z",
+  "app/learn/advanced-development/workflows/parallel-steps/page.mdx": "2024-09-30T08:43:53.130Z",
+  "app/learn/advanced-development/page.mdx": "2024-07-04T17:26:03+03:00",
+  "app/learn/first-customizations/page.mdx": "2024-09-11T10:48:42.374Z",
+  "app/learn/debugging-and-testing/page.mdx": "2024-05-03T17:36:38+03:00",
+  "app/learn/basics/medusa-container/page.mdx": "2024-09-30T08:43:53.132Z",
+  "app/learn/basics/project-directories-files/page.mdx": "2024-10-03T12:46:52.762Z",
+  "app/learn/basics/api-routes/page.mdx": "2024-09-11T10:48:31.777Z",
+  "app/learn/basics/modules-directory-structure/page.mdx": "2024-10-03T13:03:35.957Z",
+  "app/learn/advanced-development/workflows/access-workflow-errors/page.mdx": "2024-09-18T12:54:04.695Z",
+  "app/learn/basics/events-and-subscribers/page.mdx": "2024-09-30T08:43:53.131Z",
+  "app/learn/advanced-development/modules/container/page.mdx": "2024-09-30T08:43:53.125Z",
+  "app/learn/advanced-development/workflows/execute-another-workflow/page.mdx": "2024-09-30T08:43:53.129Z",
+  "app/learn/basics/loaders/page.mdx": "2024-09-03T08:00:45.993Z",
+  "app/learn/advanced-development/admin/widgets/page.mdx": "2024-10-07T12:51:09.969Z",
+  "app/learn/advanced-development/data-models/page.mdx": "2024-09-19T07:26:43.535Z",
+  "app/learn/advanced-development/modules/remote-link/page.mdx": "2024-09-30T08:43:53.127Z",
+  "app/learn/advanced-development/api-routes/protected-routes/page.mdx": "2024-09-30T08:43:53.121Z",
+  "app/learn/advanced-development/workflows/add-workflow-hook/page.mdx": "2024-09-30T08:43:53.128Z",
+  "app/learn/advanced-development/events-and-subscribers/data-payload/page.mdx": "2024-07-16T17:12:05+01:00",
+  "app/learn/advanced-development/data-models/default-properties/page.mdx": "2024-09-19T07:32:06.118Z",
+  "app/learn/advanced-development/workflows/advanced-example/page.mdx": "2024-09-11T10:46:59.975Z",
+  "app/learn/advanced-development/events-and-subscribers/emit-event/page.mdx": "2024-09-30T08:43:53.125Z",
+  "app/learn/advanced-development/workflows/conditions/page.mdx": "2024-09-30T08:43:53.128Z",
+  "app/learn/advanced-development/modules/module-link-directions/page.mdx": "2024-07-24T09:16:01+02:00",
+  "app/learn/advanced-development/admin/page.mdx": "2024-10-07T12:39:13.178Z",
+  "app/learn/advanced-development/workflows/long-running-workflow/page.mdx": "2024-09-30T08:43:53.129Z",
+  "app/learn/advanced-development/workflows/constructor-constraints/page.mdx": "2024-10-04T08:40:14.867Z",
+  "app/learn/advanced-development/data-models/write-migration/page.mdx": "2024-07-15T17:46:10+02:00",
+  "app/learn/advanced-development/data-models/manage-relationships/page.mdx": "2024-09-10T11:39:51.167Z",
+  "app/learn/advanced-development/modules/remote-query/page.mdx": "2024-07-21T21:20:24+02:00",
+  "app/learn/advanced-development/modules/options/page.mdx": "2024-10-16T08:49:27.162Z",
+  "app/learn/advanced-development/data-models/relationships/page.mdx": "2024-09-30T08:43:53.125Z",
+  "app/learn/advanced-development/workflows/compensation-function/page.mdx": "2024-09-30T08:43:53.128Z",
+  "app/learn/advanced-development/modules/service-factory/page.mdx": "2024-09-30T08:43:53.127Z",
+  "app/learn/advanced-development/data-models/primary-key/page.mdx": "2024-09-30T08:43:53.123Z",
+  "app/learn/advanced-development/modules/module-links/page.mdx": "2024-09-30T08:43:53.126Z",
+  "app/learn/advanced-development/data-models/searchable-property/page.mdx": "2024-09-30T08:43:53.125Z",
+  "app/learn/advanced-development/scheduled-jobs/execution-number/page.mdx": "2024-07-02T09:41:15+00:00",
+  "app/learn/advanced-development/api-routes/parameters/page.mdx": "2024-09-11T10:44:13.491Z",
+  "app/learn/advanced-development/api-routes/http-methods/page.mdx": "2024-09-11T10:43:33.169Z",
+  "app/learn/advanced-development/admin/tips/page.mdx": "2024-10-07T12:50:36.335Z",
+  "app/learn/advanced-development/api-routes/cors/page.mdx": "2024-09-30T08:43:53.121Z",
+  "app/learn/advanced-development/admin/ui-routes/page.mdx": "2024-10-07T12:52:37.509Z",
+  "app/learn/advanced-development/api-routes/middlewares/page.mdx": "2024-09-11T10:45:31.861Z",
+  "app/learn/advanced-development/modules/isolation/page.mdx": "2024-07-04T17:26:03+03:00",
+  "app/learn/advanced-development/data-models/configure-properties/page.mdx": "2024-09-30T08:43:53.122Z",
+  "app/learn/advanced-development/data-models/index/page.mdx": "2024-09-30T08:43:53.122Z",
+  "app/learn/advanced-development/custom-cli-scripts/page.mdx": "2024-09-30T08:43:53.122Z",
+  "app/learn/advanced-development/data-models/property-types/page.mdx": "2024-09-30T08:43:53.124Z",
+  "app/learn/debugging-and-testing/testing-tools/integration-tests/api-routes/page.mdx": "2024-09-30T08:43:53.136Z",
+  "app/learn/debugging-and-testing/testing-tools/integration-tests/page.mdx": "2024-09-10T11:39:51.170Z",
+  "app/learn/debugging-and-testing/testing-tools/integration-tests/workflows/page.mdx": "2024-09-30T08:43:53.139Z",
+  "app/learn/debugging-and-testing/testing-tools/page.mdx": "2024-09-30T08:43:53.139Z",
+  "app/learn/debugging-and-testing/testing-tools/unit-tests/module-example/page.mdx": "2024-09-02T11:04:27.232Z",
+  "app/learn/debugging-and-testing/testing-tools/unit-tests/page.mdx": "2024-09-02T11:03:26.997Z",
+  "app/learn/advanced-development/modules/service-constraints/page.mdx": "2024-09-30T08:43:53.127Z",
+  "app/learn/advanced-development/api-routes/page.mdx": "2024-09-04T09:36:33.961Z",
+  "app/learn/advanced-development/api-routes/responses/page.mdx": "2024-09-11T10:44:37.016Z",
+  "app/learn/advanced-development/api-routes/validation/page.mdx": "2024-09-11T10:46:31.476Z",
+  "app/learn/advanced-development/api-routes/errors/page.mdx": "2024-09-30T08:43:53.121Z",
+  "app/learn/advanced-development/admin/constraints/page.mdx": "2024-09-10T11:39:51.165Z",
+  "app/learn/debugging-and-testing/testing-tools/modules-tests/module-example/page.mdx": "2024-10-16T08:50:03.061Z",
+  "app/learn/debugging-and-testing/testing-tools/modules-tests/page.mdx": "2024-10-16T08:50:23.232Z",
+  "app/learn/advanced-development/module-links/custom-columns/page.mdx": "2024-09-16T15:51:33.570Z",
+  "app/learn/advanced-development/module-links/directions/page.mdx": "2024-09-16T15:37:51.441Z",
+  "app/learn/advanced-development/module-links/page.mdx": "2024-09-16T15:36:48.190Z",
+  "app/learn/advanced-development/module-links/query/page.mdx": "2024-09-16T12:42:27.579Z",
+  "app/learn/advanced-development/module-links/remote-link/page.mdx": "2024-09-16T12:42:27.581Z",
+  "app/learn/advanced-development/modules/db-operations/page.mdx": "2024-09-16T14:38:29.150Z",
+  "app/learn/advanced-development/modules/multiple-services/page.mdx": "2024-09-16T14:41:32.975Z",
+  "app/learn/advanced-development/modules/page.mdx": "2024-09-16T14:33:48.217Z",
+  "app/learn/debugging-and-testing/instrumentation/page.mdx": "2024-09-17T08:53:15.910Z",
+  "app/learn/advanced-development/api-routes/additional-data/page.mdx": "2024-09-30T08:43:53.120Z",
+  "app/learn/advanced-development/workflows/page.mdx": "2024-09-18T08:00:57.364Z",
+  "app/learn/advanced-development/workflows/variable-manipulation/page.mdx": "2024-09-30T08:43:53.130Z",
+  "app/learn/customization/custom-features/api-route/page.mdx": "2024-09-12T12:42:34.201Z",
+  "app/learn/customization/custom-features/module/page.mdx": "2024-10-16T08:49:44.676Z",
+  "app/learn/customization/custom-features/workflow/page.mdx": "2024-09-30T08:43:53.133Z",
+  "app/learn/customization/extend-models/create-links/page.mdx": "2024-09-30T08:43:53.133Z",
+  "app/learn/customization/extend-models/extend-create-product/page.mdx": "2024-09-30T08:43:53.134Z",
+  "app/learn/customization/custom-features/page.mdx": "2024-09-12T11:18:13.271Z",
+  "app/learn/customization/customize-admin/page.mdx": "2024-09-12T12:25:29.853Z",
+  "app/learn/customization/customize-admin/route/page.mdx": "2024-10-07T12:43:11.335Z",
+  "app/learn/customization/customize-admin/widget/page.mdx": "2024-10-07T12:44:24.538Z",
+  "app/learn/customization/extend-models/define-link/page.mdx": "2024-09-30T08:43:53.134Z",
+  "app/learn/customization/extend-models/page.mdx": "2024-09-12T12:38:57.394Z",
+  "app/learn/customization/extend-models/query-linked-records/page.mdx": "2024-09-30T08:43:53.134Z",
+  "app/learn/customization/integrate-systems/handle-event/page.mdx": "2024-09-30T08:43:53.135Z",
+  "app/learn/customization/integrate-systems/page.mdx": "2024-09-12T12:33:29.827Z",
+  "app/learn/customization/integrate-systems/schedule-task/page.mdx": "2024-09-30T08:43:53.135Z",
+  "app/learn/customization/integrate-systems/service/page.mdx": "2024-10-16T08:49:50.899Z",
+  "app/learn/customization/next-steps/page.mdx": "2024-09-12T10:50:04.873Z",
+  "app/learn/customization/page.mdx": "2024-09-12T11:16:18.504Z",
+  "app/learn/more-resources/cheatsheet/page.mdx": "2024-07-11T16:11:26.480Z",
+  "app/learn/architecture/architectural-modules/page.mdx": "2024-09-23T12:51:04.520Z",
+  "app/learn/architecture/overview/page.mdx": "2024-09-23T12:55:01.339Z",
+  "app/learn/advanced-development/data-models/infer-type/page.mdx": "2024-09-30T08:43:53.123Z",
+  "app/learn/advanced-development/custom-cli-scripts/seed-data/page.mdx": "2024-10-03T11:11:07.181Z",
+  "app/learn/basics/modules/page.mdx": "2024-10-16T08:49:39.997Z"
 }
\ No newline at end of file
diff --git a/www/apps/book/next.config.mjs b/www/apps/book/next.config.mjs
index f297b99835..7225d90473 100644
--- a/www/apps/book/next.config.mjs
+++ b/www/apps/book/next.config.mjs
@@ -130,48 +130,43 @@ const nextConfig = {
   async redirects() {
     return [
       {
-        source: "/advanced-development/modules/remote-query",
-        destination: "/advanced-development/module-links/query",
+        source: "/advanced-development/:path*",
+        destination: "/learn/advanced-development/:path*",
         permanent: true,
       },
       {
-        source: "/advanced-development/modules/query",
-        destination: "/advanced-development/module-links/query",
+        source: "/basics/:path*",
+        destination: "/learn/basics/:path*",
         permanent: true,
       },
       {
-        source: "/advanced-development/modules/module-links",
-        destination: "/advanced-development/module-links",
+        source: "/customization/:path*",
+        destination: "/learn/customization/:path*",
         permanent: true,
       },
       {
-        source: "/advanced-development/modules/module-link-directions",
-        destination: "/advanced-development/module-links/directions",
+        source: "/debugging-and-testing/:path*",
+        destination: "/learn/debugging-and-testing/:path*",
         permanent: true,
       },
       {
-        source: "/advanced-development/modules/remote-link",
-        destination: "/advanced-development/module-links/remote-link",
+        source: "/deployment/:path*",
+        destination: "/learn/deployment/:path*",
         permanent: true,
       },
       {
-        source: "/cheatsheet",
-        destination: "/more-resources/cheatsheet",
+        source: "/first-customizations/:path*",
+        destination: "/learn/first-customizations/:path*",
         permanent: true,
       },
       {
-        source: "/architectural-modules",
-        destination: "/advanced-development/architecture/architectural-modules",
+        source: "/more-resources/:path*",
+        destination: "/learn/more-resources/:path*",
         permanent: true,
       },
       {
-        source: "/basics/modules-and-services",
-        destination: "/basics/modules",
-        permanent: true,
-      },
-      {
-        source: "/basics/data-models",
-        destination: "/basics/modules",
+        source: "/storefront-development/:path*",
+        destination: "/learn/storefront-development/:path*",
         permanent: true,
       },
       {
diff --git a/www/apps/book/package.json b/www/apps/book/package.json
index 8d866b5447..127a06426a 100644
--- a/www/apps/book/package.json
+++ b/www/apps/book/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@medusajs/icons": "rc",
     "@next/mdx": "^14.2.14",
     "clsx": "^2.1.0",
     "docs-ui": "*",
diff --git a/www/apps/book/public/images/api-key-icon.png b/www/apps/book/public/images/api-key-icon.png
new file mode 100644
index 0000000000..88d8166f9f
Binary files /dev/null and b/www/apps/book/public/images/api-key-icon.png differ
diff --git a/www/apps/book/public/images/auth-icon.png b/www/apps/book/public/images/auth-icon.png
new file mode 100644
index 0000000000..c3afa03d74
Binary files /dev/null and b/www/apps/book/public/images/auth-icon.png differ
diff --git a/www/apps/book/public/images/bg-stripes-dark.png b/www/apps/book/public/images/bg-stripes-dark.png
new file mode 100644
index 0000000000..b186b87dce
Binary files /dev/null and b/www/apps/book/public/images/bg-stripes-dark.png differ
diff --git a/www/apps/book/public/images/bg-stripes.png b/www/apps/book/public/images/bg-stripes.png
new file mode 100644
index 0000000000..ed5e7e9b39
Binary files /dev/null and b/www/apps/book/public/images/bg-stripes.png differ
diff --git a/www/apps/book/public/images/cart-icon.png b/www/apps/book/public/images/cart-icon.png
new file mode 100644
index 0000000000..75a37f623d
Binary files /dev/null and b/www/apps/book/public/images/cart-icon.png differ
diff --git a/www/apps/book/public/images/currency-icon.png b/www/apps/book/public/images/currency-icon.png
new file mode 100644
index 0000000000..fef1c2f7e2
Binary files /dev/null and b/www/apps/book/public/images/currency-icon.png differ
diff --git a/www/apps/book/public/images/customer-icon.png b/www/apps/book/public/images/customer-icon.png
new file mode 100644
index 0000000000..b1deb68afc
Binary files /dev/null and b/www/apps/book/public/images/customer-icon.png differ
diff --git a/www/apps/book/public/images/fulfillment-icon.png b/www/apps/book/public/images/fulfillment-icon.png
new file mode 100644
index 0000000000..efbf148a01
Binary files /dev/null and b/www/apps/book/public/images/fulfillment-icon.png differ
diff --git a/www/apps/book/public/images/get-started-card-dark.png b/www/apps/book/public/images/get-started-card-dark.png
new file mode 100644
index 0000000000..cf78ad0c31
Binary files /dev/null and b/www/apps/book/public/images/get-started-card-dark.png differ
diff --git a/www/apps/book/public/images/get-started-card-md.png b/www/apps/book/public/images/get-started-card-md.png
new file mode 100644
index 0000000000..2b1910e9d3
Binary files /dev/null and b/www/apps/book/public/images/get-started-card-md.png differ
diff --git a/www/apps/book/public/images/get-started-card.png b/www/apps/book/public/images/get-started-card.png
new file mode 100644
index 0000000000..5b05ed9b27
Binary files /dev/null and b/www/apps/book/public/images/get-started-card.png differ
diff --git a/www/apps/book/public/images/inventory-icon.png b/www/apps/book/public/images/inventory-icon.png
new file mode 100644
index 0000000000..7632438bac
Binary files /dev/null and b/www/apps/book/public/images/inventory-icon.png differ
diff --git a/www/apps/book/public/images/order-icon.png b/www/apps/book/public/images/order-icon.png
new file mode 100644
index 0000000000..8869a30ec8
Binary files /dev/null and b/www/apps/book/public/images/order-icon.png differ
diff --git a/www/apps/book/public/images/payment-icon.png b/www/apps/book/public/images/payment-icon.png
new file mode 100644
index 0000000000..124d62965d
Binary files /dev/null and b/www/apps/book/public/images/payment-icon.png differ
diff --git a/www/apps/book/public/images/pricing-icon.png b/www/apps/book/public/images/pricing-icon.png
new file mode 100644
index 0000000000..ae0e8ad462
Binary files /dev/null and b/www/apps/book/public/images/pricing-icon.png differ
diff --git a/www/apps/book/public/images/product-icon.png b/www/apps/book/public/images/product-icon.png
new file mode 100644
index 0000000000..8fdb4f0d0c
Binary files /dev/null and b/www/apps/book/public/images/product-icon.png differ
diff --git a/www/apps/book/public/images/promotion-icon.png b/www/apps/book/public/images/promotion-icon.png
new file mode 100644
index 0000000000..640200620b
Binary files /dev/null and b/www/apps/book/public/images/promotion-icon.png differ
diff --git a/www/apps/book/public/images/region-icon.png b/www/apps/book/public/images/region-icon.png
new file mode 100644
index 0000000000..72fb2b63e6
Binary files /dev/null and b/www/apps/book/public/images/region-icon.png differ
diff --git a/www/apps/book/public/images/sales-channel-icon.png b/www/apps/book/public/images/sales-channel-icon.png
new file mode 100644
index 0000000000..47867c1508
Binary files /dev/null and b/www/apps/book/public/images/sales-channel-icon.png differ
diff --git a/www/apps/book/public/images/stock-location-icon.png b/www/apps/book/public/images/stock-location-icon.png
new file mode 100644
index 0000000000..61674b2f5b
Binary files /dev/null and b/www/apps/book/public/images/stock-location-icon.png differ
diff --git a/www/apps/book/public/images/tax-icon.png b/www/apps/book/public/images/tax-icon.png
new file mode 100644
index 0000000000..2be16099b4
Binary files /dev/null and b/www/apps/book/public/images/tax-icon.png differ
diff --git a/www/apps/book/public/images/user-icon.png b/www/apps/book/public/images/user-icon.png
new file mode 100644
index 0000000000..bff05107f0
Binary files /dev/null and b/www/apps/book/public/images/user-icon.png differ
diff --git a/www/apps/book/sidebar.mjs b/www/apps/book/sidebar.mjs
index 814073317a..eabd10db4e 100644
--- a/www/apps/book/sidebar.mjs
+++ b/www/apps/book/sidebar.mjs
@@ -6,193 +6,193 @@ export const sidebar = numberSidebarItems(
   sidebarAttachHrefCommonOptions([
     {
       type: "link",
-      path: "/",
+      path: "/learn",
       title: "Introduction",
     },
     {
       type: "link",
-      path: "/first-customizations",
+      path: "/learn/first-customizations",
       title: "Your First Customizations",
       chapterTitle: "First Customization",
     },
     {
       type: "link",
-      path: "/basics",
+      path: "/learn/basics",
       title: "The Basics",
       chapterTitle: "Basics",
       children: [
         {
           type: "link",
-          path: "/basics/project-directories-files",
+          path: "/learn/basics/project-directories-files",
           title: "Project Conventions",
         },
         {
           type: "link",
-          path: "/basics/medusa-container",
+          path: "/learn/basics/medusa-container",
           title: "Medusa Container",
         },
         {
           type: "link",
-          path: "/basics/modules",
+          path: "/learn/basics/modules",
           title: "Modules",
         },
         {
           type: "link",
-          path: "/basics/api-routes",
+          path: "/learn/basics/api-routes",
           title: "API Routes",
         },
         {
           type: "link",
-          path: "/basics/commerce-modules",
+          path: "/learn/basics/commerce-modules",
           title: "Commerce Modules",
         },
         {
           type: "link",
-          path: "/basics/modules-directory-structure",
+          path: "/learn/basics/modules-directory-structure",
           title: "Modules Directory Structure",
         },
         {
           type: "link",
-          path: "/basics/loaders",
+          path: "/learn/basics/loaders",
           title: "Loaders",
         },
         {
           type: "link",
-          path: "/basics/events-and-subscribers",
+          path: "/learn/basics/events-and-subscribers",
           title: "Events and Subscribers",
         },
         {
           type: "link",
-          path: "/basics/scheduled-jobs",
+          path: "/learn/basics/scheduled-jobs",
           title: "Scheduled Jobs",
         },
         {
           type: "link",
-          path: "/basics/workflows",
+          path: "/learn/basics/workflows",
           title: "Workflows",
         },
         {
           type: "link",
-          path: "/basics/admin-customizations",
+          path: "/learn/basics/admin-customizations",
           title: "Admin Customizations",
         },
       ],
     },
     {
       type: "link",
-      path: "/customization",
+      path: "/learn/customization",
       title: "Custom Development",
       chapterTitle: "Customization",
       children: [
         {
           type: "link",
           title: "Build Custom Features",
-          path: "/customization/custom-features",
+          path: "/learn/customization/custom-features",
           children: [
             {
               type: "link",
               title: "Brand Module",
-              path: "/customization/custom-features/module",
+              path: "/learn/customization/custom-features/module",
             },
             {
               type: "link",
               title: "Create Brand Workflow",
-              path: "/customization/custom-features/workflow",
+              path: "/learn/customization/custom-features/workflow",
             },
             {
               type: "link",
               title: "Create Brand API Route",
-              path: "/customization/custom-features/api-route",
+              path: "/learn/customization/custom-features/api-route",
             },
           ],
         },
         {
           type: "link",
           title: "Extend Models",
-          path: "/customization/extend-models",
+          path: "/learn/customization/extend-models",
           children: [
             {
               type: "link",
               title: "Define Link",
-              path: "/customization/extend-models/define-link",
+              path: "/learn/customization/extend-models/define-link",
             },
             {
               type: "link",
               title: "Create Links Between Records",
-              path: "/customization/extend-models/create-links",
+              path: "/learn/customization/extend-models/create-links",
             },
             {
               type: "link",
               title: "Extend Route",
-              path: "/customization/extend-models/extend-create-product",
+              path: "/learn/customization/extend-models/extend-create-product",
             },
             {
               type: "link",
               title: "Query Linked Records",
-              path: "/customization/extend-models/query-linked-records",
+              path: "/learn/customization/extend-models/query-linked-records",
             },
           ],
         },
         {
           type: "link",
           title: "Customize Admin",
-          path: "/customization/customize-admin",
+          path: "/learn/customization/customize-admin",
           children: [
             {
               type: "link",
               title: "Add Widgets",
-              path: "/customization/customize-admin/widget",
+              path: "/learn/customization/customize-admin/widget",
             },
             {
               type: "link",
               title: "Add UI Route",
-              path: "/customization/customize-admin/route",
+              path: "/learn/customization/customize-admin/route",
             },
           ],
         },
         {
           type: "link",
           title: "Integrate Systems",
-          path: "/customization/integrate-systems",
+          path: "/learn/customization/integrate-systems",
           children: [
             {
               type: "link",
               title: "Integrate with Service",
-              path: "/customization/integrate-systems/service",
+              path: "/learn/customization/integrate-systems/service",
             },
             {
               type: "link",
               title: "Handle Event",
-              path: "/customization/integrate-systems/handle-event",
+              path: "/learn/customization/integrate-systems/handle-event",
             },
             {
               type: "link",
               title: "Schedule Task",
-              path: "/customization/integrate-systems/schedule-task",
+              path: "/learn/customization/integrate-systems/schedule-task",
             },
           ],
         },
         {
           type: "link",
           title: "Next Steps",
-          path: "/customization/next-steps",
+          path: "/learn/customization/next-steps",
         },
       ],
     },
     {
       type: "link",
-      path: "/advanced-development",
+      path: "/learn/advanced-development",
       title: "Advanced Development",
       chapterTitle: "Advanced",
       children: [
         {
           type: "link",
           title: "Architecture",
-          path: "/advanced-development/architecture/overview",
+          path: "/learn/advanced-development/architecture/overview",
           children: [
             {
               type: "link",
-              path: "/advanced-development/architecture/architectural-modules",
+              path: "/learn/advanced-development/architecture/architectural-modules",
               title: "Architectural Modules",
             },
           ],
@@ -200,177 +200,177 @@ export const sidebar = numberSidebarItems(
         {
           type: "link",
           title: "API Routes",
-          path: "/advanced-development/api-routes",
+          path: "/learn/advanced-development/api-routes",
           children: [
             {
               type: "link",
-              path: "/advanced-development/api-routes/http-methods",
+              path: "/learn/advanced-development/api-routes/http-methods",
               title: "HTTP Methods",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/parameters",
+              path: "/learn/advanced-development/api-routes/parameters",
               title: "Parameters",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/responses",
+              path: "/learn/advanced-development/api-routes/responses",
               title: "Response",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/middlewares",
+              path: "/learn/advanced-development/api-routes/middlewares",
               title: "Middlewares",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/validation",
+              path: "/learn/advanced-development/api-routes/validation",
               title: "Validation",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/protected-routes",
+              path: "/learn/advanced-development/api-routes/protected-routes",
               title: "Protected Routes",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/errors",
+              path: "/learn/advanced-development/api-routes/errors",
               title: "Errors",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/cors",
+              path: "/learn/advanced-development/api-routes/cors",
               title: "Handling CORS",
             },
             {
               type: "link",
-              path: "/advanced-development/api-routes/additional-data",
+              path: "/learn/advanced-development/api-routes/additional-data",
               title: "Additional Data",
             },
           ],
         },
         {
           type: "link",
-          path: "/advanced-development/modules",
+          path: "/learn/advanced-development/modules",
           title: "Modules",
           children: [
             {
               type: "link",
-              path: "/advanced-development/modules/isolation",
+              path: "/learn/advanced-development/modules/isolation",
               title: "Module Isolation",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/container",
+              path: "/learn/advanced-development/modules/container",
               title: "Module's Container",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/options",
+              path: "/learn/advanced-development/modules/options",
               title: "Module Options",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/service-factory",
+              path: "/learn/advanced-development/modules/service-factory",
               title: "Service Factory",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/service-constraints",
+              path: "/learn/advanced-development/modules/service-constraints",
               title: "Service Constraints",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/db-operations",
+              path: "/learn/advanced-development/modules/db-operations",
               title: "Database Operations",
             },
             {
               type: "link",
-              path: "/advanced-development/modules/multiple-services",
+              path: "/learn/advanced-development/modules/multiple-services",
               title: "Multiple Services",
             },
           ],
         },
         {
           type: "link",
-          path: "/advanced-development/module-links",
+          path: "/learn/advanced-development/module-links",
           title: "Module Links",
           children: [
             {
               type: "link",
-              path: "/advanced-development/module-links/directions",
+              path: "/learn/advanced-development/module-links/directions",
               title: "Module Link Direction",
             },
             {
               type: "link",
-              path: "/advanced-development/module-links/remote-link",
+              path: "/learn/advanced-development/module-links/remote-link",
               title: "Remote Link",
             },
             {
               type: "link",
-              path: "/advanced-development/module-links/query",
+              path: "/learn/advanced-development/module-links/query",
               title: "Query",
             },
             {
               type: "link",
-              path: "/advanced-development/module-links/custom-columns",
+              path: "/learn/advanced-development/module-links/custom-columns",
               title: "Custom Columns",
             },
           ],
         },
         {
           type: "link",
-          path: "/advanced-development/data-models",
+          path: "/learn/advanced-development/data-models",
           title: "Data Models",
           children: [
             {
               type: "link",
-              path: "/advanced-development/data-models/infer-type",
+              path: "/learn/advanced-development/data-models/infer-type",
               title: "Infer Type",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/property-types",
+              path: "/learn/advanced-development/data-models/property-types",
               title: "Property Types",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/primary-key",
+              path: "/learn/advanced-development/data-models/primary-key",
               title: "Primary Key",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/default-properties",
+              path: "/learn/advanced-development/data-models/default-properties",
               title: "Default Properties",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/configure-properties",
+              path: "/learn/advanced-development/data-models/configure-properties",
               title: "Configure Properties",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/relationships",
+              path: "/learn/advanced-development/data-models/relationships",
               title: "Relationships",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/manage-relationships",
+              path: "/learn/advanced-development/data-models/manage-relationships",
               title: "Manage Relationships",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/index",
+              path: "/learn/advanced-development/data-models/index",
               title: "Define Index",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/searchable-property",
+              path: "/learn/advanced-development/data-models/searchable-property",
               title: "Searchable Property",
             },
             {
               type: "link",
-              path: "/advanced-development/data-models/write-migration",
+              path: "/learn/advanced-development/data-models/write-migration",
               title: "Write Migration",
             },
           ],
@@ -381,11 +381,11 @@ export const sidebar = numberSidebarItems(
           children: [
             {
               type: "link",
-              path: "/advanced-development/events-and-subscribers/data-payload",
+              path: "/learn/advanced-development/events-and-subscribers/data-payload",
               title: "Events Data Payload",
             },
             {
-              path: "/advanced-development/events-and-subscribers/emit-event",
+              path: "/learn/advanced-development/events-and-subscribers/emit-event",
               title: "Emit an Event",
             },
           ],
@@ -396,81 +396,81 @@ export const sidebar = numberSidebarItems(
           children: [
             {
               type: "link",
-              path: "/advanced-development/scheduled-jobs/execution-number",
+              path: "/learn/advanced-development/scheduled-jobs/execution-number",
               title: "Execution Number",
             },
           ],
         },
         {
           type: "link",
-          path: "/advanced-development/workflows",
+          path: "/learn/advanced-development/workflows",
           title: "Workflows",
           children: [
             {
               type: "link",
-              path: "/advanced-development/workflows/variable-manipulation",
+              path: "/learn/advanced-development/workflows/variable-manipulation",
               title: "Variable Manipulation",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/conditions",
+              path: "/learn/advanced-development/workflows/conditions",
               title: "Using Conditions",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/constructor-constraints",
+              path: "/learn/advanced-development/workflows/constructor-constraints",
               title: "Constructor Constraints",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/compensation-function",
+              path: "/learn/advanced-development/workflows/compensation-function",
               title: "Compensation Function",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/workflow-hooks",
+              path: "/learn/advanced-development/workflows/workflow-hooks",
               title: "Workflow Hooks",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/add-workflow-hook",
+              path: "/learn/advanced-development/workflows/add-workflow-hook",
               title: "Expose a Hook",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/access-workflow-errors",
+              path: "/learn/advanced-development/workflows/access-workflow-errors",
               title: "Access Workflow Errors",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/retry-failed-steps",
+              path: "/learn/advanced-development/workflows/retry-failed-steps",
               title: "Retry Failed Steps",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/parallel-steps",
+              path: "/learn/advanced-development/workflows/parallel-steps",
               title: "Run Steps in Parallel",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/workflow-timeout",
+              path: "/learn/advanced-development/workflows/workflow-timeout",
               title: "Workflow Timeout",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/long-running-workflow",
+              path: "/learn/advanced-development/workflows/long-running-workflow",
               title: "Long-Running Workflow",
             },
             {
               type: "link",
-              path: "/advanced-development/workflows/execute-another-workflow",
+              path: "/learn/advanced-development/workflows/execute-another-workflow",
               title: "Execute Another Workflow",
             },
           ],
         },
         {
           type: "link",
-          path: "/advanced-development/custom-cli-scripts",
+          path: "/learn/advanced-development/custom-cli-scripts",
           title: "Custom CLI Scripts",
           children: [
             {
@@ -482,27 +482,27 @@ export const sidebar = numberSidebarItems(
         },
         {
           type: "link",
-          path: "/advanced-development/admin",
+          path: "/learn/advanced-development/admin",
           title: "Admin Development",
           children: [
             {
               type: "link",
-              path: "/advanced-development/admin/widgets",
+              path: "/learn/advanced-development/admin/widgets",
               title: "Admin Widgets",
             },
             {
               type: "link",
-              path: "/advanced-development/admin/ui-routes",
+              path: "/learn/advanced-development/admin/ui-routes",
               title: "Admin UI Routes",
             },
             {
               type: "link",
-              path: "/advanced-development/admin/constraints",
+              path: "/learn/advanced-development/admin/constraints",
               title: "Constraints",
             },
             {
               type: "link",
-              path: "/advanced-development/admin/tips",
+              path: "/learn/advanced-development/admin/tips",
               title: "Tips",
             },
           ],
@@ -511,87 +511,87 @@ export const sidebar = numberSidebarItems(
     },
     {
       type: "link",
-      path: "/storefront-development",
+      path: "/learn/storefront-development",
       title: "Storefront Development",
       chapterTitle: "Storefront",
       children: [
         {
           type: "link",
-          path: "/storefront-development/nextjs-starter",
+          path: "/learn/storefront-development/nextjs-starter",
           title: "Next.js Starter",
         },
       ],
     },
     {
       type: "link",
-      path: "/debugging-and-testing",
+      path: "/learn/debugging-and-testing",
       title: "Debugging and Testing",
       chapterTitle: "Debugging & Testing",
       children: [
         {
           type: "link",
-          path: "/debugging-and-testing/testing-tools",
+          path: "/learn/debugging-and-testing/testing-tools",
           title: "Testing Tools",
         },
         {
           type: "link",
-          path: "/debugging-and-testing/testing-tools/integration-tests",
+          path: "/learn/debugging-and-testing/testing-tools/integration-tests",
           title: "Integration Tests",
           children: [
             {
               type: "link",
-              path: "/debugging-and-testing/testing-tools/integration-tests/api-routes",
+              path: "/learn/debugging-and-testing/testing-tools/integration-tests/api-routes",
               title: "Example: API Routes Tests",
             },
             {
               type: "link",
-              path: "/debugging-and-testing/testing-tools/integration-tests/workflows",
+              path: "/learn/debugging-and-testing/testing-tools/integration-tests/workflows",
               title: "Example: Workflows Tests",
             },
           ],
         },
         {
           type: "link",
-          path: "/debugging-and-testing/testing-tools/modules-tests",
+          path: "/learn/debugging-and-testing/testing-tools/modules-tests",
           title: "Modules Tests",
           children: [
             {
               type: "link",
-              path: "/debugging-and-testing/testing-tools/modules-tests/module-example",
+              path: "/learn/debugging-and-testing/testing-tools/modules-tests/module-example",
               title: "Example",
             },
           ],
         },
         {
           type: "link",
-          path: "/debugging-and-testing/instrumentation",
+          path: "/learn/debugging-and-testing/instrumentation",
           title: "Instrumentation",
         },
         {
           type: "link",
-          path: "/debugging-and-testing/logging",
+          path: "/learn/debugging-and-testing/logging",
           title: "Logging",
         },
       ],
     },
     {
       type: "link",
-      path: "/deployment",
+      path: "/learn/deployment",
       title: "Deployment",
     },
     {
       type: "link",
-      path: "/more-resources",
+      path: "/learn/more-resources",
       title: "More Resources",
       children: [
         {
           type: "link",
-          path: "/more-resources/cheatsheet",
+          path: "/learn/more-resources/cheatsheet",
           title: "Cheat Sheet",
         },
         {
           type: "link",
-          path: "/more-resources/examples",
+          path: "/learn/more-resources/examples",
           title: "Examples",
         },
       ],
diff --git a/www/apps/book/tailwind.config.js b/www/apps/book/tailwind.config.js
index d582b22247..488af7843f 100644
--- a/www/apps/book/tailwind.config.js
+++ b/www/apps/book/tailwind.config.js
@@ -32,6 +32,8 @@ module.exports = {
       "search-no-result-dark": "url('/images/search-no-result.svg')",
       "magnifying-glass": "url('/images/magnifying-glass.svg')",
       "magnifying-glass-dark": "url('/images/magnifying-glass-dark.svg')",
+      "bg-stripes": "url('/v2/images/bg-stripes.png')",
+      "bg-stripes-dark": "url('/v2/images/bg-stripes-dark.png')",
     },
   },
 }
diff --git a/www/apps/book/utils/number-sidebar-items.mjs b/www/apps/book/utils/number-sidebar-items.mjs
index 318fd4c740..e341e09387 100644
--- a/www/apps/book/utils/number-sidebar-items.mjs
+++ b/www/apps/book/utils/number-sidebar-items.mjs
@@ -5,7 +5,6 @@
  * @returns {import("@/types").SidebarItem[]} The modified sidebar items
  */
 export default function numberSidebarItems(sidebarItems, numbering = [1]) {
-  // TODO generate chapter titles
   if (!numbering.length) {
     numbering.push(1)
   }
@@ -24,7 +23,7 @@ export default function numberSidebarItems(sidebarItems, numbering = [1]) {
     item.chapterTitle = `${item.number} ${
       item.chapterTitle?.trim() || item.title?.trim()
     }`
-    item.title = `${item.number} ${item.title.trim()}`
+    item.title = item.title.trim()
 
     if (isTopItems) {
       // Add chapter category
diff --git a/www/apps/resources/app/admin-components/components/forms/page.mdx b/www/apps/resources/app/admin-components/components/forms/page.mdx
index fc3b34fbd1..469dcae57d 100644
--- a/www/apps/resources/app/admin-components/components/forms/page.mdx
+++ b/www/apps/resources/app/admin-components/components/forms/page.mdx
@@ -175,7 +175,7 @@ You create the `CreateForm` component. For now, it uses `useForm` from `react-ho
 
 You also define a `handleSubmit` function to perform an action when the form is submitted.
 
-You can replace the content of the function with sending a request to Medusa's routes. Refer to [this guide](!docs!/advanced-development/admin/tips#send-requests-to-api-routes) for more details on how to do that.
+You can replace the content of the function with sending a request to Medusa's routes. Refer to [this guide](!docs!/learn/advanced-development/admin/tips#send-requests-to-api-routes) for more details on how to do that.
 
 ### Render Components
 
@@ -454,7 +454,7 @@ You create the `EditForm` component. For now, it uses `useForm` from `react-hook
 
 You also define a `handleSubmit` function to perform an action when the form is submitted.
 
-You can replace the content of the function with sending a request to Medusa's routes. Refer to [this guide](!docs!/advanced-development/admin/tips#send-requests-to-api-routes) for more details on how to do that.
+You can replace the content of the function with sending a request to Medusa's routes. Refer to [this guide](!docs!/learn/advanced-development/admin/tips#send-requests-to-api-routes) for more details on how to do that.
 
 ### Render Components
 
diff --git a/www/apps/resources/app/commerce-modules/auth/create-actor-type/page.mdx b/www/apps/resources/app/commerce-modules/auth/create-actor-type/page.mdx
index a190e10bb8..b37100870f 100644
--- a/www/apps/resources/app/commerce-modules/auth/create-actor-type/page.mdx
+++ b/www/apps/resources/app/commerce-modules/auth/create-actor-type/page.mdx
@@ -12,7 +12,7 @@ Before creating an actor type, you must have a module with a data model represen
 
 <Note title="Tip">
 
-Learn how to create a module in [this guide](!docs!/basics/modules).
+Learn how to create a module in [this guide](!docs!/learn/basics/modules).
 
 </Note>
 
diff --git a/www/apps/resources/app/commerce-modules/cart/extend/page.mdx b/www/apps/resources/app/commerce-modules/cart/extend/page.mdx
index e80fad2108..7d671ff0dd 100644
--- a/www/apps/resources/app/commerce-modules/cart/extend/page.mdx
+++ b/www/apps/resources/app/commerce-modules/cart/extend/page.mdx
@@ -22,7 +22,7 @@ Consider you have a Hello Module defined in the `/src/modules/hello` directory.
 
 <Note title="Tip">
 
-If you don't have a module, follow [this guide](!docs!/basics/modules) to create one.
+If you don't have a module, follow [this guide](!docs!/learn/basics/modules) to create one.
 
 </Note>
 
@@ -43,7 +43,7 @@ This creates a `Custom` data model that has the `id` and `custom_name` propertie
 
 <Note title="Tip">
 
-Learn more about data models in [this guide](!docs!/data-models).
+Learn more about data models in [this guide](!docs!/learn/data-models).
 
 </Note>
 
@@ -55,7 +55,7 @@ Next, you'll define a module link between the `Custom` and `Cart` data model. A
 
 <Note title="Tip">
 
-Learn more about module links in [this guide](!docs!/module-links).
+Learn more about module links in [this guide](!docs!/learn/module-links).
 
 </Note>
 
@@ -82,7 +82,7 @@ This defines a link between the `Cart` and `Custom` data models. Using this link
   items={[
     {
       text: "Module must be registered in medusa-config.ts",
-      link: "!docs!/basics/modules#4-add-module-to-configurations"
+      link: "!docs!/learn/basics/modules#4-add-module-to-configurations"
     }
   ]}
 />
@@ -115,7 +115,7 @@ To do that, you'll consume the [cartCreated](/references/medusa-workflows/create
 
 <Note title="Tip">
 
-Learn more about workflow hooks in [this guide](!docs!/advanced-development/workflows/workflow-hooks).
+Learn more about workflow hooks in [this guide](!docs!/learn/advanced-development/workflows/workflow-hooks).
 
 </Note>
 
@@ -150,7 +150,7 @@ In the snippet above, you add a validation rule indicating that `custom_name` is
 
 <Note title="Tip">
 
-Learn more about additional data validation in [this guide](!docs!/advanced-development/api-routes/additional-data).
+Learn more about additional data validation in [this guide](!docs!/learn/advanced-development/api-routes/additional-data).
 
 </Note>
 
@@ -202,7 +202,7 @@ In the compensation function that undoes the step's actions in case of an error,
 
 <Note title="Tip">
 
-Learn more about compensation functions in [this guide](!docs!/advanced-development/workflows/compensation-function).
+Learn more about compensation functions in [this guide](!docs!/learn/advanced-development/workflows/compensation-function).
 
 </Note>
 
@@ -260,9 +260,9 @@ The workflow accepts as an input the created cart and the `additional_data` para
 
 In the workflow, you:
 
-1. Use the `transform` utility to get the value of `custom_name` based on whether it's set in `additional_data`. Learn more about why you can't use conditional operators in a workflow without using `transform` in [this guide](!docs!/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
+1. Use the `transform` utility to get the value of `custom_name` based on whether it's set in `additional_data`. Learn more about why you can't use conditional operators in a workflow without using `transform` in [this guide](!docs!/learn/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
 2. Create the `Custom` record using the `createCustomStep`.
-3. Use the `when-then` utility to link the cart to the `Custom` record if it was created. Learn more about why you can't use if-then conditions in a workflow without using `when-then` in [this guide](!docs!/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
+3. Use the `when-then` utility to link the cart to the `Custom` record if it was created. Learn more about why you can't use if-then conditions in a workflow without using `when-then` in [this guide](!docs!/learn/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
 
 You'll next call the workflow in the hook handler.
 
@@ -355,7 +355,7 @@ Among the returned `cart` object, you'll find a `custom` property which holds th
 
 ### Retrieve using Query
 
-You can also retrieve the `Custom` record linked to a cart in your code using [Query](!docs!/advanced-development/module-links/query).
+You can also retrieve the `Custom` record linked to a cart in your code using [Query](!docs!/learn/advanced-development/module-links/query).
 
 For example:
 
@@ -369,7 +369,7 @@ const { data: [cart] } = await query.graph({
 })
 ```
 
-Learn more about how to use Query in [this guide](!docs!/advanced-development/module-links/query).
+Learn more about how to use Query in [this guide](!docs!/learn/advanced-development/module-links/query).
 
 ---
 
diff --git a/www/apps/resources/app/commerce-modules/customer/extend/page.mdx b/www/apps/resources/app/commerce-modules/customer/extend/page.mdx
index 6bbf7a358b..b3914e75dd 100644
--- a/www/apps/resources/app/commerce-modules/customer/extend/page.mdx
+++ b/www/apps/resources/app/commerce-modules/customer/extend/page.mdx
@@ -28,7 +28,7 @@ Consider you have a Hello Module defined in the `/src/modules/hello` directory.
 
 <Note title="Tip">
 
-If you don't have a module, follow [this guide](!docs!/basics/modules) to create one.
+If you don't have a module, follow [this guide](!docs!/learn/basics/modules) to create one.
 
 </Note>
 
@@ -49,7 +49,7 @@ This creates a `Custom` data model that has the `id` and `custom_name` propertie
 
 <Note title="Tip">
 
-Learn more about data models in [this guide](!docs!/data-models).
+Learn more about data models in [this guide](!docs!/learn/data-models).
 
 </Note>
 
@@ -61,7 +61,7 @@ Next, you'll define a module link between the `Custom` and `Customer` data model
 
 <Note title="Tip">
 
-Learn more about module links in [this guide](!docs!/module-links).
+Learn more about module links in [this guide](!docs!/learn/module-links).
 
 </Note>
 
@@ -88,7 +88,7 @@ This defines a link between the `Customer` and `Custom` data models. Using this
   items={[
     {
       text: "Module must be registered in medusa-config.ts",
-      link: "!docs!/basics/modules#4-add-module-to-configurations"
+      link: "!docs!/learn/basics/modules#4-add-module-to-configurations"
     }
   ]}
 />
@@ -121,7 +121,7 @@ To do that, you'll consume the [customersCreated](/resources/references/medusa-w
 
 <Note title="Tip">
 
-Learn more about workflow hooks in [this guide](!docs!/advanced-development/workflows/workflow-hooks).
+Learn more about workflow hooks in [this guide](!docs!/learn/advanced-development/workflows/workflow-hooks).
 
 </Note>
 
@@ -156,7 +156,7 @@ In the snippet above, you add a validation rule indicating that `custom_name` is
 
 <Note title="Tip">
 
-Learn more about additional data validation in [this guide](!docs!/advanced-development/api-routes/additional-data).
+Learn more about additional data validation in [this guide](!docs!/learn/advanced-development/api-routes/additional-data).
 
 </Note>
 
@@ -208,7 +208,7 @@ In the compensation function that undoes the step's actions in case of an error,
 
 <Note title="Tip">
 
-Learn more about compensation functions in [this guide](!docs!/advanced-development/workflows/compensation-function).
+Learn more about compensation functions in [this guide](!docs!/learn/advanced-development/workflows/compensation-function).
 
 </Note>
 
@@ -266,9 +266,9 @@ The workflow accepts as an input the created customer and the `additional_data`
 
 In the workflow, you:
 
-1. Use the `transform` utility to get the value of `custom_name` based on whether it's set in `additional_data`. Learn more about why you can't use conditional operators in a workflow without using `transform` in [this guide](!docs!/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
+1. Use the `transform` utility to get the value of `custom_name` based on whether it's set in `additional_data`. Learn more about why you can't use conditional operators in a workflow without using `transform` in [this guide](!docs!/learn/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
 2. Create the `Custom` record using the `createCustomStep`.
-3. Use the `when-then` utility to link the customer to the `Custom` record if it was created. Learn more about why you can't use if-then conditions in a workflow without using `when-then` in [this guide](!docs!/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
+3. Use the `when-then` utility to link the customer to the `Custom` record if it was created. Learn more about why you can't use if-then conditions in a workflow without using `when-then` in [this guide](!docs!/learn/advanced-development/workflows/conditions#why-if-conditions-arent-allowed-in-workflows).
 
 You'll next execute the workflow in the hook handler.
 
@@ -367,7 +367,7 @@ Among the returned `customer` object, you'll find a `custom` property which hold
 
 ### Retrieve using Query
 
-You can also retrieve the `Custom` record linked to a customer in your code using [Query](!docs!/advanced-development/module-links/query).
+You can also retrieve the `Custom` record linked to a customer in your code using [Query](!docs!/learn/advanced-development/module-links/query).
 
 For example:
 
@@ -381,7 +381,7 @@ const { data: [customer] } = await query.graph({
 })
 ```
 
-Learn more about how to use Query in [this guide](!docs!/advanced-development/module-links/query).
+Learn more about how to use Query in [this guide](!docs!/learn/advanced-development/module-links/query).
 
 ---
 
diff --git a/www/apps/resources/app/commerce-modules/product/guides/price/page.mdx b/www/apps/resources/app/commerce-modules/product/guides/price/page.mdx
index e69b068af8..78e2a80bf7 100644
--- a/www/apps/resources/app/commerce-modules/product/guides/price/page.mdx
+++ b/www/apps/resources/app/commerce-modules/product/guides/price/page.mdx
@@ -8,7 +8,7 @@ export const metadata = {
 
 # {metadata.title}
 
-In this document, you'll learn how to retrieve product variant prices in the Medusa application using [Query](!docs!/advanced-development/module-links/query).
+In this document, you'll learn how to retrieve product variant prices in the Medusa application using [Query](!docs!/learn/advanced-development/module-links/query).
 
 <Note title="Why use Query?">
 
diff --git a/www/apps/resources/app/globals.css b/www/apps/resources/app/globals.css
index abdd9847fb..97686aaf3e 100644
--- a/www/apps/resources/app/globals.css
+++ b/www/apps/resources/app/globals.css
@@ -5,11 +5,17 @@
 @layer base {
 
   html {
-    -webkit-font-smoothing: antialiased;
+    --webkit-font-smoothing: antialiased;
+    overscroll-behavior-y: none;
   }
 
   body {
     @apply overflow-x-hidden;
+    overscroll-behavior-y: none;
+  }
+
+  #main {
+    overscroll-behavior-y: contain;
   }
 
   *::selection {
@@ -22,6 +28,7 @@
 
   aside * {
     scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+    overscroll-behavior-y: contain;
   }
 
   body[data-modal="opened"] {
diff --git a/www/apps/resources/app/layout.tsx b/www/apps/resources/app/layout.tsx
index 7ee078e186..0ccd725d31 100644
--- a/www/apps/resources/app/layout.tsx
+++ b/www/apps/resources/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import { Inter, Roboto_Mono } from "next/font/google"
 import Providers from "@/providers"
 import "./globals.css"
-import { TightLayout } from "docs-ui"
+import { BareboneLayout, TightLayout } from "docs-ui"
 import { config } from "@/config"
 import clsx from "clsx"
 import { Feedback } from "@/components/Feedback"
@@ -37,16 +37,17 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
-    >
-      {children}
-    </TightLayout>
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
+      <TightLayout
+        sidebarProps={{
+          expandItems: true,
+        }}
+        feedbackComponent={<Feedback className="my-2" />}
+        editComponent={<EditButton />}
+        ProvidersComponent={Providers}
+      >
+        {children}
+      </TightLayout>
+    </BareboneLayout>
   )
 }
diff --git a/www/apps/resources/app/medusa-cli/commands/exec/page.mdx b/www/apps/resources/app/medusa-cli/commands/exec/page.mdx
index e640962ef4..ec86d4bac9 100644
--- a/www/apps/resources/app/medusa-cli/commands/exec/page.mdx
+++ b/www/apps/resources/app/medusa-cli/commands/exec/page.mdx
@@ -11,7 +11,7 @@ export const metadata = {
 
 # {metadata.title}
 
-Run a custom CLI script. Learn more about it in [this guide](!docs!/advanced-development/custom-cli-scripts).
+Run a custom CLI script. Learn more about it in [this guide](!docs!/learn/advanced-development/custom-cli-scripts).
 
 ```bash
 npx medusa exec [file] [args...]
diff --git a/www/apps/resources/app/recipes/b2b/page.mdx b/www/apps/resources/app/recipes/b2b/page.mdx
index 43bc70cde5..9ac8e49266 100644
--- a/www/apps/resources/app/recipes/b2b/page.mdx
+++ b/www/apps/resources/app/recipes/b2b/page.mdx
@@ -173,13 +173,13 @@ You can create a B2B module that adds necessary data models to represent a B2B c
 
 <CardList items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create Module",
     text: "Learn how to create a module in Medusa.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "Create Data Models",
     text: "Learn how to create data models.",
     icon: AcademicCapSolid,
@@ -187,7 +187,7 @@ You can create a B2B module that adds necessary data models to represent a B2B c
 ]} />
 
 {/* <Card
-  href="!docs!/advanced-development/modules/module-relationships"
+  href="!docs!/learn/advanced-development/modules/module-relationships"
   title="Create Module Relationships"
   text="Learn how to create a relationship between modules."
   icon={AcademicCapSolid}
@@ -573,7 +573,7 @@ To implement a more advanced B2B sales flow, add custom data models such as `Com
 This provides more granular control of your B2B sales and allows you to build features like privileges, limits, and more. 
 
 <Card
-  href="!docs!/basics/modules#1-create-data-model"
+  href="!docs!/learn/basics/modules#1-create-data-model"
   title="Create a Data Model"
   text="Learn how to create a custom data model in a module."
   icon={AcademicCapSolid}
@@ -588,7 +588,7 @@ On the frontend clients communicating with your store, such as the storefront, y
 The API route can check if the customer has any group with an associated company.
 
 <Card
-  href="!docs!/basics/api-routes"
+  href="!docs!/learn/basics/api-routes"
   title="Create an API Route"
   text="Learn how to create an API Route in Medusa."
   icon={AcademicCapSolid}
@@ -724,19 +724,19 @@ The Medusa Admin plugin can be extended to add widgets, new pages, and setting p
 
 <CardList items={[
   {
-    href: "!docs!/advanced-development/admin/widgets",
+    href: "!docs!/learn/advanced-development/admin/widgets",
     title: "Create Admin Widget",
     text: "Learn how to add widgets into existing admin pages.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/admin/ui-routes",
+    href: "!docs!/learn/advanced-development/admin/ui-routes",
     title: "Create Admin UI Routes",
     text: "Learn how to add new pages to your Medusa Admin.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/admin/setting-pages",
+    href: "!docs!/learn/advanced-development/admin/setting-pages",
     title: "Create Admin Setting Page",
     text: "Learn how to add new page to the Medusa Admin settings.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/commerce-automation/page.mdx b/www/apps/resources/app/recipes/commerce-automation/page.mdx
index 6199b84e87..4aa32a6831 100644
--- a/www/apps/resources/app/recipes/commerce-automation/page.mdx
+++ b/www/apps/resources/app/recipes/commerce-automation/page.mdx
@@ -36,13 +36,13 @@ The `inventory-item.updated` event is currently not emitted.
 
 <CardList items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module in Medusa.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "Create a Data Model",
     text: "Learn how to create a data model.",
     icon: AcademicCapSolid,
@@ -51,13 +51,13 @@ The `inventory-item.updated` event is currently not emitted.
 
 <CardList items={[
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create an API Route",
     text: "Learn how to create an API route in Medusa.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber in Medusa.",
     icon: AcademicCapSolid,
@@ -409,7 +409,7 @@ Medusa also provides Notification Module Providers that integrate with third-par
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create Subscriber",
     text: "Learn how to create a subscriber to handle events.",
     icon: AcademicCapSolid,
@@ -428,7 +428,7 @@ To implement that:
 - Create a scheduled job that executes the workflow automatically at the specified time pattern.
 
 <Card
-  href="!docs!/basics/scheduled-jobs"
+  href="!docs!/learn/basics/scheduled-jobs"
   title="Create a Scheduled Job"
   text="Learn how to create a scheduled job in Medusa."
   icon={AcademicCapSolid}
@@ -654,7 +654,7 @@ The `order.placed` event is currently not emitted.
 </Note>
 
 <Card
-  href="!docs!/basics/events-and-subscribers"
+  href="!docs!/learn/basics/events-and-subscribers"
   title="Create a Subscriber"
   text="Learn how to create a subscriber in Medusa."
   icon={AcademicCapSolid}
@@ -662,7 +662,7 @@ The `order.placed` event is currently not emitted.
 
 {/* <CardList items={[
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber in Medusa.",
     icon: AcademicCapSolid,
@@ -695,7 +695,7 @@ Medusa's commerce features are geared towards automating RMA flows and ensuring
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber in Medusa.",
     icon: AcademicCapSolid,
@@ -738,7 +738,7 @@ The `order.placed` event is currently not emitted.
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber in Medusa.",
     icon: AcademicCapSolid,
@@ -840,13 +840,13 @@ You can also create a scheduled job that checks whether the number of new produc
 
 <CardList items={[
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber in Medusa.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/scheduled-jobs",
+    href: "!docs!/learn/basics/scheduled-jobs",
     title: "Scheduled Jobs",
     text: "Learn how to create a scheduled job in Medusa.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx b/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx
index ca34386c22..38bd2f69d0 100644
--- a/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx
+++ b/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx
@@ -170,7 +170,7 @@ class DigitalProductModuleService extends MedusaService({
 export default DigitalProductModuleService
 ```
 
-The service extends the [service factory](!docs!/advanced-development/modules/service-factory), which provides basic data-management features.
+The service extends the [service factory](!docs!/learn/advanced-development/modules/service-factory), which provides basic data-management features.
 
 ### Create Module Definition
 
@@ -204,8 +204,8 @@ module.exports = defineConfig({
 
 ### Further Reads
 
-- [How to Create a Module](!docs!/basics/modules)
-- [How to Create a Data Model](!docs!/basics/modules#1-create-data-model)
+- [How to Create a Module](!docs!/learn/basics/modules)
+- [How to Create a Data Model](!docs!/learn/basics/modules#1-create-data-model)
 
 ---
 
@@ -255,7 +255,7 @@ This defines a link between `DigitalProductOrder` and the Order Module’s `Orde
 
 ### Further Read
 
-- [How to Define Module Links](!docs!/advanced-development/module-links)
+- [How to Define Module Links](!docs!/learn/advanced-development/module-links)
 
 ---
 
@@ -361,8 +361,8 @@ Make sure to replace `{token}` with the JWT token you retrieved.
 
 ### Further Reads
 
-- [How to Create an API Route](!docs!/basics/api-routes)
-- [Learn more about Query](!docs!/advanced-development/module-links/query)
+- [How to Create an API Route](!docs!/learn/basics/api-routes)
+- [Learn more about Query](!docs!/learn/advanced-development/module-links/query)
 
 ---
 
@@ -609,9 +609,9 @@ You’ll test out the workflow in the next section.
 
 ### Further Reads
 
-- [How to Create a Workflow](!docs!/basics/workflows)
-- [What is the Compensation Function](!docs!/advanced-development/workflows/compensation-function)
-- [Learn more about the remote link function](!docs!/advanced-development/module-links/remote-link)
+- [How to Create a Workflow](!docs!/learn/basics/workflows)
+- [What is the Compensation Function](!docs!/learn/advanced-development/workflows/compensation-function)
+- [Learn more about the remote link function](!docs!/learn/advanced-development/module-links/remote-link)
 
 ---
 
@@ -710,7 +710,7 @@ This adds a validation middleware to ensure that the body of `POST` requests sen
 
 ### Further Read
 
-- [How to Create a Middleware](!docs!/advanced-development/api-routes/middlewares)
+- [How to Create a Middleware](!docs!/learn/advanced-development/api-routes/middlewares)
 
 ---
 
@@ -1043,8 +1043,8 @@ Once you log in, you’ll find a new sidebar item, “Digital Products.” If yo
 
 ### Further Reads
 
-- [How to Create UI Routes](!docs!/advanced-development/admin/ui-routes)
-- [How to Create Admin Widgets](!docs!/advanced-development/admin/widgets)
+- [How to Create UI Routes](!docs!/learn/advanced-development/admin/ui-routes)
+- [How to Create Admin Widgets](!docs!/learn/advanced-development/admin/widgets)
 
 ---
 
@@ -1813,7 +1813,7 @@ In a later step, you’ll add an API route to allow customers to view and downlo
 
 ### Further Read
 
-- [Conditions in Workflows with When-Then](!docs!/advanced-development/workflows/conditions)
+- [Conditions in Workflows with When-Then](!docs!/learn/advanced-development/workflows/conditions)
 
 ---
 
@@ -2295,7 +2295,7 @@ You’ll test out these API routes in the next step.
 
 ### Further Reads
 
-- [What are protected API routes](!docs!/advanced-development/api-routes/protected-routes)
+- [What are protected API routes](!docs!/learn/advanced-development/api-routes/protected-routes)
 
 ---
 
@@ -2722,4 +2722,4 @@ Aside from customizing the Next.js Starter storefront, you can also create a cus
 
 ### Admin Development
 
-In this recipe, you learned how to customize the admin with UI routes. You can also do further customization using widgets. Learn more in [this documentation](!docs!/advanced-development/admin).
+In this recipe, you learned how to customize the admin with UI routes. You can also do further customization using widgets. Learn more in [this documentation](!docs!/learn/advanced-development/admin).
diff --git a/www/apps/resources/app/recipes/digital-products/page.mdx b/www/apps/resources/app/recipes/digital-products/page.mdx
index 6bc9513d0b..645eac0d09 100644
--- a/www/apps/resources/app/recipes/digital-products/page.mdx
+++ b/www/apps/resources/app/recipes/digital-products/page.mdx
@@ -49,7 +49,7 @@ Your custom features and functionalities are implemented inside modules. The mod
 The module will hold your custom data models and the service implementing digital-product-related features.
 
 <Card
-  href="!docs!/basics/modules"
+  href="!docs!/learn/basics/modules"
   title="How to Create a Module"
   text="Learn how to create a module."
   icon={AcademicCapSolid}
@@ -63,13 +63,13 @@ Then, you can link your custom data model to data models from other modules. For
 
 <CardList itemsPerRow={2} items={[
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "How to Create a Data Model",
     text: "Learn how to create a data model.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/module-links",
+    href: "!docs!/learn/advanced-development/module-links",
     title: "Module Links",
     text: "Learn how to link data models of different modules.",
     icon: AcademicCapSolid,
@@ -83,7 +83,7 @@ Your module’s main service holds data-management and other related features. T
 Medusa facilitates implementing data-management features using the service factory. Your module's main service can extend this service factory, and it generates data-management methods for your data models.
 
 <Card
-  href="!docs!/advanced-development/modules/service-factory"
+  href="!docs!/learn/advanced-development/modules/service-factory"
   title="Service Factory"
   text="Learn about the service factory and how to use it."
   icon={AcademicCapSolid}
@@ -98,7 +98,7 @@ API routes expose your features to external applications, such as the admin dash
 You can create custom API routes that allow merchants to list and create digital products. In these API routes, you resolve the Digital Product Module’s main service to use its data-management features.
 
 <Card
-  href="!docs!/basics/api-routes"
+  href="!docs!/learn/basics/api-routes"
   title="API Routes"
   text="Learn how to create an API route."
   icon={AcademicCapSolid}
@@ -113,7 +113,7 @@ Your use case most likely has flows, such as creating digital products, that req
 Create workflows to implement these flows, then utilize these workflows in other resources, such as an API route.
 
 <Card
-  href="!docs!/basics/workflows"
+  href="!docs!/learn/basics/workflows"
   title="Workflows"
   text="Learn how to create a workflow."
   icon={AcademicCapSolid}
@@ -129,13 +129,13 @@ Use the remote link to create a link between two records, and use Query to fetch
 
 <CardList itemsPerRow={2} items={[
   {
-    href: "!docs!/advanced-development/module-links/remote-link",
+    href: "!docs!/learn/advanced-development/module-links/remote-link",
     title: "How to Use the Remote Link",
     text: "Learn how to link data models of different modules.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/module-links/query",
+    href: "!docs!/learn/advanced-development/module-links/query",
     title: "How to Use Query",
     text: "Learn how to fetch data across modules with Medusa's Query.",
     icon: AcademicCapSolid,
@@ -152,13 +152,13 @@ In your customizations, you send requests to the API routes you created to creat
 
 <CardList items={[
   {
-    href: "!docs!/advanced-development/admin/widgets",
+    href: "!docs!/learn/advanced-development/admin/widgets",
     title: "Create a Widget",
     text: "Learn how to create a widget in the Medusa Admin.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/admin/ui-routes",
+    href: "!docs!/learn/advanced-development/admin/ui-routes",
     title: "Create UI Route",
     text: "Learn how to create a UI route in the Medusa Admin.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx b/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx
index 948a315b6c..479f692d6c 100644
--- a/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx
+++ b/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx
@@ -28,7 +28,7 @@ To integrate an external system, such as an ERP, into your Medusa application, c
 Then, resolve the module's main service in other resources, such as API routes or workflows, to perform actions in the external system.
 
 <Card
-  href="!docs!/basics/modules"
+  href="!docs!/learn/basics/modules"
   title="Create a Module"
   text="Learn how to create a module in Medusa."
   icon={AcademicCapSolid}
@@ -101,7 +101,7 @@ export const serviceHighlights = [
 
   <Note title="Tip">
 
-  You can store the product's ID in the external system using the `metadata` property of the `Product` data model in the Product Module. Alternatively, you can create a [data model](!docs!/basics/modules#1-create-data-model) in your module to store data related to the external system.
+  You can store the product's ID in the external system using the `metadata` property of the `Product` data model in the Product Module. Alternatively, you can create a [data model](!docs!/learn/basics/modules#1-create-data-model) in your module to store data related to the external system.
 
   </Note>
 
@@ -150,7 +150,7 @@ Workflows can be executed from anywhere. So, taking the workflow described above
 Workflows guarantee data consistency through their compensation feature. You can provide a compensation function to steps that roll back the actions of that step. Then, if an error occurs in any step, the actions of previous steps are rolled back using their compensation function.
 
 <Card
-  href="!docs!/basics/workflows"
+  href="!docs!/learn/basics/workflows"
   title="Workflows"
   text="Learn more about Workflows and how to create them."
   icon={AcademicCapSolid}
@@ -295,7 +295,7 @@ You can provide webhook listeners that your external systems call when their dat
 For example, suppose an administrator changes the product data in the ERP system. The system then sends a request to the webhook you define in your Medusa application, which updates the product data in the application.
 
 <Card
-  href="!docs!/basics/api-routes"
+  href="!docs!/learn/basics/api-routes"
   title="Create an API Route"
   text="Learn how to create an API Route in Medusa."
   icon={AcademicCapSolid}
diff --git a/www/apps/resources/app/recipes/marketplace/examples/restaurant-delivery/page.mdx b/www/apps/resources/app/recipes/marketplace/examples/restaurant-delivery/page.mdx
index 826206a882..b6e8ba7737 100644
--- a/www/apps/resources/app/recipes/marketplace/examples/restaurant-delivery/page.mdx
+++ b/www/apps/resources/app/recipes/marketplace/examples/restaurant-delivery/page.mdx
@@ -136,7 +136,7 @@ class RestaurantModuleService extends MedusaService({
 export default RestaurantModuleService
 ```
 
-The service extends the [service factory](!docs!/advanced-development/modules/service-factory), which provides basic data-management features.
+The service extends the [service factory](!docs!/learn/advanced-development/modules/service-factory), which provides basic data-management features.
 
 ### Create Restaurant Module Definition
 
@@ -170,8 +170,8 @@ module.exports = defineConfig({
 
 ### Further Reads
 
-- [How to Create a Module](!docs!/basics/modules)
-- [How to Create a Data Model](!docs!/basics/modules#1-create-data-model)
+- [How to Create a Module](!docs!/learn/basics/modules)
+- [How to Create a Data Model](!docs!/learn/basics/modules#1-create-data-model)
 
 ---
 
@@ -280,7 +280,7 @@ class DeliveryModuleService extends MedusaService({
 export default DeliveryModuleService
 ```
 
-The service extends the [service factory](!docs!/advanced-development/modules/service-factory), which provides basic data-management features.
+The service extends the [service factory](!docs!/learn/advanced-development/modules/service-factory), which provides basic data-management features.
 
 ### Create Delivery Module Definition
 
@@ -400,7 +400,7 @@ This defines a link between the Delivery Module’s `delivery` data model and th
 
 ### Further Reads
 
-- [How to Define Links](!docs!/advanced-development/module-links)
+- [How to Define Links](!docs!/learn/advanced-development/module-links)
 
 ---
 
@@ -608,15 +608,15 @@ The API route creates a restaurant and returns it.
 
 <Note>
 
-If you’re calling this API route from a frontend client, make sure to set the [CORS middleware](!docs!/advanced-development/api-routes/cors) on it since it’s not under the `/store` or `/admin` route prefixes.
+If you’re calling this API route from a frontend client, make sure to set the [CORS middleware](!docs!/learn/advanced-development/api-routes/cors) on it since it’s not under the `/store` or `/admin` route prefixes.
 
 </Note>
 
 ### Further Reads
 
-- [How to Create a Workflow](!docs!/basics/workflows)
-- [What is a Compensation Function](!docs!/advanced-development/workflows/compensation-function)
-- [How to Create an API route](!docs!/basics/api-routes)
+- [How to Create a Workflow](!docs!/learn/basics/workflows)
+- [What is a Compensation Function](!docs!/learn/advanced-development/workflows/compensation-function)
+- [How to Create an API route](!docs!/learn/basics/api-routes)
 
 ---
 
@@ -687,7 +687,7 @@ This returns the list of restaurants in the response.
 
 ### Further Reads
 
-- [What is and how to use it](!docs!/advanced-development/module-links/query)
+- [What is and how to use it](!docs!/learn/advanced-development/module-links/query)
 - [How to Retrieve Prices for Product Variants](../../../../commerce-modules/product/guides/price/page.mdx)
 
 ---
@@ -1542,7 +1542,7 @@ In this step, you’ll create the workflow that handles the different stages of
 
 For example, when a restaurant finishes preparing the order’s items, this workflow creates a fulfillment for the order.
 
-This workflow will be a [long-running workflow](!docs!/advanced-development/workflows/long-running-workflow) that runs asynchronously in the background. Its async steps only succeed once an outside action sets its status, allowing the workflow to move to the next step.
+This workflow will be a [long-running workflow](!docs!/learn/advanced-development/workflows/long-running-workflow) that runs asynchronously in the background. Its async steps only succeed once an outside action sets its status, allowing the workflow to move to the next step.
 
 API routes that perform actions related to the delivery, which you’ll create later, will trigger the workflow to move to the next step.
 
@@ -2063,7 +2063,7 @@ In the next steps, you’ll execute the workflow and see it in action as you add
 
 ### Further Reads
 
-- [Long-Running Workflows](!docs!/advanced-development/workflows/long-running-workflow)
+- [Long-Running Workflows](!docs!/learn/advanced-development/workflows/long-running-workflow)
 
 ---
 
@@ -3459,7 +3459,7 @@ The next steps of this example depend on your use case. This section provides so
 
 ### Admin Development
 
-The Medusa Admin is extendable, allowing you to add widgets to existing pages or create new pages. Learn more about it in [this documentation](!docs!/advanced-development/admin).
+The Medusa Admin is extendable, allowing you to add widgets to existing pages or create new pages. Learn more about it in [this documentation](!docs!/learn/advanced-development/admin).
 
 ### Storefront Development
 
diff --git a/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx b/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx
index 83ed961f99..e7d6acd853 100644
--- a/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx
+++ b/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx
@@ -116,7 +116,7 @@ class MarketplaceModuleService extends MedusaService({
 export default MarketplaceModuleService
 ```
 
-The service extends the [service factory](!docs!/advanced-development/modules/service-factory), which provides basic data-management features.
+The service extends the [service factory](!docs!/learn/advanced-development/modules/service-factory), which provides basic data-management features.
 
 ### Create Module Definition
 
@@ -150,8 +150,8 @@ module.exports = defineConfig({
 
 ### Further Reads
 
-- [How to Create a Module](!docs!/basics/modules)
-- [How to Create Data Models](!docs!/basics/modules#1-create-data-model)
+- [How to Create a Module](!docs!/learn/basics/modules)
+- [How to Create Data Models](!docs!/learn/basics/modules#1-create-data-model)
 
 ---
 
@@ -203,7 +203,7 @@ This adds a list link between the `Vendor` and `Order` data models, indicating t
 
 ### Further Read
 
-- [How to Define Module Links](!docs!/advanced-development/module-links)
+- [How to Define Module Links](!docs!/learn/advanced-development/module-links)
 
 ---
 
@@ -338,10 +338,10 @@ You return the created vendor admin.
 
 ### Further Read
 
-- [How to Create a Workflow](!docs!/basics/workflows)
+- [How to Create a Workflow](!docs!/learn/basics/workflows)
 - [What is an Actor Type](../../../../commerce-modules/auth/auth-identity-and-actor-types/page.mdx)
 - [How to Create an Actor Type](../../../../commerce-modules/auth/create-actor-type/page.mdx)
-- [What is a Compensation Function](!docs!/advanced-development/workflows/compensation-function)
+- [What is a Compensation Function](!docs!/learn/advanced-development/workflows/compensation-function)
 
 ---
 
@@ -513,7 +513,7 @@ This route is available because you created the `vendor` actor type previously.
 
 <Note>
 
-Don't include a trailing slash at the end of the URL. Learn more [here](!docs!/advanced-development/api-routes/middlewares).
+Don't include a trailing slash at the end of the URL. Learn more [here](!docs!/learn/advanced-development/api-routes/middlewares).
 
 </Note>
 
@@ -549,8 +549,8 @@ Use this token in the header of later requests that require authentication.
 
 ### Further Reads
 
-- [How to Create an API route](!docs!/basics/api-routes)
-- [How to Create a Middleware](!docs!/advanced-development/api-routes/middlewares)
+- [How to Create an API route](!docs!/learn/basics/api-routes)
+- [How to Create a Middleware](!docs!/learn/advanced-development/api-routes/middlewares)
 - [Learn more about the /auth route](../../../../commerce-modules/auth/authentication-route/page.mdx)
 
 ---
@@ -778,8 +778,8 @@ curl 'http://localhost:9000/vendors/products' \
 
 ### Further Reads
 
-- [How to use Query](!docs!/advanced-development/module-links/query)
-- [How to use the Remote Link](!docs!/advanced-development/module-links/remote-link)
+- [How to use Query](!docs!/learn/advanced-development/module-links/query)
+- [How to use the Remote Link](!docs!/learn/advanced-development/module-links/remote-link)
 
 ---
 
@@ -1361,7 +1361,7 @@ For example, you can link sales channels to vendors or other settings.
 
 <Note>
 
-[Learn more about module links](!docs!/advanced-development/module-links).
+[Learn more about module links](!docs!/learn/advanced-development/module-links).
 
 </Note>
 
@@ -1373,6 +1373,6 @@ You can also create a custom storefront. Check out the [Storefront Development](
 
 ### Admin Development
 
-The Medusa Admin is extendable, allowing you to add widgets to existing pages or create new pages. Learn more about it in [this documentation](!docs!/advanced-development/admin).
+The Medusa Admin is extendable, allowing you to add widgets to existing pages or create new pages. Learn more about it in [this documentation](!docs!/learn/advanced-development/admin).
 
 If your use case requires bigger customizations to the admin, such as showing different products and orders based on the logged-in vendor, use the [admin API routes](!api!/admin) to build a custom admin.
diff --git a/www/apps/resources/app/recipes/marketplace/page.mdx b/www/apps/resources/app/recipes/marketplace/page.mdx
index dc5ab1665b..332c426aa0 100644
--- a/www/apps/resources/app/recipes/marketplace/page.mdx
+++ b/www/apps/resources/app/recipes/marketplace/page.mdx
@@ -35,13 +35,13 @@ You can create a marketplace module that implements data models for vendors, the
 
 <CardList items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "Create Data Models",
     text: "Create data models in the module.",
     icon: AcademicCapSolid,
@@ -57,7 +57,7 @@ Since a vendor has products, orders, and other models based on your use case, de
 For example, if you defined a vendor data model in a marketplace module, you can define a module link between the vendor and the Product Module's product data model.
 
 <Card
-  href="!docs!/advanced-development/module-links"
+  href="!docs!/learn/advanced-development/module-links"
   title="Define a Module Link"
   text="Learn how to define a module link."
   icon={AcademicCapSolid}
@@ -86,13 +86,13 @@ If you provide vendor or sellers with custom features, or a different way of man
 
 <CardList items={[
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create API Routes",
     text: "Learn how to create an API Route in Medusa.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/api-routes/protected-routes",
+    href: "!docs!/learn/advanced-development/api-routes/protected-routes",
     title: "Protect Routes",
     text: "Learn how to guard routes to allow authenticated users only.",
     icon: AcademicCapSolid,
@@ -103,12 +103,12 @@ If you provide vendor or sellers with custom features, or a different way of man
 
 ## Split Orders Based on Vendors
 
-If your use case allows a customer's orders to have items from different vendors, you can override the [Complete Cart API route](https://docs.medusajs.com/v2/api/store#carts_postcartsidcomplete) to change how the order should be created.
+If your use case allows a customer's orders to have items from different vendors, you can override the [Complete Cart API route](!api!/store#carts_postcartsidcomplete) to change how the order should be created.
 
 If your flow requires different steps, such as creating a parent order then creating a child order, create a workflow and execute it from the API route.
 
 <Card
-  href="!docs!/basics/workflows"
+  href="!docs!/learn/basics/workflows"
   title="Create a Workflow"
   text="Learn how to create a workflow in Medusa."
   icon={AcademicCapSolid}
diff --git a/www/apps/resources/app/recipes/multi-region-store/page.mdx b/www/apps/resources/app/recipes/multi-region-store/page.mdx
index 77e95bf3d4..8f4b5c65aa 100644
--- a/www/apps/resources/app/recipes/multi-region-store/page.mdx
+++ b/www/apps/resources/app/recipes/multi-region-store/page.mdx
@@ -157,7 +157,7 @@ By integrating a third-party Content Management Systems (CMS), you benefit from
 To integrate a third-party system, create a custom module whose main service connects to that third-party service.
 
 <Card
-  href="!docs!/basics/modules"
+  href="!docs!/learn/basics/modules"
   title="Create a Module"
   text="Learn how to create a module in Medusa."
   icon={AcademicCapSolid}
diff --git a/www/apps/resources/app/recipes/omnichannel/page.mdx b/www/apps/resources/app/recipes/omnichannel/page.mdx
index 01b190b2ee..b446e14997 100644
--- a/www/apps/resources/app/recipes/omnichannel/page.mdx
+++ b/www/apps/resources/app/recipes/omnichannel/page.mdx
@@ -52,7 +52,7 @@ Another channel that attracts customer sales is social media. You can create a c
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module.",
     icon: AcademicCapSolid,
@@ -73,13 +73,13 @@ Medusa’s architecture also makes it easier to integrate any third-party servic
 
 <CardList itemsPerRow={2} items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create an API Route",
     text: "Learn how to create an API route.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/oms/page.mdx b/www/apps/resources/app/recipes/oms/page.mdx
index 38ee2bdddc..b0f9a54e15 100644
--- a/www/apps/resources/app/recipes/oms/page.mdx
+++ b/www/apps/resources/app/recipes/oms/page.mdx
@@ -43,13 +43,13 @@ For example, you can support importing orders into Medusa through a custom API R
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create API Route",
     text: "Learn how to create a custom API Route.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/scheduled-jobs",
+    href: "!docs!/learn/basics/scheduled-jobs",
     title: "Create Scheduled Jobs",
     text: "Learn how to create a scheduled job.",
     icon: AcademicCapSolid,
@@ -82,7 +82,7 @@ Emitting of event `order.fulfillment_created` isn't implemented yet.
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn about create a subscriber",
     icon: AcademicCapSolid,
@@ -111,7 +111,7 @@ Emitting of event `order.payment_captured` isn't implemented yet.
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn about create a subscriber",
     icon: AcademicCapSolid,
@@ -179,7 +179,7 @@ Emitting of event `order.return_requested` isn't implemented yet.
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn about create a subscriber",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/personalized-products/page.mdx b/www/apps/resources/app/recipes/personalized-products/page.mdx
index e1ce989c60..0e59ca5d3f 100644
--- a/www/apps/resources/app/recipes/personalized-products/page.mdx
+++ b/www/apps/resources/app/recipes/personalized-products/page.mdx
@@ -48,13 +48,13 @@ In more complex cases, you can create a custom module that stores and manages th
 
 <CardList items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "Create a Data Model",
     text: "Learn how to create a data model.",
     icon: AcademicCapSolid,
@@ -98,13 +98,13 @@ If you store the personalized data using a custom module:
 
 <CardList items={[
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create API Route",
     text: "Learn how to create an API route.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/events-and-subscribers",
+    href: "!docs!/learn/basics/events-and-subscribers",
     title: "Create a Subscriber",
     text: "Learn how to create a subscriber.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/pos/page.mdx b/www/apps/resources/app/recipes/pos/page.mdx
index 8f756ef91a..61ec164da6 100644
--- a/www/apps/resources/app/recipes/pos/page.mdx
+++ b/www/apps/resources/app/recipes/pos/page.mdx
@@ -60,7 +60,7 @@ To search through product variants by their barcode, create a custom API Route a
       icon: AcademicCapSolid,
     },
     {
-      href: "!docs!/basics/api-routes",
+      href: "!docs!/learn/basics/api-routes",
       title: "Create API Route",
       text: "Learn how to create an API Route.",
       icon: AcademicCapSolid,
@@ -167,7 +167,7 @@ You can also create custom modules to provide features for a better customer exp
       icon: AcademicCapSolid,
     },
     {
-      href: "!docs!/basics/modules",
+      href: "!docs!/learn/basics/modules",
       title: "Create a Module",
       text: "Learn how to create a module.",
       icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx b/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx
index 16ac0f8fc2..23614cd2e5 100644
--- a/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx
+++ b/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx
@@ -168,9 +168,9 @@ module.exports = defineConfig({
 
 ### Further Read
 
-- [How to Create a Module](!docs!/basics/modules)
-- [How to Create a Data Model](!docs!/basics/modules#1-create-data-model)
-- [Learn more about the service factory](!docs!/advanced-development/modules/service-factory).
+- [How to Create a Module](!docs!/learn/basics/modules)
+- [How to Create a Data Model](!docs!/learn/basics/modules#1-create-data-model)
+- [Learn more about the service factory](!docs!/learn/advanced-development/modules/service-factory).
 
 ---
 
@@ -243,7 +243,7 @@ This defines a list link to the `Order` data model since a subscription has mult
 
 ### Further Reads
 
-- [How to Define a Link](!docs!/advanced-development/module-links)
+- [How to Define a Link](!docs!/learn/advanced-development/module-links)
 
 ---
 
@@ -640,9 +640,9 @@ The workflow returns the created subscription and order.
 
 ### Further Reads
 
-- [How to Create a Workflow](!docs!/basics/workflows)
-- [Learn more about the compensation function](!docs!/advanced-development/workflows/compensation-function)
-- [How to use the Remote Link](!docs!/advanced-development/module-links/remote-link)
+- [How to Create a Workflow](!docs!/learn/basics/workflows)
+- [Learn more about the compensation function](!docs!/learn/advanced-development/workflows/compensation-function)
+- [How to use the Remote Link](!docs!/learn/advanced-development/module-links/remote-link)
 
 ---
 
@@ -954,7 +954,7 @@ npm run dev
 
 ### Further Reads
 
-- [How to Create an API Route](!docs!/basics/api-routes)
+- [How to Create an API Route](!docs!/learn/basics/api-routes)
 
 ---
 
@@ -1431,7 +1431,7 @@ To view a subscription’s details, click on its ID, which opens the subscriptio
 
 ### Further Reads
 
-- [How to Create UI Routes](!docs!/advanced-development/admin/ui-routes)
+- [How to Create UI Routes](!docs!/learn/advanced-development/admin/ui-routes)
 
 ---
 
@@ -1983,7 +1983,7 @@ This loops over the returned subscriptions and executes the `createSubscriptionO
 
 ### Further Reads
 
-- [How to Create a Scheduled Job](!docs!/basics/scheeduled-jobs)
+- [How to Create a Scheduled Job](!docs!/learn/basics/scheeduled-jobs)
 
 ---
 
diff --git a/www/apps/resources/app/recipes/subscriptions/page.mdx b/www/apps/resources/app/recipes/subscriptions/page.mdx
index 9d7bc12d0b..ba230fbb70 100644
--- a/www/apps/resources/app/recipes/subscriptions/page.mdx
+++ b/www/apps/resources/app/recipes/subscriptions/page.mdx
@@ -33,13 +33,13 @@ You can link the subscription data model to models of other modules, such as the
 
 <CardList items={[
   {
-    href: "!docs!/basics/modules",
+    href: "!docs!/learn/basics/modules",
     title: "Create a Module",
     text: "Learn how to create a module.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/modules#1-create-data-model",
+    href: "!docs!/learn/basics/modules#1-create-data-model",
     title: "Create a Data Model",
     text: "Learn how to create a data model.",
     icon: AcademicCapSolid,
@@ -57,7 +57,7 @@ For example, you can link the subscription data model to the Order Module's `Ord
 If you want to create subscriptions on the product level, you can link the subscription data model to the Product Module's `Product` data model.
 
 <Card
-  href="!docs!/advanced-development/module-links"
+  href="!docs!/learn/advanced-development/module-links"
   title="Define a Module Link"
   text="Learn how to define a module link."
   icon={AcademicCapSolid}
@@ -81,13 +81,13 @@ Implementing the logic depends on your use case, but you'll mainly implement the
 
 <CardList itemsPerRow={2} items={[
   {
-    href: "!docs!/basics/api-routes",
+    href: "!docs!/learn/basics/api-routes",
     title: "Create an API Route",
     text: "Learn how to create an API route.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/basics/scheduled-jobs",
+    href: "!docs!/learn/basics/scheduled-jobs",
     title: "Create a Scheduled Job",
     text: "Learn how to create a scheduled job.",
     icon: AcademicCapSolid,
@@ -119,13 +119,13 @@ Extend the Medusa Admin to add widgets to existing pages or add new pages.
 
 <CardList items={[
   {
-    href: "!docs!/advanced-development/admin/widget",
+    href: "!docs!/learn/advanced-development/admin/widget",
     title: "Create Admin Widget",
     text: "Learn how to add widgets into existing admin pages.",
     icon: AcademicCapSolid,
   },
   {
-    href: "!docs!/advanced-development/admin/ui-routes",
+    href: "!docs!/learn/advanced-development/admin/ui-routes",
     title: "Create Admin UI Routes",
     text: "Learn how to add new pages to your Medusa Admin.",
     icon: AcademicCapSolid,
diff --git a/www/apps/resources/app/service-factory-reference/methods/list/page.mdx b/www/apps/resources/app/service-factory-reference/methods/list/page.mdx
index b95311a3dc..151f586009 100644
--- a/www/apps/resources/app/service-factory-reference/methods/list/page.mdx
+++ b/www/apps/resources/app/service-factory-reference/methods/list/page.mdx
@@ -48,7 +48,7 @@ The method returns an array of the first `15` records matching the filters.
 
 <Note>
 
-This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/advanced-development/module-links/query).
+This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/learn/advanced-development/module-links/query).
 
 </Note>
 
diff --git a/www/apps/resources/app/service-factory-reference/methods/listAndCount/page.mdx b/www/apps/resources/app/service-factory-reference/methods/listAndCount/page.mdx
index 350f99c576..33aac00fa9 100644
--- a/www/apps/resources/app/service-factory-reference/methods/listAndCount/page.mdx
+++ b/www/apps/resources/app/service-factory-reference/methods/listAndCount/page.mdx
@@ -54,7 +54,7 @@ The method returns an array with two items:
 
 <Note>
 
-This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/advanced-development/module-links/query).
+This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/learn/advanced-development/module-links/query).
 
 </Note>
 
diff --git a/www/apps/resources/app/service-factory-reference/methods/retrieve/page.mdx b/www/apps/resources/app/service-factory-reference/methods/retrieve/page.mdx
index c4d81f61cc..cc09b4c4ac 100644
--- a/www/apps/resources/app/service-factory-reference/methods/retrieve/page.mdx
+++ b/www/apps/resources/app/service-factory-reference/methods/retrieve/page.mdx
@@ -30,7 +30,7 @@ The method returns the record as an object.
 
 <Note>
 
-This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/advanced-development/module-links/query).
+This applies to relations between data models of the same module. To retrieve linked records of different modules, use [Query](!docs!/learn/advanced-development/module-links/query).
 
 </Note>
 
diff --git a/www/apps/resources/app/service-factory-reference/page.mdx b/www/apps/resources/app/service-factory-reference/page.mdx
index 099f6dabcf..c145165551 100644
--- a/www/apps/resources/app/service-factory-reference/page.mdx
+++ b/www/apps/resources/app/service-factory-reference/page.mdx
@@ -10,7 +10,7 @@ This section of the documentation provides a reference of the methods generated
 
 <Note title="Tip">
 
-Learn more about the service factory in [this documentation](!docs!/advanced-development/modules/service-factory).
+Learn more about the service factory in [this documentation](!docs!/learn/advanced-development/modules/service-factory).
 
 </Note>
 
diff --git a/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx b/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx
index 75b8776d6c..24d2aa7db0 100644
--- a/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx
+++ b/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx
@@ -41,7 +41,7 @@ fetch(`http://localhost:9000/store/products/${id}?${queryParams.toString()}`, {
 })
 ```
 
-You pass the selected region's ID and the code of its first country as query parameters to the [Get Product API route](https://docs.medusajs.com/v2/api/store#products_getproductsid).
+You pass the selected region's ID and the code of its first country as query parameters to the [Get Product API route](!api!/store#products_getproductsid).
 
 <Note title="Tip">
 
@@ -248,6 +248,6 @@ export default function Product({ params: { id } }: Params) {
 
 In this example, you:
 
-- Pass the selected region's ID and the code of its first country as query parameters to the [Get Product API route](https://docs.medusajs.com/v2/api/store#products_getproductsid).
+- Pass the selected region's ID and the code of its first country as query parameters to the [Get Product API route](!api!/store#products_getproductsid).
     - You can instead allow the customer to choose their country.
 - Display the selected variant's price by formatting its price's `calculated_amount_with_tax` property.
diff --git a/www/apps/resources/app/troubleshooting/medusa-admin/no-widget-route/page.mdx b/www/apps/resources/app/troubleshooting/medusa-admin/no-widget-route/page.mdx
index ed288ac27d..e3d26b715d 100644
--- a/www/apps/resources/app/troubleshooting/medusa-admin/no-widget-route/page.mdx
+++ b/www/apps/resources/app/troubleshooting/medusa-admin/no-widget-route/page.mdx
@@ -18,7 +18,7 @@ Refer to the [Admin Widget Injection Zones list](../../../admin-widget-injection
 
 Widget and UI routes must be defined as arrow functions. Any other type of declaration isn't accepted.
 
-Refer to the [Admin Development Constraints](!docs!/advanced-development/admin/constraints) documentation for more details.
+Refer to the [Admin Development Constraints](!docs!/learn/advanced-development/admin/constraints) documentation for more details.
 
 ---
 
@@ -34,7 +34,7 @@ export const config = defineWidgetConfig({
 
 Any other usage leads to the widget not being shown.
 
-Refer to the [Admin Development Constraints](!docs!/advanced-development/admin/constraints) documentation for more details.
+Refer to the [Admin Development Constraints](!docs!/learn/advanced-development/admin/constraints) documentation for more details.
 
 ---
 
diff --git a/www/apps/ui/src/app/layout.tsx b/www/apps/ui/src/app/layout.tsx
index 7066dcb65f..d618c1a7f3 100644
--- a/www/apps/ui/src/app/layout.tsx
+++ b/www/apps/ui/src/app/layout.tsx
@@ -4,7 +4,7 @@ import { Providers } from "@/providers"
 
 import { siteConfig } from "@/config/site"
 import "../styles/globals.css"
-import { TightLayout } from "docs-ui"
+import { BareboneLayout, TightLayout } from "docs-ui"
 import { Inter, Roboto_Mono } from "next/font/google"
 import clsx from "clsx"
 
@@ -33,15 +33,16 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      showBanner={false}
-    >
-      {children}
-    </TightLayout>
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
+      <TightLayout
+        sidebarProps={{
+          expandItems: true,
+        }}
+        showBanner={false}
+        ProvidersComponent={Providers}
+      >
+        {children}
+      </TightLayout>
+    </BareboneLayout>
   )
 }
diff --git a/www/apps/user-guide/app/layout.tsx b/www/apps/user-guide/app/layout.tsx
index 58fd69fd66..30219e2113 100644
--- a/www/apps/user-guide/app/layout.tsx
+++ b/www/apps/user-guide/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import { Inter, Roboto_Mono } from "next/font/google"
 import Providers from "@/providers"
 import "../css/globals.css"
-import { TightLayout } from "docs-ui"
+import { BareboneLayout, TightLayout } from "docs-ui"
 import { config } from "@/config"
 import clsx from "clsx"
 import Feedback from "../components/Feedback"
@@ -36,16 +36,17 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-    >
-      {children}
-      <Feedback className="my-2" />
-      <EditButton />
-    </TightLayout>
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
+      <TightLayout
+        sidebarProps={{
+          expandItems: true,
+        }}
+        ProvidersComponent={Providers}
+      >
+        {children}
+        <Feedback className="my-2" />
+        <EditButton />
+      </TightLayout>
+    </BareboneLayout>
   )
 }
diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json
index 78cd91dab5..a7d3bf6ac1 100644
--- a/www/packages/docs-ui/package.json
+++ b/www/packages/docs-ui/package.json
@@ -60,7 +60,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@medusajs/icons": "preview",
+    "@medusajs/icons": "rc",
     "@medusajs/ui": "^3.0.0",
     "@octokit/request": "^8.1.1",
     "@react-hook/resize-observer": "^1.2.6",
diff --git a/www/packages/docs-ui/src/components/BorderedIcon/index.tsx b/www/packages/docs-ui/src/components/BorderedIcon/index.tsx
index 770df82dcc..3706e90cfd 100644
--- a/www/packages/docs-ui/src/components/BorderedIcon/index.tsx
+++ b/www/packages/docs-ui/src/components/BorderedIcon/index.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import clsx from "clsx"
 import { IconProps } from "@medusajs/icons/dist/types"
+import Image from "next/image"
 
 export type BorderedIconProps = {
   icon?: string
@@ -29,9 +30,11 @@ export const BorderedIcon = ({
     >
       <span className={clsx("rounded-docs_xs", wrapperClassName)}>
         {!IconComponent && (
-          <img
+          <Image
             src={icon || ""}
-            className={clsx(iconClassName, "bordered-icon")}
+            className={clsx(iconClassName, "bordered-icon rounded-docs_xs")}
+            width={28}
+            height={28}
             alt=""
           />
         )}
diff --git a/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx b/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx
index bdf952ff8a..ede20126fe 100644
--- a/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx
+++ b/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx
@@ -93,7 +93,7 @@ export const Breadcrumbs = () => {
       className={clsx(
         "flex items-center gap-docs_0.25",
         "text-medusa-fg-muted text-compact-small",
-        "mb-docs_1"
+        "mb-docs_1 flex-wrap"
       )}
     >
       {Array.from(breadcrumbItems).map(([link, title], index) => (
diff --git a/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
index 64019230e4..c84b95d82b 100644
--- a/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
@@ -42,10 +42,7 @@ export const CardDefaultLayout = ({
       )}
       {image && (
         <BorderedIcon
-          wrapperClassName={clsx(
-            "p-[4.5px] bg-medusa-bg-component-hover",
-            iconClassName
-          )}
+          wrapperClassName={clsx("bg-medusa-bg-base", iconClassName)}
           icon={image}
         />
       )}
@@ -53,19 +50,17 @@ export const CardDefaultLayout = ({
         className={clsx("flex flex-col flex-1 overflow-auto", contentClassName)}
       >
         {title && (
-          <div className="text-compact-small-plus text-medusa-fg-base truncate">
+          <div className="text-small-plus text-medusa-fg-base truncate">
             {title}
           </div>
         )}
         {text && (
-          <span className="text-compact-small text-medusa-fg-subtle">
-            {text}
-          </span>
+          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
         )}
         {children}
       </div>
       {badge && <Badge {...badge} />}
-      <span className="text-medusa-fg-muted">
+      <span className="text-medusa-fg-subtle">
         {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
       </span>
 
diff --git a/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
index 36d255255a..c06759a202 100644
--- a/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { CardProps } from "../.."
 import { useIsExternalLink } from "../../../.."
 import clsx from "clsx"
-import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
 import Link from "next/link"
 
 export const CardLargeLayout = ({
@@ -30,11 +30,16 @@ export const CardLargeLayout = ({
           "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
           href &&
             "group-hover:shadow-elevation-card-hover group-hover:dark:shadow-elevation-card-hover-dark",
-          "px-docs_0.75 py-docs_0.5 flex justify-center items-center"
+          "px-docs_0.75 py-docs_0.5 flex justify-center items-center w-full"
         )}
       >
         {IconComponent && (
-          <IconComponent className="w-docs_2 h-docs_2 text-medusa-fg-subtle" />
+          <IconComponent
+            className="text-medusa-fg-subtle"
+            width={32}
+            height={32}
+            viewBox="0 0 32 32"
+          />
         )}
         {image && (
           <img src={image} alt={title || text || ""} className="w-[144px]" />
@@ -44,12 +49,12 @@ export const CardLargeLayout = ({
         <div className="flex gap-docs_0.25 items-center text-medusa-fg-base">
           {title && <span className="text-compact-small-plus">{title}</span>}
           {href && isExternal && <ArrowUpRightOnBox />}
-          {href && !isExternal && <ArrowRightMini />}
+          {href && !isExternal && (
+            <TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
+          )}
         </div>
         {text && (
-          <span className="text-compact-small text-medusa-fg-subtle">
-            {text}
-          </span>
+          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
         )}
       </div>
       {href && (
diff --git a/www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx
new file mode 100644
index 0000000000..28a7384f6e
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import React from "react"
+import clsx from "clsx"
+import { CardProps } from "../.."
+import { BorderedIcon, ThemeImage, useIsExternalLink } from "../../../.."
+import Link from "next/link"
+import Image from "next/image"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
+
+export const CardLayoutMini = ({
+  icon,
+  image,
+  themeImage,
+  title,
+  text,
+  href,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+
+  return (
+    <div
+      className={clsx(
+        "relative rounded-docs_DEFAULT border-medusa-fg-on-inverted border",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
+        "bg-medusa-tag-neutral-bg dark:bg-medusa-bg-component",
+        "hover:bg-medusa-tag-neutral-bg-hover dark:hover:bg-medusa-bg-component-hover",
+        "w-fit transition-all"
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_DEFAULT flex gap-docs_0.75 py-docs_0.25",
+          "pl-docs_0.25 pr-docs_0.75 items-center"
+        )}
+      >
+        {icon && (
+          <BorderedIcon
+            wrapperClassName={clsx("p-[4.5px] bg-medusa-bg-component-hover")}
+            IconComponent={icon}
+          />
+        )}
+        {image && (
+          <Image
+            src={image}
+            className={clsx(
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "rounded-docs_xs"
+            )}
+            width={45}
+            height={36}
+            alt={title || text || ""}
+            style={{
+              width: "45px",
+              height: "36px",
+            }}
+          />
+        )}
+        {themeImage && (
+          <ThemeImage
+            {...themeImage}
+            className={clsx(
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "rounded-docs_xs"
+            )}
+            width={45}
+            height={36}
+            alt={title || text || ""}
+            style={{
+              width: "45px",
+              height: "36px",
+            }}
+          />
+        )}
+        <div className="flex flex-col">
+          {title && (
+            <span className="text-x-small-plus text-medusa-fg-base">
+              {title}
+            </span>
+          )}
+          {text && (
+            <span className="text-x-small-plus text-medusa-fg-subtle">
+              {text}
+            </span>
+          )}
+        </div>
+        <span className="text-medusa-fg-subtle">
+          {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
+        </span>
+        {href && (
+          <Link href={href} className="absolute left-0 top-0 w-full h-full" />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Card/index.tsx b/www/packages/docs-ui/src/components/Card/index.tsx
index b2f47f96ca..643975e39d 100644
--- a/www/packages/docs-ui/src/components/Card/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/index.tsx
@@ -4,11 +4,16 @@ import { CardDefaultLayout } from "./Layout/Default"
 import { IconProps } from "@medusajs/icons/dist/types"
 import { CardLargeLayout } from "./Layout/Large"
 import { CardFillerLayout } from "./Layout/Filler"
+import { CardLayoutMini } from "./Layout/Mini"
 
 export type CardProps = {
-  type?: "default" | "large" | "filler"
+  type?: "default" | "large" | "filler" | "mini"
   icon?: React.FC<IconProps>
   image?: string
+  themeImage?: {
+    light: string
+    dark: string
+  }
   title?: string
   text?: string
   href?: string
@@ -25,6 +30,8 @@ export const Card = ({ type = "default", ...props }: CardProps) => {
       return <CardLargeLayout {...props} />
     case "filler":
       return <CardFillerLayout {...props} />
+    case "mini":
+      return <CardLayoutMini {...props} />
     default:
       return <CardDefaultLayout {...props} />
   }
diff --git a/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
index d0387f721d..d5dc5dfa54 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
@@ -24,6 +24,7 @@ type CodeBlockLineProps = {
   lineNumberColorClassName: string
   lineNumberBgClassName: string
   isTerminal: boolean
+  animateTokenHighlights?: boolean
 } & Pick<RenderProps, "getLineProps" | "getTokenProps">
 
 export const CodeBlockLine = ({
@@ -36,6 +37,7 @@ export const CodeBlockLine = ({
   lineNumberColorClassName,
   lineNumberBgClassName,
   isTerminal,
+  animateTokenHighlights = false,
 }: CodeBlockLineProps) => {
   const lineProps = getLineProps({ line, key: lineNumber })
 
@@ -94,6 +96,16 @@ export const CodeBlockLine = ({
         if (currentPositionInHighlightedText === highlight.text!.length) {
           // matching text was found, break loop
           endIndex = tokenIndex
+          const trimmedContent = token.content.trimEnd()
+          const endingSpacesLength =
+            token.content.length - trimmedContent.length
+          if (endingSpacesLength) {
+            line.splice(tokenIndex + 1, 0, {
+              content: new Array(endingSpacesLength).fill(" ").join(""),
+              types: ["plain"],
+            })
+            token.content = trimmedContent
+          }
           return true
         }
       })
@@ -197,19 +209,26 @@ export const CodeBlockLine = ({
   const getTokensElm = ({
     tokens,
     isTokenHighlighted,
-    isLineHighlighted,
     offset,
   }: {
     tokens: Token[]
     isTokenHighlighted: boolean
-    isLineHighlighted: boolean
     offset: number
   }) => (
-    <span
-      className={clsx(
-        isTokenHighlighted && "lg:bg-medusa-contrast-border-base cursor-default"
+    <span className={clsx(isTokenHighlighted && "relative")}>
+      {isTokenHighlighted && (
+        <span
+          className={clsx(
+            animateTokenHighlights && [
+              "animate-fast animate-growWidth animation-fill-forwards",
+            ],
+            !animateTokenHighlights && "w-full",
+            "absolute left-0 top-0 h-full z-0",
+            "lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12",
+            "lg:rounded-docs_xs scale-x-[1.05]"
+          )}
+        />
       )}
-    >
       {tokens.map((token, key) => {
         const tokenKey = offset + key
         const { className: tokenClassName, ...rest } = getTokenProps({
@@ -221,8 +240,7 @@ export const CodeBlockLine = ({
             key={tokenKey}
             className={clsx(
               tokenClassName,
-              (isTokenHighlighted || isLineHighlighted) &&
-                "!text-medusa-contrast-fg-primary"
+              isTokenHighlighted && "relative z-[1]"
             )}
             {...rest}
           />
@@ -242,7 +260,7 @@ export const CodeBlockLine = ({
       {...lineProps}
       className={clsx(
         "table-row",
-        isHighlightedLine && "bg-medusa-contrast-border-base",
+        isHighlightedLine && "bg-medusa-alpha-white-alpha-6",
         lineProps.className
       )}
     >
@@ -287,7 +305,6 @@ export const CodeBlockLine = ({
                     tokens,
                     isTokenHighlighted: isHighlighted,
                     offset,
-                    isLineHighlighted: isHighlightedLine,
                   })}
                 </Tooltip>
               )}
@@ -296,7 +313,6 @@ export const CodeBlockLine = ({
                   tokens,
                   isTokenHighlighted: isHighlighted,
                   offset,
-                  isLineHighlighted: isHighlightedLine,
                 })}
             </React.Fragment>
           )
diff --git a/www/packages/docs-ui/src/components/CodeBlock/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
index 7f3392efef..8d8befeab7 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -47,11 +47,23 @@ export type CodeBlockStyle = "loud" | "subtle" | "inline"
 export type CodeBlockProps = {
   source: string
   lang?: string
+  wrapperClassName?: string
+  innerClassName?: string
   className?: string
   collapsed?: boolean
   blockStyle?: CodeBlockStyle
   children?: React.ReactNode
   style?: React.HTMLAttributes<HTMLDivElement>["style"]
+  forceNoTitle?: boolean
+  animateTokenHighlights?: boolean
+  overrideColors?: {
+    bg?: string
+    innerBg?: string
+    lineNumbersBg?: string
+    border?: string
+    innerBorder?: string
+    boxShadow?: string
+  }
 } & CodeBlockMetaFields &
   Omit<HighlightProps, "code" | "language" | "children">
 
@@ -59,7 +71,10 @@ export const CodeBlock = ({
   source,
   hasTabs = false,
   lang = "",
+  wrapperClassName,
+  innerClassName,
   className,
+  overrideColors = {},
   collapsed = false,
   title = "",
   highlights = [],
@@ -73,6 +88,8 @@ export const CodeBlock = ({
   expandButtonLabel,
   isTerminal,
   style,
+  forceNoTitle = false,
+  animateTokenHighlights,
   ...rest
 }: CodeBlockProps) => {
   if (!source && typeof children === "string") {
@@ -94,6 +111,10 @@ export const CodeBlock = ({
       : isTerminal
   }, [isTerminal, lang])
   const codeTitle = useMemo(() => {
+    if (forceNoTitle) {
+      return ""
+    }
+
     if (title) {
       return title
     }
@@ -107,7 +128,7 @@ export const CodeBlock = ({
     }
 
     return "Code"
-  }, [title, isTerminalCode, hasTabs])
+  }, [title, isTerminalCode, hasTabs, forceNoTitle])
   const hasInnerCodeBlock = useMemo(
     () => hasTabs || codeTitle.length > 0,
     [hasTabs, codeTitle]
@@ -123,72 +144,90 @@ export const CodeBlock = ({
   const bgColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "bg-medusa-bg-subtle",
-          colorMode === "dark" && "bg-medusa-code-bg-base",
+        overrideColors.bg,
+        !overrideColors.bg && [
+          blockStyle === "loud" && "bg-medusa-contrast-bg-base",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "bg-medusa-bg-subtle",
+            colorMode === "dark" && "bg-medusa-code-bg-base",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const lineNumbersColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+        overrideColors.lineNumbersBg,
+        !overrideColors.lineNumbersBg && [
+          blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "text-medusa-fg-muted",
+            colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const borderColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "border-0",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "border-medusa-border-base",
-          colorMode === "dark" && "border-medusa-code-border",
+        overrideColors.border,
+        !overrideColors.border && [
+          blockStyle === "loud" && "border-0",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "border-medusa-border-base",
+            colorMode === "dark" && "border-medusa-code-border",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const boxShadow = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" &&
-          "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
-        blockStyle === "subtle" && "shadow-none"
+        overrideColors.boxShadow,
+        !overrideColors.boxShadow && [
+          blockStyle === "loud" &&
+            "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
+          blockStyle === "subtle" && "shadow-none",
+        ]
       ),
-    [blockStyle]
+    [blockStyle, overrideColors]
   )
 
   const innerBgColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && [
-          hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
-          !hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
-        ],
-        blockStyle === "subtle" && bgColor
+        overrideColors.innerBg,
+        !overrideColors.innerBg && [
+          blockStyle === "loud" && [
+            hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
+            !hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
+          ],
+          blockStyle === "subtle" && bgColor,
+        ]
       ),
-    [blockStyle, bgColor, hasInnerCodeBlock]
+    [blockStyle, bgColor, hasInnerCodeBlock, overrideColors]
   )
 
   const innerBorderClasses = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && [
-          hasInnerCodeBlock &&
-            "border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
-          !hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
-        ],
-        blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT"
+        overrideColors.innerBorder,
+        !overrideColors.innerBorder && [
+          blockStyle === "loud" && [
+            hasInnerCodeBlock &&
+              "border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
+            !hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
+          ],
+          blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT",
+        ]
       ),
-    [blockStyle, hasInnerCodeBlock]
+    [blockStyle, hasInnerCodeBlock, overrideColors]
   )
 
   const language = useMemo(() => {
@@ -227,6 +266,7 @@ export const CodeBlock = ({
           lineNumberColorClassName={lineNumbersColor}
           lineNumberBgClassName={innerBgColor}
           isTerminal={isTerminalCode}
+          animateTokenHighlights={animateTokenHighlights}
           {...highlightProps}
         />
       )
@@ -309,7 +349,8 @@ export const CodeBlock = ({
           blockStyle === "loud" && "code-block-highlight",
           blockStyle === "subtle" &&
             colorMode === "light" &&
-            "code-block-highlight-light"
+            "code-block-highlight-light",
+          wrapperClassName
         )}
       >
         {codeTitle && (
@@ -327,7 +368,7 @@ export const CodeBlock = ({
         <div
           className={clsx(
             "relative mb-docs_1",
-            "w-full max-w-full border",
+            "w-full max-w-full border code-block-elm",
             bgColor,
             borderColor,
             collapsed && "max-h-[400px] overflow-auto",
@@ -350,7 +391,12 @@ export const CodeBlock = ({
               ...rest
             }) => (
               <div
-                className={clsx(innerBorderClasses, innerBgColor, "relative")}
+                className={clsx(
+                  innerBorderClasses,
+                  innerBgColor,
+                  "relative",
+                  innerClassName
+                )}
                 ref={codeContainerRef}
               >
                 {collapsibleType === "start" && (
@@ -406,13 +452,14 @@ export const CodeBlock = ({
                       })}
                   </code>
                 </pre>
-                {!hasInnerCodeBlock && (
-                  <CodeBlockActions
-                    {...actionsProps}
-                    inHeader={false}
-                    isSingleLine={tokens.length <= 1}
-                  />
-                )}
+                {!hasInnerCodeBlock &&
+                  (!noCopy || !noReport || canShowApiTesting) && (
+                    <CodeBlockActions
+                      {...actionsProps}
+                      inHeader={false}
+                      isSingleLine={tokens.length <= 1}
+                    />
+                  )}
                 {collapsibleType === "end" && (
                   <>
                     <CodeBlockCollapsibleFade
diff --git a/www/packages/docs-ui/src/components/EditButton/index.tsx b/www/packages/docs-ui/src/components/EditButton/index.tsx
index 877fa05e23..f07ba1aa8e 100644
--- a/www/packages/docs-ui/src/components/EditButton/index.tsx
+++ b/www/packages/docs-ui/src/components/EditButton/index.tsx
@@ -13,7 +13,8 @@ export const EditButton = ({ filePath }: EditButtonProps) => {
       href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}
       className={clsx(
         "flex w-fit gap-docs_0.25 my-docs_2 items-center",
-        "text-medusa-fg-muted hover:text-medusa-fg-subtle"
+        "text-medusa-fg-muted hover:text-medusa-fg-subtle",
+        "text-compact-small-plus"
       )}
     >
       <span>Edit this page</span>
diff --git a/www/packages/docs-ui/src/components/Feedback/index.tsx b/www/packages/docs-ui/src/components/Feedback/index.tsx
index a025adaa03..0d84f26dca 100644
--- a/www/packages/docs-ui/src/components/Feedback/index.tsx
+++ b/www/packages/docs-ui/src/components/Feedback/index.tsx
@@ -32,6 +32,7 @@ export type FeedbackProps = {
   extraData?: ExtraData
   vertical?: boolean
   showLongForm?: boolean
+  showDottedSeparator?: boolean
 } & React.HTMLAttributes<HTMLDivElement>
 
 export const Feedback = ({
@@ -50,6 +51,7 @@ export const Feedback = ({
   extraData = {},
   vertical = false,
   showLongForm = false,
+  showDottedSeparator = true,
 }: FeedbackProps) => {
   const [showForm, setShowForm] = useState(false)
   const [submittedFeedback, setSubmittedFeedback] = useState(false)
@@ -121,7 +123,9 @@ export const Feedback = ({
 
   return (
     <div className={clsx(className)}>
-      <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
+      {showDottedSeparator && (
+        <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
+      )}
       <SwitchTransition mode="out-in">
         <CSSTransition
           key={
@@ -151,7 +155,9 @@ export const Feedback = ({
                 )}
                 ref={inlineFeedbackRef}
               >
-                <Label>{question}</Label>
+                <Label className={"text-compact-small text-medusa-fg-subtle"}>
+                  {question}
+                </Label>
                 <div
                   className={clsx(
                     "flex gap-docs_0.5",
@@ -299,7 +305,9 @@ export const Feedback = ({
           </>
         </CSSTransition>
       </SwitchTransition>
-      <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
+      {showDottedSeparator && (
+        <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
+      )}
     </div>
   )
 }
diff --git a/www/packages/docs-ui/src/components/IconHeadline/index.tsx b/www/packages/docs-ui/src/components/IconHeadline/index.tsx
new file mode 100644
index 0000000000..688ea79964
--- /dev/null
+++ b/www/packages/docs-ui/src/components/IconHeadline/index.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+type IconHeadlineProps = {
+  title: string
+  icon: React.ReactNode
+}
+
+export const IconHeadline = ({ title, icon }: IconHeadlineProps) => {
+  return (
+    <div className="flex gap-docs_0.5 text-medusa-fg-base">
+      {icon}
+      <span className="text-small-plus">{title}</span>
+    </div>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/Book/index.tsx b/www/packages/docs-ui/src/components/Icons/Book/index.tsx
new file mode 100644
index 0000000000..11ac7b0518
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Book/index.tsx
@@ -0,0 +1,63 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const BookIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10569_98393)">
+        <path
+          opacity="0.3"
+          d="M13.5556 1.55566H5.11111V11.3334H13.5556V1.55566Z"
+          fill="currentColor"
+        />
+        <path
+          d="M5.11111 1.55566V11.3334"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.44444 12.889V3.33344C2.44444 2.35122 3.24 1.55566 4.22222 1.55566H13.5556V11.3334"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4.66666 14.4445H4C3.14133 14.4445 2.44444 13.7485 2.44444 12.8889C2.44444 12.0294 3.14133 11.3334 4 11.3334H13.5556C12.9858 12.0836 12.9031 13.5974 13.5556 14.4445H4.66666Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.77777 4.66675H10.8889"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.77777 7.33337H10.8889"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10569_98393">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/CalendarRefresh/index.tsx b/www/packages/docs-ui/src/components/Icons/CalendarRefresh/index.tsx
new file mode 100644
index 0000000000..7c9a228bea
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/CalendarRefresh/index.tsx
@@ -0,0 +1,70 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const CalendarRefreshIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10681_55295)">
+        <path
+          opacity="0.3"
+          d="M3.99829 8.44374C3.99829 6.48006 5.59017 4.88818 7.55385 4.88818H24.4427C26.4065 4.88818 27.9983 6.48006 27.9983 8.44374V11.1104H3.99829V8.44374Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.2209 4.88808V1.33252"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M21.7756 4.88808V1.33252"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.99829 11.1099H27.9983"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M25.3313 23.5543H29.7757V19.1099"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M27.9983 15.0624V8.44374C27.9983 6.48107 26.4072 4.88818 24.4427 4.88818H7.55385C5.5894 4.88818 3.99829 6.48107 3.99829 8.44374V23.5548C3.99829 25.5175 5.5894 27.1104 7.55385 27.1104H15.8507"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M28.4427 28.2431C27.5521 29.1871 26.2881 29.7773 24.8872 29.7773C22.1867 29.7773 19.9983 27.5888 19.9983 24.8884C19.9983 22.188 22.1867 19.9995 24.8872 19.9995C26.9601 19.9995 28.7307 21.2902 29.4436 23.1106"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10681_55295">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/ChefHat/index.tsx b/www/packages/docs-ui/src/components/Icons/ChefHat/index.tsx
new file mode 100644
index 0000000000..0db37de501
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/ChefHat/index.tsx
@@ -0,0 +1,65 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const ChefHatIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10681_55312)">
+        <path
+          opacity="0.3"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.4896 7.07933C20.7301 4.77472 18.5587 3.11133 15.9998 3.11133C13.4401 3.11133 11.2694 4.77558 10.5105 7.08111C9.55229 6.67222 8.47444 6.54599 7.32421 6.78244C5.24066 7.21088 3.5589 8.94777 3.19445 11.0438C2.60957 14.4109 5.18557 17.3336 8.44421 17.3336V24.4447H23.5553V17.3336C26.8122 17.3336 29.3882 14.4127 28.8069 11.0473C28.4442 8.94955 26.7625 7.21266 24.6789 6.78244C23.5269 6.54422 22.4496 6.67044 21.4896 7.07933Z"
+          fill="currentColor"
+        />
+        <path
+          d="M8.44446 24.4446H23.5556"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.7777 21.3335V24.4446"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18.2222 21.3335V24.4446"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.5101 7.08108C9.55191 6.67219 8.47456 6.54596 7.32434 6.78241C5.24078 7.21085 3.55902 8.94774 3.19458 11.0437C2.60969 14.4109 5.18569 17.3335 8.44434 17.3335V27.1113C8.44434 28.0926 9.2408 28.8891 10.2221 28.8891H21.7777C22.759 28.8891 23.5555 28.0926 23.5555 27.1113V17.3335C26.8124 17.3335 29.3884 14.4126 28.807 11.0473C28.4444 8.94952 26.7626 7.21263 24.679 6.78241C23.527 6.54419 22.4497 6.67041 21.4897 7.0793"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.2222 8.88911C10.2222 5.69799 12.8088 3.11133 15.9999 3.11133C19.1911 3.11133 21.7777 5.69799 21.7777 8.88911"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10681_55312">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/ImageBinary/index.tsx b/www/packages/docs-ui/src/components/Icons/ImageBinary/index.tsx
new file mode 100644
index 0000000000..f88f3cbc3d
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/ImageBinary/index.tsx
@@ -0,0 +1,69 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const ImageBinaryIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10681_55277)">
+        <path
+          opacity="0.3"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.6664 5.78027C4.70272 5.78027 3.11084 7.37215 3.11084 9.33583V22.6692C3.11084 24.6329 4.70272 26.2247 6.6664 26.2247H7.13191L17.3331 16.0236V5.78027H6.6664Z"
+          fill="currentColor"
+        />
+        <path
+          d="M7.11084 26.2244L17.3331 16.0022"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.3331 26.2247H6.6664C4.70195 26.2247 3.11084 24.6336 3.11084 22.6692V9.33583C3.11084 7.37138 4.70195 5.78027 6.6664 5.78027H17.3331"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.222 15.1134C11.4493 15.1134 12.4442 14.1185 12.4442 12.8912C12.4442 11.6639 11.4493 10.6689 10.222 10.6689C8.99467 10.6689 7.99976 11.6639 7.99976 12.8912C7.99976 14.1185 8.99467 15.1134 10.222 15.1134Z"
+          fill="currentColor"
+        />
+        <path
+          d="M26.222 27.1133C27.9402 27.1133 29.3331 25.1234 29.3331 22.6688C29.3331 20.2142 27.9402 18.2244 26.222 18.2244C24.5037 18.2244 23.1108 20.2142 23.1108 22.6688C23.1108 25.1234 24.5037 27.1133 26.222 27.1133Z"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M26.2216 13.7795V4.89062C26.2216 4.89062 25.203 6.68263 23.043 7.09507"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.3331 3.11328V28.8911"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10681_55277">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/PuzzleColored/index.tsx b/www/packages/docs-ui/src/components/Icons/PuzzleColored/index.tsx
new file mode 100644
index 0000000000..2172e8980d
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/PuzzleColored/index.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const PuzzleColoredIcon = (props: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10683_56033)">
+        <path
+          opacity="0.3"
+          d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10683_56033">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/ScrollText/index.tsx b/www/packages/docs-ui/src/components/Icons/ScrollText/index.tsx
new file mode 100644
index 0000000000..7fdf238f72
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/ScrollText/index.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const ScrollTextIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10703_107758)">
+        <path
+          opacity="0.3"
+          d="M1.55556 3.33333C1.55556 2.59695 2.15251 2 2.88889 2C3.62527 2 4.22222 2.59695 4.22222 3.33333V6H1.74604C1.64084 6 1.55556 5.91472 1.55556 5.80952V3.33333Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.3"
+          d="M6.90213 11.3335H14.4444V13.1113C14.4444 13.6022 14.0465 14.0002 13.5556 14.0002H6.90213V11.3335Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.1111 14C13.8471 14 14.4444 13.4027 14.4444 12.6667V11.7778C14.4444 11.5324 14.2453 11.3333 14 11.3333H7.33334C7.088 11.3333 6.88889 11.5324 6.88889 11.7778V12.6667C6.88889 13.4027 6.29156 14 5.55556 14C4.81956 14 4.22222 13.4027 4.22222 12.6667V3.33333C4.22222 2.59733 3.62489 2 2.88889 2C2.15289 2 1.55556 2.59733 1.55556 3.33333V5.11111C1.55556 5.60178 1.95378 6 2.44445 6H4.22222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.1111 14H5.55556"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.88889 2H11.3333C12.0693 2 12.6667 2.59733 12.6667 3.33333V9.11111"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.66666 5.11108H10.2222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.66666 7.77783H10.2222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10703_107758">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/Shop/index.tsx b/www/packages/docs-ui/src/components/Icons/Shop/index.tsx
new file mode 100644
index 0000000000..7123605b48
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Shop/index.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const ShopIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10681_55260)">
+        <path
+          opacity="0.3"
+          d="M24.2998 3.11401H7.70064C7.06242 3.11401 6.4722 3.45712 6.15575 4.01179L3.12286 9.33624C3.96731 11.1691 5.80731 12.4473 7.95842 12.4473C9.57264 12.4473 11.002 11.7149 11.9798 10.5825C12.9575 11.7149 14.3869 12.4473 16.0011 12.4473C17.6153 12.4473 19.0429 11.7167 20.0206 10.5842C20.9984 11.7167 22.4278 12.4473 24.0402 12.4473C26.1895 12.4473 28.0313 11.1691 28.8758 9.33624L25.8464 4.01179C25.53 3.45712 24.938 3.11401 24.2998 3.11401Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.3"
+          d="M12.8902 28.4474V23.114C12.8902 21.3967 14.284 20.0029 16.0013 20.0029C17.7186 20.0029 19.1124 21.3967 19.1124 23.114V28.4474"
+          fill="currentColor"
+        />
+        <path
+          d="M6.66809 28.8914V16.8914"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M25.3346 16.8914V28.8914"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M24.2998 3.11401H7.70064C7.06242 3.11401 6.4722 3.45712 6.15575 4.01179L3.12286 9.33624C3.96731 11.1691 5.80731 12.4473 7.95842 12.4473C9.57264 12.4473 11.002 11.7149 11.9798 10.5825C12.9575 11.7149 14.3869 12.4473 16.0011 12.4473C17.6153 12.4473 19.0429 11.7167 20.0206 10.5842C20.9984 11.7167 22.4278 12.4473 24.0402 12.4473C26.1895 12.4473 28.0313 11.1691 28.8758 9.33624L25.8464 4.01179C25.53 3.45712 24.938 3.11401 24.2998 3.11401Z"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.8902 28.4474V23.114C12.8902 21.3967 14.284 20.0029 16.0013 20.0029C17.7186 20.0029 19.1124 21.3967 19.1124 23.114V28.4474"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.11243 28.8914H28.8902"
+          stroke="currentColor"
+          strokeWidth="2.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10681_55260">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/WindowPaintbrush/index.tsx b/www/packages/docs-ui/src/components/Icons/WindowPaintbrush/index.tsx
new file mode 100644
index 0000000000..fe0bf9e841
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/WindowPaintbrush/index.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const WindowPaintbrushIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10703_107733)">
+        <path
+          opacity="0.3"
+          d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.4445 8.21954L14.9653 3.70132C15.456 3.21065 15.456 2.41421 14.9653 1.92354C14.4747 1.43288 13.6782 1.43288 13.1876 1.92354L8.65956 6.45332"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.4444 7.36357V11.7778C14.4444 12.76 13.6489 13.5556 12.6667 13.5556H3.33334C2.35111 13.5556 1.55556 12.76 1.55556 11.7778V4.22224C1.55556 3.24001 2.35111 2.44446 3.33334 2.44446H9.52445"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.77778 5.33333C4.14597 5.33333 4.44445 5.03485 4.44445 4.66667C4.44445 4.29848 4.14597 4 3.77778 4C3.40959 4 3.11111 4.29848 3.11111 4.66667C3.11111 5.03485 3.40959 5.33333 3.77778 5.33333Z"
+          fill="currentColor"
+        />
+        <path
+          d="M5.99999 5.33333C6.36818 5.33333 6.66666 5.03485 6.66666 4.66667C6.66666 4.29848 6.36818 4 5.99999 4C5.63181 4 5.33333 4.29848 5.33333 4.66667C5.33333 5.03485 5.63181 5.33333 5.99999 5.33333Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10703_107733">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/index.tsx b/www/packages/docs-ui/src/components/Icons/index.tsx
index f8a18679d0..8df127ecc2 100644
--- a/www/packages/docs-ui/src/components/Icons/index.tsx
+++ b/www/packages/docs-ui/src/components/Icons/index.tsx
@@ -1,8 +1,16 @@
 export * from "./AiAssistant"
+export * from "./Book"
+export * from "./CalendarRefresh"
+export * from "./ChefHat"
 export * from "./CircleDottedLine"
 export * from "./DecisionProcess"
+export * from "./ImageBinary"
+export * from "./PuzzleColored"
 export * from "./QuestionMark"
+export * from "./ScrollText"
 export * from "./ShadedBg"
+export * from "./Shop"
 export * from "./StripeColored"
 export * from "./ThumbDown"
 export * from "./ThumbUp"
+export * from "./WindowPaintbrush"
diff --git a/www/packages/docs-ui/src/components/Link/index.tsx b/www/packages/docs-ui/src/components/Link/index.tsx
index 93576f6683..cb70392d07 100644
--- a/www/packages/docs-ui/src/components/Link/index.tsx
+++ b/www/packages/docs-ui/src/components/Link/index.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import NextLink from "next/link"
 import type { LinkProps as NextLinkProps } from "next/link"
 import clsx from "clsx"
+import { TriangleRightMini } from "@medusajs/icons"
 
 export type LinkProps = {
   href?: string
@@ -9,9 +10,16 @@ export type LinkProps = {
   className?: string
   target?: string
   rel?: string
+  withIcon?: boolean
 } & Partial<NextLinkProps>
 
-export const Link = ({ href, children, className, ...rest }: LinkProps) => {
+export const Link = ({
+  href,
+  children,
+  className,
+  withIcon = false,
+  ...rest
+}: LinkProps) => {
   if (href?.replace(/#.*$/, "").endsWith("page.mdx")) {
     href = href.replace("/page.mdx", "")
   }
@@ -21,10 +29,14 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
       {...rest}
       className={clsx(
         "text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
+        withIcon && "flex gap-0.25 items-center group",
         className
       )}
     >
       {children}
+      {withIcon && (
+        <TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
+      )}
     </NextLink>
   )
 }
diff --git a/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx
index 1c9eef04d7..d512b017ce 100644
--- a/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx
@@ -6,7 +6,7 @@ import {
   SidebarLeft,
   TimelineVertical,
 } from "@medusajs/icons"
-import React, { useRef, useState } from "react"
+import React, { useMemo, useRef, useState } from "react"
 import {
   Button,
   getOsShortcut,
@@ -17,10 +17,11 @@ import {
 import clsx from "clsx"
 import { HouseIcon } from "../../Icons/House"
 import { MainNavThemeMenu } from "./ThemeMenu"
+import { MenuItem } from "types"
 
 export const MainNavDesktopMenu = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const { setDesktopSidebarOpen } = useSidebar()
+  const { setDesktopSidebarOpen, isSidebarShown } = useSidebar()
   const ref = useRef(null)
 
   useClickOutside({
@@ -28,6 +29,59 @@ export const MainNavDesktopMenu = () => {
     onClickOutside: () => setIsOpen(false),
   })
 
+  const items: MenuItem[] = useMemo(() => {
+    const items: MenuItem[] = [
+      {
+        type: "link",
+        icon: <HouseIcon />,
+        title: "Homepage",
+        link: "https://docs.medusajs.com/v2",
+      },
+      {
+        type: "link",
+        icon: <TimelineVertical />,
+        title: "Changelog",
+        link: "https://medusajs.com/changelog",
+      },
+      {
+        type: "link",
+        icon: <QuestionMarkCircle />,
+        title: "Troubleshooting",
+        link: "https://docs.medusajs.com/v2/resources/troubleshooting",
+      },
+    ]
+
+    if (isSidebarShown) {
+      items.push(
+        {
+          type: "divider",
+        },
+        {
+          type: "action",
+          title: "Hide Sidebar",
+          icon: <SidebarLeft />,
+          shortcut: `${getOsShortcut()}\\`,
+          action: () => {
+            setDesktopSidebarOpen((prev) => !prev)
+            setIsOpen(false)
+          },
+        }
+      )
+    }
+
+    items.push(
+      {
+        type: "divider",
+      },
+      {
+        type: "custom",
+        content: <MainNavThemeMenu />,
+      }
+    )
+
+    return items
+  }, [isSidebarShown])
+
   return (
     <div
       className="relative hidden lg:flex justify-center items-center"
@@ -45,46 +99,7 @@ export const MainNavDesktopMenu = () => {
           "absolute top-[calc(100%+8px)] right-0 min-w-[200px]",
           !isOpen && "hidden"
         )}
-        items={[
-          {
-            type: "link",
-            icon: <HouseIcon />,
-            title: "Homepage",
-            link: "https://medusajs.com",
-          },
-          {
-            type: "link",
-            icon: <TimelineVertical />,
-            title: "Changelog",
-            link: "https://medusajs.com/changelog",
-          },
-          {
-            type: "link",
-            icon: <QuestionMarkCircle />,
-            title: "Troubleshooting",
-            link: "https://docs.medusajs.com/v2/resources/troubleshooting",
-          },
-          {
-            type: "divider",
-          },
-          {
-            type: "action",
-            title: "Hide Sidebar",
-            icon: <SidebarLeft />,
-            shortcut: `${getOsShortcut()}\\`,
-            action: () => {
-              setDesktopSidebarOpen((prev) => !prev)
-              setIsOpen(false)
-            },
-          },
-          {
-            type: "divider",
-          },
-          {
-            type: "custom",
-            content: <MainNavThemeMenu />,
-          },
-        ]}
+        items={items}
       />
     </div>
   )
diff --git a/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx
index dde6072016..0df8dec7b4 100644
--- a/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx
@@ -4,7 +4,7 @@ import { TriangleDownMini } from "@medusajs/icons"
 import clsx from "clsx"
 import React, { useRef, useState } from "react"
 import { NavigationItemDropdown } from "types"
-import { Menu, useClickOutside } from "../../../.."
+import { Menu } from "../../../.."
 
 type MainNavItemDropdownProps = {
   item: NavigationItemDropdown
@@ -16,15 +16,15 @@ export const MainNavItemDropdown = ({
   isActive,
 }: MainNavItemDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false)
-  const ref = useRef(null)
-
-  useClickOutside({
-    elmRef: ref,
-    onClickOutside: () => setIsOpen(false),
-  })
+  const ref = useRef<HTMLDivElement>(null)
 
   return (
-    <div className={clsx("relative")} ref={ref}>
+    <div
+      className={clsx("relative")}
+      ref={ref}
+      onMouseOver={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
       <div
         className={clsx(
           "cursor-pointer flex gap-docs_0.25 items-center",
@@ -35,21 +35,19 @@ export const MainNavItemDropdown = ({
           ]
         )}
         tabIndex={-1}
-        onClick={() => setIsOpen((prev) => !prev)}
       >
         <span className="text-compact-small-plus">{item.title}</span>
         <TriangleDownMini
           className={clsx("transition-transform", isOpen && "rotate-180")}
         />
       </div>
-      <Menu
-        className={clsx(
-          "absolute top-[calc(100%+4px)] -left-docs_0.75 min-w-[190px]",
-          !isOpen && "hidden"
-        )}
-        items={item.children}
-        itemsOnClick={() => setIsOpen(false)}
-      />
+      <div className="absolute top-full -left-docs_0.75 pt-docs_0.25">
+        <Menu
+          className={clsx("min-w-[190px]", !isOpen && "hidden")}
+          items={item.children}
+          itemsOnClick={() => setIsOpen(false)}
+        />
+      </div>
     </div>
   )
 }
diff --git a/www/packages/docs-ui/src/components/MainNav/Items/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/index.tsx
index e1b8da42de..b40b4558c5 100644
--- a/www/packages/docs-ui/src/components/MainNav/Items/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/Items/index.tsx
@@ -6,14 +6,19 @@ import clsx from "clsx"
 import { MainNavItemLink } from "./Link"
 import { MainNavItemDropdown } from "./Dropdown"
 
-export const MainNavItems = () => {
+type MainNavItemsProps = {
+  className?: string
+}
+
+export const MainNavItems = ({ className }: MainNavItemsProps) => {
   const { navItems, activeItemIndex } = useMainNav()
 
   return (
     <ul
       className={clsx(
         "hidden lg:flex justify-start gap-docs_1 items-center",
-        "my-docs_0.75"
+        "my-docs_0.75",
+        className
       )}
     >
       {navItems.map((item, index) => {
diff --git a/www/packages/docs-ui/src/components/MainNav/index.tsx b/www/packages/docs-ui/src/components/MainNav/index.tsx
index 1b67a4069b..2ce7c9f823 100644
--- a/www/packages/docs-ui/src/components/MainNav/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/index.tsx
@@ -17,33 +17,41 @@ import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 import { MainNavMobileMenu } from "./MobileMenu"
 
-export const MainNav = () => {
+type MainNavProps = {
+  className?: string
+  itemsClassName?: string
+}
+
+export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
   const { reportIssueLink, editDate } = useMainNav()
-  const { setMobileSidebarOpen } = useSidebar()
+  const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
 
   return (
     <div
       className={clsx(
         "flex justify-between items-center",
         "px-docs_1 w-full z-20",
-        "sticky top-0 bg-medusa-bg-base"
+        "sticky top-0 bg-medusa-bg-base",
+        className
       )}
     >
       <div className="flex items-center gap-docs_1">
         <div className="flex items-center gap-[10px]">
-          <Button
-            className="lg:hidden my-docs_0.75 !p-[6.5px]"
-            variant="transparent-clear"
-            onClick={() => setMobileSidebarOpen(true)}
-          >
-            <SidebarLeftIcon />
-          </Button>
+          {isSidebarShown && (
+            <Button
+              className="lg:hidden my-docs_0.75 !p-[6.5px]"
+              variant="transparent-clear"
+              onClick={() => setMobileSidebarOpen(true)}
+            >
+              <SidebarLeftIcon />
+            </Button>
+          )}
           <BorderedIcon
             IconComponent={MedusaIcon}
             iconWrapperClassName="my-[14px]"
           />
         </div>
-        <MainNavItems />
+        <MainNavItems className={itemsClassName} />
       </div>
       <div className="flex items-center gap-docs_0.75 my-docs_0.75">
         <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
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 7a73425005..bfdf2fa836 100644
--- a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
@@ -41,7 +41,7 @@ export const SearchModalOpener = ({
     <Button
       variant="transparent"
       onClick={handleOpen}
-      className="hidden sm:flex !p-[6.5px]"
+      className="flex !p-[6.5px]"
     >
       <MagnifyingGlass className="text-medusa-fg-subtle" />
     </Button>
diff --git a/www/packages/docs-ui/src/components/Search/index.tsx b/www/packages/docs-ui/src/components/Search/index.tsx
index b15c3afa41..70d22299f7 100644
--- a/www/packages/docs-ui/src/components/Search/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/index.tsx
@@ -91,7 +91,7 @@ export const Search = ({
               setFilters(filterOptions.map((option) => option.value))
             }
           }}
-          className="px-docs_1 pt-docs_1 bg-medusa-bg-base"
+          className="px-docs_1 pt-docs_1 bg-medusa-bg-base z-10"
         />
       )}
       <InstantSearch
@@ -101,7 +101,7 @@ export const Search = ({
           preserveSharedStateOnUnmount: true,
         }}
       >
-        <div className={clsx("bg-medusa-bg-base flex")}>
+        <div className={clsx("bg-medusa-bg-base flex z-[1]")}>
           <SearchBox
             classNames={{
               root: clsx(
@@ -113,7 +113,7 @@ export const Search = ({
               input: clsx(
                 "w-full h-full px-docs_1 py-docs_0.75 text-medusa-fg-base",
                 "placeholder:text-medusa-fg-muted bg-medusa-bg-base",
-                "md:rounded-t-docs_xl text-compact-medium",
+                "md:rounded-t-docs_xl text-compact-large sm:text-compact-medium",
                 "appearance-none search-cancel:hidden border-0 active:outline-none focus:outline-none"
               ),
               submit: clsx("absolute top-[18px] left-docs_1 btn-clear p-0"),
@@ -131,18 +131,6 @@ export const Search = ({
             formRef={searchBoxRef}
             loadingIconComponent={() => <SpinnerLoading />}
           />
-          <Button
-            variant="transparent"
-            className={clsx(
-              "bg-medusa-bg-base block md:hidden",
-              "border-0 border-solid",
-              "border-medusa-border-base border-b",
-              "pr-docs_1"
-            )}
-            onClick={() => setIsOpen(false)}
-          >
-            <XMark className="text-medusa-fg-muted" />
-          </Button>
         </div>
         <div className="md:flex-initial h-[calc(100%-95px)] lg:max-h-[calc(100%-140px)] lg:min-h-[calc(100%-140px)]">
           <SearchEmptyQueryBoundary
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 780328c210..d8fe925839 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
@@ -2,7 +2,7 @@
 
 // @refresh reset
 
-import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import React, { useEffect, useMemo, useRef } from "react"
 import { SidebarItemLink as SidebarItemlinkType } from "types"
 import {
   checkSidebarItemVisibility,
@@ -34,7 +34,7 @@ export const SidebarItemLink = ({
   const active = useMemo(() => isLinkActive(item, true), [isLinkActive, item])
   const ref = useRef<HTMLLIElement>(null)
 
-  const newTopCalculator = useCallback(() => {
+  const newTopCalculator = useMemo(() => {
     if (!sidebarRef.current || !ref.current) {
       return 0
     }
@@ -45,7 +45,8 @@ export const SidebarItemLink = ({
     return (
       itemBoundingRect.top -
       (sidebarBoundingRect.top + sidebarTopHeight) +
-      sidebarRef.current.scrollTop
+      sidebarRef.current.scrollTop -
+      10 // remove extra margin just in case
     )
   }, [sidebarTopHeight, sidebarRef, ref])
 
@@ -64,7 +65,7 @@ export const SidebarItemLink = ({
         })
       } else {
         sidebarRef.current.scrollTo({
-          top: newTopCalculator(),
+          top: newTopCalculator,
         })
       }
     }
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 4768378039..604809e3ff 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx
@@ -5,6 +5,7 @@ import { SidebarChild } from "../Child"
 import { InteractiveSidebarItem } from "types"
 import { SidebarTopMobileClose } from "./MobileClose"
 import { DottedSeparator } from "../../.."
+import clsx from "clsx"
 
 export type SidebarTopProps = {
   parentItem?: InteractiveSidebarItem
@@ -13,9 +14,15 @@ export type SidebarTopProps = {
 export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
   function SidebarTop({ parentItem }, ref) {
     return (
-      <div className="pt-docs_0.25">
+      <div
+        className={clsx(
+          "pt-docs_0.25 sticky top-0 z-[5]",
+          "bg-medusa-bg-base lg:bg-medusa-bg-subtle"
+        )}
+        ref={ref}
+      >
         <SidebarTopMobileClose />
-        <div ref={ref}>
+        <div>
           {parentItem && (
             <>
               <SidebarChild item={parentItem} />
diff --git a/www/packages/docs-ui/src/components/Sidebar/index.tsx b/www/packages/docs-ui/src/components/Sidebar/index.tsx
index 4f3ad134dc..306e6c0e88 100644
--- a/www/packages/docs-ui/src/components/Sidebar/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/index.tsx
@@ -3,12 +3,12 @@
 import React, { useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
-import { DottedSeparator, Loading } from "@/components"
+import { Loading } from "@/components"
 import { SidebarItem } from "./Item"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
 import { SidebarTop, SidebarTopProps } from "./Top"
-import useResizeObserver from "@react-hook/resize-observer"
 import { useClickOutside, useKeyboardShortcut } from "@/hooks"
+import useResizeObserver from "@react-hook/resize-observer"
 
 export type SidebarProps = {
   className?: string
@@ -30,10 +30,9 @@ export const Sidebar = ({
     setMobileSidebarOpen,
     staticSidebarItems,
     sidebarRef,
-    sidebarTopHeight,
-    setSidebarTopHeight,
     desktopSidebarOpen,
     setDesktopSidebarOpen,
+    setSidebarTopHeight,
   } = useSidebar()
   useClickOutside({
     elmRef: sidebarWrapperRef,
@@ -92,11 +91,6 @@ export const Sidebar = ({
         ref={sidebarWrapperRef}
       >
         <ul className={clsx("h-full w-full", "flex flex-col")}>
-          <SidebarTop
-            {...sidebarTopProps}
-            parentItem={sidebarItems.parentItem}
-            ref={sidebarTopRef}
-          />
           <SwitchTransition>
             <CSSTransition
               key={sidebarItems.parentItem?.title || "home"}
@@ -110,14 +104,16 @@ export const Sidebar = ({
               <div
                 className={clsx(
                   "overflow-y-scroll clip",
-                  "py-docs_0.75 flex-1"
+                  "pb-docs_0.75 flex-1 max-h-screen"
                 )}
                 ref={sidebarRef}
-                style={{
-                  maxHeight: `calc(100vh - ${sidebarTopHeight}px)`,
-                }}
                 id="sidebar"
               >
+                <SidebarTop
+                  {...sidebarTopProps}
+                  parentItem={sidebarItems.parentItem}
+                  ref={sidebarTopRef}
+                />
                 {/* MOBILE SIDEBAR - keeping this in case we need it in the future */}
                 {/* <div className={clsx("lg:hidden")}>
                   {!sidebarItems.mobile.length && !staticSidebarItems && (
@@ -134,7 +130,7 @@ export const Sidebar = ({
                   {sidebarItems.mobile.length > 0 && <DottedSeparator />}
                 </div> */}
                 {/* DESKTOP SIDEBAR */}
-                <div className="mt-docs_0.75 lg:mt-0">
+                <div className="pt-docs_0.75">
                   {!sidebarItems.default.length && !staticSidebarItems && (
                     <Loading className="px-0" />
                   )}
diff --git a/www/packages/docs-ui/src/components/VerticalCodeTabs/index.tsx b/www/packages/docs-ui/src/components/VerticalCodeTabs/index.tsx
new file mode 100644
index 0000000000..564207e763
--- /dev/null
+++ b/www/packages/docs-ui/src/components/VerticalCodeTabs/index.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+import { CodeBlock, CodeBlockProps } from "../CodeBlock"
+import clsx from "clsx"
+
+export type VerticalCodeTab = {
+  title: string
+  code: CodeBlockProps
+} & Record<string, unknown>
+
+export type VerticalCodeTabsProps = {
+  tabs: VerticalCodeTab[]
+  className?: string
+  selectedTabIndex: number
+  setSelectedTabIndex: (value: number) => void
+}
+
+export const VerticalCodeTabs = ({
+  tabs,
+  className,
+  selectedTabIndex,
+  setSelectedTabIndex,
+}: VerticalCodeTabsProps) => {
+  return (
+    <div
+      className={clsx(
+        "rounded-[20px] bg-medusa-bg-subtle p-docs_0.5",
+        "shadow-elevation-modal dark:shadow-elevation-modal-dark",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_lg bg-medusa-contrast-bg-base h-full",
+          "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
+          "flex flex-col"
+        )}
+      >
+        <div
+          className={clsx(
+            "px-docs_1 py-docs_0.75",
+            "flex gap-[6px] items-center"
+          )}
+        >
+          {new Array(3).fill(0).map((_, index) => (
+            <span
+              className={clsx(
+                "inline-block rounded-full w-[10px] h-[10px]",
+                "bg-medusa-contrast-border-bot border border-medusa-contrast-border-bot"
+              )}
+              key={index}
+            />
+          ))}
+        </div>
+        <div
+          className={clsx(
+            "flex flex-1 gap-[6px] items-start px-[5px] pb-[5px]"
+          )}
+        >
+          <ul className="2xl:w-[180px] flex flex-col gap-[6px] shrink-0">
+            {tabs.map((tab, index) => (
+              <li
+                className={clsx(
+                  "px-docs_0.75 py-[11px]",
+                  "rounded-docs_DEFAULT border border-medusa-contrast-border-bot",
+                  "text-code-body font-monospace cursor-pointer",
+                  selectedTabIndex === index &&
+                    "text-medusa-contrast-fg-primary bg-medusa-contrast-border-bot",
+                  selectedTabIndex !== index &&
+                    "text-medusa-contrast-fg-secondary bg-medusa-contrast-bg-subtle hover:bg-medusa-contrast-border-bot"
+                )}
+                onClick={() => setSelectedTabIndex(index)}
+                key={index}
+              >
+                {tab.title}
+              </li>
+            ))}
+          </ul>
+          <div className="flex-1 h-[388px] max-w-full overflow-hidden rounded-docs_DEFAULT [&_pre]:min-h-full">
+            <CodeBlock
+              {...tabs[selectedTabIndex].code}
+              noCopy={true}
+              noReport={true}
+              forceNoTitle={true}
+              wrapperClassName="h-full !rounded-docs_DEFAULT"
+              className={clsx(
+                "overflow-auto h-full max-h-full !mb-0 !rounded-docs_DEFAULT",
+                "!border !border-medusa-contrast-border-bot"
+              )}
+              innerClassName="h-full"
+              animateTokenHighlights
+              overrideColors={{
+                bg: "bg-medusa-contrast-bg-subtle",
+                innerBg: "bg-medusa-contrast-bg-subtle",
+                lineNumbersBg: "bg-medusa-contrast-bg-subtle",
+                boxShadow: "shadow-none",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts
index 1843422e79..27bc061cd2 100644
--- a/www/packages/docs-ui/src/components/index.ts
+++ b/www/packages/docs-ui/src/components/index.ts
@@ -26,6 +26,7 @@ export * from "./Feedback"
 export * from "./Feedback/Solutions"
 export * from "./Heading"
 export * from "./HooksLoader"
+export * from "./IconHeadline"
 export * from "./Icons"
 export * from "./InlineIcon"
 export * from "./InlineThemeImage"
@@ -73,5 +74,6 @@ export * from "./ThemeImage"
 export * from "./Toggle"
 export * from "./Tooltip"
 export * from "./TypeList"
+export * from "./VerticalCodeTabs"
 export * from "./WorkflowDiagram"
 export * from "./ZoomImg"
diff --git a/www/packages/docs-ui/src/constants.tsx b/www/packages/docs-ui/src/constants.tsx
index bb2e6a93f6..eb3155fd1d 100644
--- a/www/packages/docs-ui/src/constants.tsx
+++ b/www/packages/docs-ui/src/constants.tsx
@@ -7,7 +7,7 @@ export const GITHUB_UI_ISSUES_PREFIX = `https://github.com/medusajs/ui/issues/ne
 export const navDropdownItems: NavigationItem[] = [
   {
     type: "link",
-    path: `/v2`,
+    path: `/v2/learn`,
     title: "Get Started",
     project: "book",
   },
@@ -55,6 +55,11 @@ export const navDropdownItems: NavigationItem[] = [
         title: "UI Library",
         link: "/ui",
       },
+      {
+        type: "link",
+        title: "Admin Components",
+        link: "/v2/resources/admin-components",
+      },
       {
         type: "link",
         title: "Storefront Development",
diff --git a/www/packages/docs-ui/src/layouts/barebone.tsx b/www/packages/docs-ui/src/layouts/barebone.tsx
new file mode 100644
index 0000000000..d31c24c025
--- /dev/null
+++ b/www/packages/docs-ui/src/layouts/barebone.tsx
@@ -0,0 +1,19 @@
+import clsx from "clsx"
+import React from "react"
+
+export type BareboneLayoutProps = {
+  htmlClassName?: string
+  children: React.ReactNode
+}
+
+export const BareboneLayout = ({
+  htmlClassName,
+  children,
+}: BareboneLayoutProps) => {
+  return (
+    <html lang="en" className={clsx("h-full w-full", htmlClassName)}>
+      <head />
+      {children}
+    </html>
+  )
+}
diff --git a/www/packages/docs-ui/src/layouts/index.ts b/www/packages/docs-ui/src/layouts/index.ts
index f950866a74..de9dfe7256 100644
--- a/www/packages/docs-ui/src/layouts/index.ts
+++ b/www/packages/docs-ui/src/layouts/index.ts
@@ -1,3 +1,4 @@
+export * from "./barebone"
 export * from "./root"
 export * from "./tight"
 export * from "./wide"
diff --git a/www/packages/docs-ui/src/layouts/root.tsx b/www/packages/docs-ui/src/layouts/root.tsx
index 9fbac1e12e..640964a017 100644
--- a/www/packages/docs-ui/src/layouts/root.tsx
+++ b/www/packages/docs-ui/src/layouts/root.tsx
@@ -5,47 +5,42 @@ import { Toc } from "../components/Toc"
 import { MainContentLayout, MainContentLayoutProps } from "./main-content"
 
 export type RootLayoutProps = {
-  ProvidersComponent: React.FC<{ children: React.ReactNode }>
+  bodyClassName?: string
   showToc?: boolean
   sidebarProps?: SidebarProps
-  htmlClassName?: string
-  bodyClassName?: string
   showPagination?: boolean
   feedbackComponent?: React.ReactNode
   editComponent?: React.ReactNode
   showBreadcrumbs?: boolean
+  ProvidersComponent: React.FC<{ children: React.ReactNode }>
 } & MainContentLayoutProps
 
 export const RootLayout = ({
-  ProvidersComponent,
-  sidebarProps,
-  htmlClassName,
   bodyClassName,
+  sidebarProps,
   showToc = true,
+  ProvidersComponent,
   ...mainProps
 }: RootLayoutProps) => {
   return (
-    <html lang="en" className={clsx("h-full w-full", htmlClassName)}>
-      <head />
-      <body
-        className={clsx(
-          "bg-medusa-bg-subtle font-base text-medium w-full",
-          "text-medusa-fg-subtle",
-          "h-screen overflow-hidden",
-          "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
-          bodyClassName
-        )}
-      >
-        <RootProviders>
-          <ProvidersComponent>
-            <Sidebar {...sidebarProps} />
-            <div className={clsx("relative", "h-screen", "flex")}>
-              <MainContentLayout {...mainProps} />
-              {showToc && <Toc />}
-            </div>
-          </ProvidersComponent>
-        </RootProviders>
-      </body>
-    </html>
+    <body
+      className={clsx(
+        "bg-medusa-bg-subtle font-base text-medium w-full",
+        "text-medusa-fg-subtle",
+        "h-screen overflow-hidden",
+        "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
+        bodyClassName
+      )}
+    >
+      <RootProviders>
+        <ProvidersComponent>
+          <Sidebar {...sidebarProps} />
+          <div className={clsx("relative", "h-screen", "flex")}>
+            <MainContentLayout {...mainProps} />
+            {showToc && <Toc />}
+          </div>
+        </ProvidersComponent>
+      </RootProviders>
+    </body>
   )
 }
diff --git a/www/packages/docs-ui/src/providers/Search/index.tsx b/www/packages/docs-ui/src/providers/Search/index.tsx
index 2b9430f570..3446463be7 100644
--- a/www/packages/docs-ui/src/providers/Search/index.tsx
+++ b/www/packages/docs-ui/src/providers/Search/index.tsx
@@ -228,7 +228,7 @@ export const SearchProvider = ({
           "!p-0 overflow-hidden relative h-full",
           "flex flex-col justify-between"
         )}
-        modalContainerClassName="sm:h-[480px] sm:max-h-[480px]"
+        modalContainerClassName="!h-[480px] max-h-[480px]"
         open={isOpen}
         onClose={() => setIsOpen(false)}
         passedRef={modalRef}
diff --git a/www/packages/docs-ui/src/providers/Sidebar/index.tsx b/www/packages/docs-ui/src/providers/Sidebar/index.tsx
index 835e3b2650..4d35acb38d 100644
--- a/www/packages/docs-ui/src/providers/Sidebar/index.tsx
+++ b/www/packages/docs-ui/src/providers/Sidebar/index.tsx
@@ -61,6 +61,7 @@ export type SidebarContextType = {
   updatePersistedCategoryState: (title: string, opened: boolean) => void
   getPersistedCategoryState: (title: string) => boolean | undefined
   persistState: boolean
+  isSidebarShown: boolean
 } & SidebarStyleOptions
 
 export const SidebarContext = createContext<SidebarContextType | null>(null)
@@ -280,6 +281,13 @@ export const SidebarProvider = ({
   const getResolvedScrollableElement = useCallback(() => {
     return scrollableElement || window
   }, [scrollableElement])
+  const isSidebarShown = useMemo(() => {
+    if (!isBrowser) {
+      return true
+    }
+
+    return document.getElementsByTagName("aside").length > 0
+  }, [isBrowser])
 
   const isItemLoaded = useCallback(
     (path: string) => {
@@ -589,6 +597,7 @@ export const SidebarProvider = ({
         updatePersistedCategoryState,
         getPersistedCategoryState,
         persistState,
+        isSidebarShown,
       }}
     >
       {children}
diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
index 13e50a8cfe..ed9e641216 100644
--- a/www/packages/tailwind/base.tailwind.config.js
+++ b/www/packages/tailwind/base.tailwind.config.js
@@ -185,6 +185,14 @@ module.exports = {
               hover: "#505052",
             },
           },
+          alpha: {
+            white: {
+              alpha: {
+                6: "var(--docs-alpha-white-alpha-6)",
+                12: "var(--docs-alpha-white-alpha-12)",
+              },
+            },
+          },
         },
       },
       boxShadow: {
@@ -340,7 +348,7 @@ module.exports = {
         h3: [
           "16px",
           {
-            lineHeight: "24px",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
@@ -678,6 +686,14 @@ module.exports = {
             visibility: "hidden",
           },
         },
+        growWidth: {
+          from: {
+            width: 0,
+          },
+          to: {
+            width: "100%",
+          },
+        },
       },
       animation: {
         fadeIn: "fadeIn 500ms",
@@ -699,6 +715,7 @@ module.exports = {
         minimize: "minimize 500ms",
         maximize: "maximize 500ms",
         flash: "flash 1500ms 1",
+        growWidth: "growWidth 500ms",
       },
       scrollMargin: {
         56: "56px",
diff --git a/www/packages/tailwind/theme-presets.js b/www/packages/tailwind/theme-presets.js
index 7ea1366eb0..05fd0b6b7b 100644
--- a/www/packages/tailwind/theme-presets.js
+++ b/www/packages/tailwind/theme-presets.js
@@ -99,7 +99,10 @@ const light = {
   "--docs-contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
   "--docs-contrast-border-base": "rgba(255, 255, 255, 0.16)",
   "--docs-contrast-border-top": "rgba(9, 9, 11, 1)",
-  "--docs-contrast-border-bot": "rgba(255, 255, 255, 0.1)",
+  "--docs-contrast-border-bot": "rgba(255, 255, 255, 0.10)",
+
+  "--docs-alpha-white-alpha-6": "rgba(255, 255, 255, 0.06)",
+  "--docs-alpha-white-alpha-12": "rgba(255, 255, 255, 0.12)",
 }
 
 const dark = {
diff --git a/www/yarn.lock b/www/yarn.lock
index 8d62faaf16..d44185bac3 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -1400,6 +1400,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@medusajs/icons@npm:rc":
+  version: 2.0.0-rc-20241003153304
+  resolution: "@medusajs/icons@npm:2.0.0-rc-20241003153304"
+  peerDependencies:
+    react: ^16.x || ^17.x || ^18.x
+  checksum: 6859af30f227ac3374e111e679fd90311e571ae72e6aedc690b3c324b42ba9082d69d675533fae9aa221b0aeccec4b51ee9535203f92d014ba82684f56a0ec7b
+  languageName: node
+  linkType: hard
+
 "@medusajs/ui-preset@npm:^1.1.2":
   version: 1.1.2
   resolution: "@medusajs/ui-preset@npm:1.1.2"
@@ -5898,6 +5907,7 @@ __metadata:
   dependencies:
     "@mdx-js/loader": ^3.0.0
     "@mdx-js/react": ^3.0.0
+    "@medusajs/icons": rc
     "@next/mdx": ^14.2.14
     "@types/mdx": ^2.0.10
     "@types/node": ^20
@@ -7131,7 +7141,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "docs-ui@workspace:packages/docs-ui"
   dependencies:
-    "@medusajs/icons": preview
+    "@medusajs/icons": rc
     "@medusajs/ui": ^3.0.0
     "@octokit/request": ^8.1.1
     "@react-hook/resize-observer": ^1.2.6