diff --git a/bun.lock b/bun.lock
index e9306aaa..244ae2cb 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,7 +30,7 @@
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
         "@radix-ui/react-icons": "^1.3.2",
-        "@raystack/apsara": "1.0.0-rc.4",
+        "@raystack/apsara": "1.0.0-rc.7",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
         "chalk": "^5.6.2",
@@ -249,7 +249,7 @@
 
     "@radix-ui/react-icons": ["@radix-ui/react-icons@1.3.2", "", { "peerDependencies": { "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc" } }, "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g=="],
 
-    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.4", "", { "dependencies": { "@base-ui/react": "^1.3.0", "@base-ui/utils": "^0.2.6", "@radix-ui/react-icons": "^1.3.2", "@tanstack/match-sorter-utils": "^8.8.4", "@tanstack/react-table": "^8.9.2", "@tanstack/react-virtual": "^3.13.13", "@tanstack/table-core": "^8.9.2", "class-variance-authority": "^0.7.1", "color": "^5.0.0", "dayjs": "^1.11.11", "prism-react-renderer": "^2.4.1", "react-day-picker": "^9.6.7" }, "peerDependencies": { "@types/react": "^19", "react": "^19", "react-dom": "^19" }, "optionalPeers": ["@types/react"] }, "sha512-RYt1URkQjfQINYGoN9r4mkmm4Vvul1UKkqiUqN+EoNgl2BNK0fPJq+x3pmW1RDardjsxgeT4AmdZfsuumVn+uw=="],
+    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.7", "", { "dependencies": { "@base-ui/react": "^1.4.1", "@base-ui/utils": "^0.2.6", "@radix-ui/react-icons": "^1.3.2", "@tanstack/match-sorter-utils": "^8.8.4", "@tanstack/react-table": "^8.9.2", "@tanstack/react-virtual": "^3.13.13", "@tanstack/table-core": "^8.9.2", "class-variance-authority": "^0.7.1", "color": "^5.0.0", "dayjs": "^1.11.11", "prism-react-renderer": "^2.4.1", "react-day-picker": "^9.6.7" }, "peerDependencies": { "@types/react": "^19", "react": "^19", "react-dom": "^19" }, "optionalPeers": ["@types/react"] }, "sha512-Rtg2BaehnAh1ypDmA5PEEkx5wNDnwZHaxoe+gBA7dkZB5YYaSiIdL1MPaGA7D2dahVl8aZ82vklfm0c9+xyRqw=="],
 
     "@raystack/chronicle": ["@raystack/chronicle@workspace:packages/chronicle"],
 
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index 3e2b14d9..88f4e622 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -47,7 +47,7 @@
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "1.0.0-rc.4",
+    "@raystack/apsara": "1.0.0-rc.7",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",
diff --git a/packages/chronicle/src/components/api/playground-dialog.tsx b/packages/chronicle/src/components/api/playground-dialog.tsx
index eb329d8e..b2d7ec7e 100644
--- a/packages/chronicle/src/components/api/playground-dialog.tsx
+++ b/packages/chronicle/src/components/api/playground-dialog.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react'
 import type { OpenAPIV3 } from 'openapi-types'
-import { Dialog, Button, Badge, IconButton, InputField, CopyButton, Select, Menu } from '@raystack/apsara'
+import { Dialog, Button, Badge, IconButton, Input, CopyButton, Select, Menu } from '@raystack/apsara'
 import { Cross2Icon, ChevronDownIcon, ChevronUpIcon, PlayIcon, PlusIcon } from '@radix-ui/react-icons'
 import { CounterClockwiseClockIcon, CodeIcon } from '@radix-ui/react-icons'
 import { MethodBadge } from '@/components/api/method-badge'
