diff --git a/packages/zudoku/src/config/validators/SidebarSchema.ts b/packages/zudoku/src/config/validators/SidebarSchema.ts
index adc22bd8..ed978dbc 100644
--- a/packages/zudoku/src/config/validators/SidebarSchema.ts
+++ b/packages/zudoku/src/config/validators/SidebarSchema.ts
@@ -32,6 +32,7 @@ export type SidebarItemCategory = Omit<
   items: SidebarItem[];
   link?: SidebarItemCategoryLinkDoc;
   icon?: LucideIcon | string;
+  apiReference?: boolean;
 };
 
 export type SidebarItem =
diff --git a/packages/zudoku/src/config/validators/validate.ts b/packages/zudoku/src/config/validators/validate.ts
index aa8db46d..ba401e71 100644
--- a/packages/zudoku/src/config/validators/validate.ts
+++ b/packages/zudoku/src/config/validators/validate.ts
@@ -43,6 +43,7 @@ const ThemeSchema = z
 const ApiConfigSchema = z.object({
   server: z.string().optional(),
   navigationId: z.string().optional(),
+  defaultCollapsed: z.boolean().optional(),
 });
 
 const ApiSchema = z.union([
diff --git a/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx b/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx
index 2f2a27ae..debc2b98 100644
--- a/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx
+++ b/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx
@@ -1,10 +1,11 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
@@ -27,6 +28,7 @@ export const SidebarCategory = ({
   );
   const [open, setOpen] = useState(isDefaultOpen);
   const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
+  const { activeAnchor } = useViewportAnchor();
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -36,6 +38,25 @@ export const SidebarCategory = ({
     }
   }, [isCategoryOpen]);
 
+  const categoryLabel = useMemo(
+    () => category.label.toLowerCase(),
+    [category.label],
+  );
+
+  // this is useful when sidebar is collapsed and then user scrolls to an anchor link in the content then the sidebar should open to show the active category
+  useEffect(() => {
+    if (!activeAnchor) return;
+    if (hasInteracted) return;
+
+    // if this category is not part of the api reference then return as we don't want to close-open on scroll for other documentation
+    if (!category.apiReference) return;
+
+    const currentActiveCategory = activeAnchor.split("-")[0];
+    const shouldBeOpen = currentActiveCategory === categoryLabel;
+
+    setOpen(shouldBeOpen);
+  }, [activeAnchor, category.apiReference, categoryLabel, hasInteracted]);
+
   const ToggleButton = isCollapsible && (
     <button
       type="button"
@@ -116,8 +137,8 @@ export const SidebarCategory = ({
       </Collapsible.Trigger>
       <Collapsible.Content
         className={cn(
-          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
-          hasInteracted && "CollapsibleContent",
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle or the category is collapsed (if it was collapsed by default then while scrolling to an anchor link in the content it should animate as well)
+          (hasInteracted || category.collapsed) && "CollapsibleContent",
         )}
       >
         <ul className="mt-1 border-l ms-0.5">
diff --git a/packages/zudoku/src/lib/plugins/openapi/index.tsx b/packages/zudoku/src/lib/plugins/openapi/index.tsx
index a3193847..22726730 100644
--- a/packages/zudoku/src/lib/plugins/openapi/index.tsx
+++ b/packages/zudoku/src/lib/plugins/openapi/index.tsx
@@ -163,7 +163,7 @@ export const openApiPlugin = (
           type: "category",
           label: tag.name || "Other endpoints",
           collapsible: true,
-          collapsed: false,
+          collapsed: config.defaultCollapsed ?? false,
           items: tag.operations.map((operation) => ({
             type: "link",
             label: operation.summary ?? operation.path,
@@ -173,6 +173,7 @@ export const openApiPlugin = (
               color: MethodColorMap[operation.method.toLowerCase()],
             },
           })),
+          apiReference: true,
         }));
 
       categories.unshift({
diff --git a/packages/zudoku/src/lib/plugins/openapi/interfaces.ts b/packages/zudoku/src/lib/plugins/openapi/interfaces.ts
index a718cb94..8c045f2c 100644
--- a/packages/zudoku/src/lib/plugins/openapi/interfaces.ts
+++ b/packages/zudoku/src/lib/plugins/openapi/interfaces.ts
@@ -6,5 +6,6 @@ type OasSource =
 export type OasPluginConfig = {
   server?: string;
   navigationId?: string;
+  defaultCollapsed?: boolean;
   skipPreload?: boolean;
 } & OasSource;
diff --git a/packages/zudoku/src/vite/dev-server.ts b/packages/zudoku/src/vite/dev-server.ts
index b2836d53..28ac666b 100644
--- a/packages/zudoku/src/vite/dev-server.ts
+++ b/packages/zudoku/src/vite/dev-server.ts
@@ -44,10 +44,12 @@ export class DevServer {
     const graphql = createGraphQLServer({
       graphqlEndpoint: "/__z/graphql",
     });
+
     const proxiedEntryClientPath = path.join(
       vite.config.base,
       "/__z/entry.client.tsx",
     );
+
     app.use(graphql.graphqlEndpoint, graphql);
     app.use(proxiedEntryClientPath, async (_req, res) => {
       const transformed = await vite.transformRequest(getAppClientEntryPath());