diff --git a/www/apps/resources/app/storefront-development/page.mdx b/www/apps/resources/app/storefront-development/page.mdx
index 09e46b719345d..37dee4d7c4aae 100644
--- a/www/apps/resources/app/storefront-development/page.mdx
+++ b/www/apps/resources/app/storefront-development/page.mdx
@@ -6,8 +6,18 @@ export const metadata = {
 
 # {metadata.title}
 
-This section of the documentation holds guides to help you build a storefront for your Medusa application.
+The Medusa application is made up of a Node.js service and an admin dashboard. The storefront is installed, built, and hosted separately from the Medusa application, providing you with the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience. 
 
-<ChildDocs onlyTopLevel={true} showItems={["Tips", "Publishable API Key"]} />
+<Note>
 
-<ChildDocs hideItems={["Tips", "Publishable API Key"]} />
\ No newline at end of file
+Learn more about Medusa's architecture in [this documentation](!docs!/learn/introduction/architecture).
+
+</Note>
+
+You can build your storefront from scratch, or built it on top of the [Next.js Starter storefront](../nextjs-starter/page.mdx). This section of the documentation provides guides to help you build a storefront from scratch for your Medusa application.
+
+<ChildDocs showItems={["General"]} />
+
+---
+
+<ChildDocs hideItems={["General"]} />
diff --git a/www/apps/resources/generated/edit-dates.mjs b/www/apps/resources/generated/edit-dates.mjs
index ad3d8eb40c54a..04af89cc37da9 100644
--- a/www/apps/resources/generated/edit-dates.mjs
+++ b/www/apps/resources/generated/edit-dates.mjs
@@ -193,7 +193,7 @@ export const generatedEditDates = {
   "app/storefront-development/regions/store-retrieve-region/page.mdx": "2024-09-11T10:07:42.887Z",
   "app/storefront-development/regions/page.mdx": "2024-06-09T15:19:09+02:00",
   "app/storefront-development/tips/page.mdx": "2024-10-22T11:01:01.298Z",
-  "app/storefront-development/page.mdx": "2024-06-09T15:19:09+02:00",
+  "app/storefront-development/page.mdx": "2024-12-10T09:23:20.666Z",
   "app/troubleshooting/cors-errors/page.mdx": "2024-05-03T17:36:38+03:00",
   "app/troubleshooting/create-medusa-app-errors/page.mdx": "2024-07-11T10:29:13+03:00",
   "app/troubleshooting/database-errors/page.mdx": "2024-05-03T17:36:38+03:00",
diff --git a/www/apps/resources/generated/sidebar.mjs b/www/apps/resources/generated/sidebar.mjs
index 311cb88e30b25..cc608e9824d14 100644
--- a/www/apps/resources/generated/sidebar.mjs
+++ b/www/apps/resources/generated/sidebar.mjs
@@ -8092,21 +8092,26 @@ export const generatedSidebar = [
       {
         "loaded": true,
         "isPathHref": true,
-        "type": "link",
-        "path": "/storefront-development/tips",
-        "title": "Tips",
-        "children": []
-      },
-      {
-        "loaded": true,
-        "isPathHref": true,
-        "type": "link",
-        "path": "/storefront-development/publishable-api-keys",
-        "title": "Publishable API Key",
-        "children": []
-      },
-      {
-        "type": "separator"
+        "type": "category",
+        "title": "General",
+        "children": [
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/storefront-development/tips",
+            "title": "Tips",
+            "children": []
+          },
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/storefront-development/publishable-api-keys",
+            "title": "Publishable API Key",
+            "children": []
+          }
+        ]
       },
       {
         "loaded": true,
diff --git a/www/apps/resources/sidebar.mjs b/www/apps/resources/sidebar.mjs
index 7793db3da8906..dae284adf76cc 100644
--- a/www/apps/resources/sidebar.mjs
+++ b/www/apps/resources/sidebar.mjs
@@ -1818,17 +1818,20 @@ export const sidebar = sidebarAttachHrefCommonOptions([
     isChildSidebar: true,
     children: [
       {
-        type: "link",
-        path: "/storefront-development/tips",
-        title: "Tips",
-      },
-      {
-        type: "link",
-        path: "/storefront-development/publishable-api-keys",
-        title: "Publishable API Key",
-      },
-      {
-        type: "separator",
+        type: "category",
+        title: "General",
+        children: [
+          {
+            type: "link",
+            path: "/storefront-development/tips",
+            title: "Tips",
+          },
+          {
+            type: "link",
+            path: "/storefront-development/publishable-api-keys",
+            title: "Publishable API Key",
+          },
+        ],
       },
       {
         type: "category",
diff --git a/www/packages/docs-ui/src/components/ChildDocs/index.tsx b/www/packages/docs-ui/src/components/ChildDocs/index.tsx
index a723e81e388e9..9e3e23563f7cb 100644
--- a/www/packages/docs-ui/src/components/ChildDocs/index.tsx
+++ b/www/packages/docs-ui/src/components/ChildDocs/index.tsx
@@ -4,6 +4,9 @@ import React, { useMemo } from "react"
 import { Card, CardList, H2, useSidebar } from "../.."
 import { InteractiveSidebarItem, SidebarItem, SidebarItemLink } from "types"
 import slugify from "slugify"
+import { MDXComponents } from "../.."
+
+const Hr = MDXComponents["hr"] as () => React.JSX.Element
 
 type ChildDocsProps = {
   onlyTopLevel?: boolean
@@ -148,8 +151,9 @@ export const ChildDocs = ({
     )
   }
 
-  const getAllLevelsElms = (items?: SidebarItem[]) =>
-    filterNonInteractiveItems(items).map((item, key) => {
+  const getAllLevelsElms = (items?: SidebarItem[]) => {
+    const filteredItems = filterNonInteractiveItems(items)
+    return filteredItems.map((item, key) => {
       const itemChildren = getChildrenForLevel(item)
       const HeadingComponent = itemChildren?.length ? H2 : undefined
 
@@ -170,6 +174,7 @@ export const ChildDocs = ({
                   })) || []
                 }
               />
+              {key !== filteredItems.length - 1 && <Hr />}
             </>
           )}
           {!HeadingComponent && item.type === "link" && (
@@ -178,6 +183,7 @@ export const ChildDocs = ({
         </React.Fragment>
       )
     })
+  }
 
   const getElms = (items?: SidebarItem[]) => {
     return onlyTopLevel ? getTopLevelElms(items) : getAllLevelsElms(items)