@@ -263,13 +263,13 @@ export function PlaygroundDialog({
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Username</span>
                             <div className={styles.fieldInput}>
-                              <InputField size="small" placeholder="Enter username" value={basicUser} onChange={(e) => setBasicUser(e.target.value)} />
+                              <Input size="small" placeholder="Enter username" value={basicUser} onValueChange={setBasicUser} />
                             </div>
                           </div>
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Password</span>
                             <div className={styles.fieldInput}>
-                              <InputField size="small" type="password" placeholder="Enter password" value={basicPass} onChange={(e) => setBasicPass(e.target.value)} />
+                              <Input size="small" type="password" placeholder="Enter password" value={basicPass} onValueChange={setBasicPass} />
                             </div>
                           </div>
                         </>
@@ -277,7 +277,7 @@ export function PlaygroundDialog({
                         <div className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{currentScheme.headerName}</span>
                           <div className={styles.fieldInput}>
-                            <InputField size="small" placeholder={currentScheme.placeholder} value={authToken} onChange={(e) => setAuthToken(e.target.value)} />
+                            <Input size="small" placeholder={currentScheme.placeholder} value={authToken} onValueChange={setAuthToken} />
                           </div>
                         </div>
                       ) : null}
@@ -285,7 +285,7 @@ export function PlaygroundDialog({
                         <div key={f.name} className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{f.name}</span>
                           <div className={styles.fieldInput}>
-                            <InputField size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onChange={(e) => setHeaderValues({ ...headerValues, [f.name]: e.target.value })} />
+                            <Input size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onValueChange={(v) => setHeaderValues({ ...headerValues, [f.name]: v })} />
                           </div>
                         </div>
                       ))}
@@ -307,11 +307,11 @@ export function PlaygroundDialog({
                     <div key={f.name} className={styles.fieldRow}>
                       <span className={styles.fieldLabel}>{f.name}</span>
                       <div className={styles.fieldInput}>
-                        <InputField
+                        <Input
                           size="small"
                           placeholder="Enter value"
                           value={pathValues[f.name] ?? ''}
-                          onChange={(e) => setPathValues({ ...pathValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setPathValues({ ...pathValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -332,11 +332,11 @@ export function PlaygroundDialog({
                     <div key={f.name} className={styles.fieldRow}>
                       <span className={styles.fieldLabel}>{f.name}</span>
                       <div className={styles.fieldInput}>
-                        <InputField
+                        <Input
                           size="small"
                           placeholder={f.description ?? 'Enter value'}
                           value={queryValues[f.name] ?? ''}
-                          onChange={(e) => setQueryValues({ ...queryValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setQueryValues({ ...queryValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -494,13 +494,13 @@ function BodyFieldRow({ field, value, onChange }: {
         {items.map((item, i) => (
           <div key={i} className={styles.arrayItemRow}>
             <div className={styles.fieldInput}>
-              <InputField
+              <Input
                 size="small"
                 placeholder={`${field.name}[${i}]`}
                 value={String(item)}
-                onChange={(e) => {
+                onValueChange={(v) => {
                   const updated = [...items]
-                  updated[i] = e.target.value
+                  updated[i] = v
                   onChange(updated)
                 }}
               />
@@ -539,11 +539,11 @@ function BodyFieldRow({ field, value, onChange }: {
     <div className={styles.fieldRow}>
       <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
       <div className={styles.fieldInput}>
-        <InputField
+        <Input
           size="small"
           placeholder={field.description ?? 'Enter value'}
           value={String(value ?? '')}
-          onChange={(e) => onChange(e.target.value)}
+          onValueChange={(v) => onChange(v)}
         />
       </div>
     </div>
diff --git a/packages/chronicle/src/components/common/breadcrumb.tsx b/packages/chronicle/src/components/common/breadcrumb.tsx
deleted file mode 100644
index a5cb8999..00000000
--- a/packages/chronicle/src/components/common/breadcrumb.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Breadcrumb } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/button.tsx b/packages/chronicle/src/components/common/button.tsx
deleted file mode 100644
index e2238535..00000000
--- a/packages/chronicle/src/components/common/button.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Button } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/code-block.tsx b/packages/chronicle/src/components/common/code-block.tsx
deleted file mode 100644
index 977a1cb3..00000000
--- a/packages/chronicle/src/components/common/code-block.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { CodeBlock } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/dialog.tsx b/packages/chronicle/src/components/common/dialog.tsx
deleted file mode 100644
index 6652b4ef..00000000
--- a/packages/chronicle/src/components/common/dialog.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Dialog } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/index.ts b/packages/chronicle/src/components/common/index.ts
deleted file mode 100644
index f2abfd49..00000000
--- a/packages/chronicle/src/components/common/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { Sidebar } from './sidebar'
-export { Table } from './table'
-export { Dialog } from './dialog'
-export { InputField } from './input-field'
-export { Tabs } from './tabs'
-export { Breadcrumb } from './breadcrumb'
-export { Button } from './button'
-export { CodeBlock } from './code-block'
-export { Callout } from './callout'
-export { Switch } from './switch'
diff --git a/packages/chronicle/src/components/common/input-field.tsx b/packages/chronicle/src/components/common/input-field.tsx
deleted file mode 100644
index c0a42306..00000000
--- a/packages/chronicle/src/components/common/input-field.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { InputField } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/sidebar.tsx b/packages/chronicle/src/components/common/sidebar.tsx
deleted file mode 100644
index b78768a7..00000000
--- a/packages/chronicle/src/components/common/sidebar.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Sidebar } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/switch.tsx b/packages/chronicle/src/components/common/switch.tsx
deleted file mode 100644
index 8907ad9c..00000000
--- a/packages/chronicle/src/components/common/switch.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Switch } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/table.tsx b/packages/chronicle/src/components/common/table.tsx
deleted file mode 100644
index bcea7ae7..00000000
--- a/packages/chronicle/src/components/common/table.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Table } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/tabs.tsx b/packages/chronicle/src/components/common/tabs.tsx
deleted file mode 100644
index 22f41065..00000000
--- a/packages/chronicle/src/components/common/tabs.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Tabs } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/mdx/link.tsx b/packages/chronicle/src/components/mdx/link.tsx
index 73cccc47..df750119 100644
--- a/packages/chronicle/src/components/mdx/link.tsx
+++ b/packages/chronicle/src/components/mdx/link.tsx
@@ -1,12 +1,10 @@
 import { Link as ApsaraLink } from '@raystack/apsara';
-import type { ComponentProps, MouseEvent } from 'react';
-import { useNavigate } from 'react-router';
+import type { ComponentProps } from 'react';
+import { Link as RouterLink } from 'react-router';
 
 type LinkProps = ComponentProps<'a'>;
 
-export function Link({ href, children, onClick: onClickProp, ...props }: LinkProps) {
-  const navigate = useNavigate();
-
+export function Link({ href, children, ...props }: LinkProps) {
   if (!href) {
     return <span {...props}>{children}</span>;
   }
@@ -16,12 +14,7 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro
 
   if (isExternal) {
     return (
-      <ApsaraLink
-        href={href}
-        target='_blank'
-        rel='noopener noreferrer'
-        {...props}
-      >
+      <ApsaraLink href={href} external {...props}>
         {children}
       </ApsaraLink>
     );
@@ -35,27 +28,8 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro
     );
   }
 
-  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    if (
-      e.defaultPrevented ||
-      e.button !== 0 ||
-      e.metaKey ||
-      e.ctrlKey ||
-      e.shiftKey ||
-      e.altKey
-    ) {
-      return;
-    }
-
-    onClickProp?.(e);
-    if (e.defaultPrevented) return;
-
-    e.preventDefault();
-    navigate(href);
-  };
-
   return (
-    <ApsaraLink href={href} {...props} onClick={onClick}>
+    <ApsaraLink render={<RouterLink to={href} />} {...props}>
       {children}
     </ApsaraLink>
   );
diff --git a/packages/chronicle/src/themes/default/ContentDirButtons.tsx b/packages/chronicle/src/themes/default/ContentDirButtons.tsx
index c948b945..dc68e7ff 100644
--- a/packages/chronicle/src/themes/default/ContentDirButtons.tsx
+++ b/packages/chronicle/src/themes/default/ContentDirButtons.tsx
@@ -19,7 +19,7 @@ export function ContentDirButtons() {
   const { visible, overflow } = splitContentButtons(entries, MAX_VISIBLE);
 
   return (
-    <Flex gap='small' align='center'>
+    <Flex gap={3} align='center'>
       {visible.map(entry => (
         <RouterLink
           key={entry.href}
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 3d69e3b0..5df8d577 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -22,6 +22,7 @@ import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir } from '@/lib/navigation';
 import { usePageContext } from '@/lib/page-context';
 import type { Node, Root } from 'fumadocs-core/page-tree';
+import { NodeType } from '@/lib/tree-utils';
 import type { ThemeLayoutProps } from '@/types';
 import styles from './Layout.module.css';
 import { OpenInAI } from './OpenInAI';
@@ -117,7 +118,7 @@ export function Layout({
           >
             <Sidebar.Header className={styles.sidebarHeader}>
               <SidebarLogo config={config} />
-              <Flex gap='small' align='center'>
+              <Flex gap={3} align='center'>
                 {config.search?.enabled && <Search />}
                 <ClientThemeSwitcher size={16} />
               </Flex>
@@ -186,8 +187,8 @@ export function Layout({
           <div className={styles.cardWrapper}>
             <div className={styles.card}>
               <nav className={styles.subNav}>
-                <Flex align='center' gap='small' className={styles.subNavLeft}>
-                  <Flex align='center' gap='extra-small'>
+                <Flex align='center' gap={3} className={styles.subNavLeft}>
+                  <Flex align='center' gap={2}>
                     <IconButton
                       size={2}
                       disabled={!prev}
@@ -207,7 +208,7 @@ export function Layout({
                   </Flex>
                   <Breadcrumbs slug={slug} tree={tree} />
                 </Flex>
-                <Flex align='center' gap='small'>
+                <Flex align='center' gap={3}>
                   {isApiRoute && <TestRequestButton />}
                   {isApiRoute && <ViewDocsButton />}
                   <OpenInAI />
@@ -224,6 +225,15 @@ export function Layout({
   );
 }
 
+function hasActiveDescendant(node: Node, pathname: string): boolean {
+  if (node.type === NodeType.Page) return pathname === node.url;
+  if (node.type === NodeType.Folder) {
+    if (node.index && pathname === node.index.url) return true;
+    return node.children.some(child => hasActiveDescendant(child, pathname));
+  }
+  return false;
+}
+
 function SidebarNode({
   item,
   pathname,
@@ -240,6 +250,7 @@ function SidebarNode({
   if (item.type === 'folder') {
     if (depth > 1) return null;
     const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
+    const hasActiveChild = hasActiveDescendant(item, pathname);
     return (
       <Sidebar.Group
         className={styles.navGroup}
@@ -247,6 +258,7 @@ function SidebarNode({
         label={item.name?.toString() ?? ''}
         leadingIcon={icon ?? undefined}
         collapsible={depth === 1}
+        defaultOpen={hasActiveChild}
         classNames={{
           items: styles.groupItems,
           header: styles.navGroupHeader,
@@ -305,7 +317,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
 
   if (item.type === 'folder') {
     return (
-      <Flex direction='column' gap='small' className={styles.apiGroup}>
+      <Flex direction='column' gap={3} className={styles.apiGroup}>
         <span className={styles.apiGroupLabel}>{item.name?.toString()}</span>
         <Flex direction='column'>
           {item.children.map((child, i) => (
@@ -329,7 +341,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
   return (
     <Flex
       align='center'
-      gap='small'
+      gap={3}
       className={`${styles.apiItem} ${isActive ? styles.apiItemActive : ''}`}
       render={<RouterLink to={href} />}
     >
diff --git a/packages/chronicle/src/themes/default/VersionSwitcher.tsx b/packages/chronicle/src/themes/default/VersionSwitcher.tsx
index bdfc669f..88e72c05 100644
--- a/packages/chronicle/src/themes/default/VersionSwitcher.tsx
+++ b/packages/chronicle/src/themes/default/VersionSwitcher.tsx
@@ -28,7 +28,7 @@ export function VersionSwitcher() {
           />
         }
       >
-        <Flex gap='small' align='center'>
+        <Flex gap={3} align='center'>
           {active?.label ?? 'Version'}
           {active?.badge ? (
             <Badge variant={active.badge.variant} size='micro'>
@@ -43,7 +43,7 @@ export function VersionSwitcher() {
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
-            <Flex gap='small' align='center'>
+            <Flex gap={3} align='center'>
               {v.label}
               {v.badge ? (
                 <Badge variant={v.badge.variant} size='micro'>
diff --git a/packages/chronicle/src/themes/paper/VersionSwitcher.tsx b/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
index 35dbdfa9..312058f8 100644
--- a/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
+++ b/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
@@ -29,7 +29,7 @@ export function VersionSwitcher() {
           />
         }
       >
-        <Flex gap='small' align='center' justify='start'>
+        <Flex gap={3} align='center' justify='start'>
           {active?.label ?? 'Version'}
           {active?.badge ? (
             <Badge variant={active.badge.variant} size='micro'>
@@ -44,7 +44,7 @@ export function VersionSwitcher() {
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
-            <Flex gap='small' align='center'>
+            <Flex gap={3} align='center'>
               {v.label}
               {v.badge ? (
                 <Badge variant={v.badge.variant} size='micro'>