diff --git a/apps/www/package.json b/apps/www/package.json
index 9c4f1b642..d09fbbc7e 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -34,7 +34,7 @@
     "remark-gfm": "^4.0.1",
     "remark-mdx": "^3.1.0",
     "unist-util-visit": "^5.0.0",
-    "zod": "^3.24.2"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@raystack/tools-config": "workspace:*",
diff --git a/apps/www/public/assets/logo.png b/apps/www/public/assets/logo.png
deleted file mode 100644
index c4be1ab12..000000000
Binary files a/apps/www/public/assets/logo.png and /dev/null differ
diff --git a/apps/www/public/assets/logo.svg b/apps/www/public/assets/logo.svg
new file mode 100644
index 000000000..4c3aafa6b
--- /dev/null
+++ b/apps/www/public/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 608 624"><path d="M257.5642 183.62387c10.73518-21.6205 21.31477-42.89873 31.8754-64.1864 2.43879-4.91603 4.81144-9.8649 7.21702-14.79741.64593-1.32442.98874-3.07191 2.76977-3.23405 2.10706-.1918 2.65988 1.69148 3.38815 3.1458 6.55576 13.09145 13.16437 26.15725 19.61017 39.30279 12.08805 24.65218 23.97086 49.40541 36.1345 74.02002 16.7268 33.8487 33.66528 67.59273 50.45513 101.41035 11.16053 22.47925 22.26984 44.98429 33.31095 67.5224 12.36972 25.25028 24.63165 50.5534 36.9534 75.82721 2.03991 4.18411 4.17321 8.3227 6.21383 12.50647 1.90393 3.90357 1.2395 5.00665-3.17825 5.16968-2.66281.09827-5.33258-.00702-7.99902.00998-28.66028.18292-57.32044.39123-85.98084.54715-8.15588.04437-16.29816-.95624-24.47308-.19821-2.64936.24563-4.65882-.90744-5.95758-3.57157-11.0709-22.70913-22.2113-45.38464-33.40357-68.03433-7.96087-16.11035-16.07147-32.14664-24.04776-48.24945-10.10891-20.40839-20.18103-40.8352-30.21087-61.28256-10.8389-22.09665-21.59067-44.23603-32.43657-66.32921-1.39498-2.84157-1.9846-5.42377-.44101-8.5073 6.77316-13.5305 13.37428-27.14713 20.20024-41.07136M237.24628 431.81308c-1.3453 28.61194-24.4268 52.65018-52.42572 57.81024-32.33727 5.95963-60.57309-14.4126-69.8688-36.23022-15.59466-36.6016 2.4058-78.30615 41.301-88.65128 39.63489-10.5419 74.45119 14.74963 80.7072 52.12878.78774 4.70667.22788 9.63883.28632 14.94248"/></svg>
diff --git a/apps/www/source.config.ts b/apps/www/source.config.ts
index 1e0978753..c8b25e1df 100644
--- a/apps/www/source.config.ts
+++ b/apps/www/source.config.ts
@@ -1,6 +1,4 @@
 import * as path from 'node:path';
-import { fileURLToPath } from 'url';
-import { SourceSchema, TagSchema } from '@/lib/types';
 import {
   rehypeToc,
   remarkGfm,
@@ -16,10 +14,12 @@ import {
   metaSchema
 } from 'fumadocs-mdx/config';
 import {
-  GeneratorOptions,
   createGenerator,
+  GeneratorOptions,
   remarkAutoTypeTable
 } from 'fumadocs-typescript';
+import { fileURLToPath } from 'url';
+import { SourceSchema, TagSchema } from '@/lib/types';
 
 const relative = (s: string): string =>
   path.resolve(fileURLToPath(new URL(s, import.meta.url)));
diff --git a/apps/www/src/app/docs/[[...slug]]/page.module.css b/apps/www/src/app/docs/[[...slug]]/page.module.css
index 8d4514d70..5ed8408ba 100644
--- a/apps/www/src/app/docs/[[...slug]]/page.module.css
+++ b/apps/www/src/app/docs/[[...slug]]/page.module.css
@@ -2,6 +2,8 @@
   max-width: 806px;
   padding: var(--rs-space-15) var(--rs-space-7);
   width: 100%;
+  gap: var(--rs-space-12);
+  min-height: calc(100vh - 50px);
 }
 
 :global(.prose) {
diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx
index 8e4430085..93c7ad96f 100644
--- a/apps/www/src/app/docs/[[...slug]]/page.tsx
+++ b/apps/www/src/app/docs/[[...slug]]/page.tsx
@@ -1,11 +1,12 @@
-import DocsNavbar from '@/components/docs/navbar';
-import { mdxComponents } from '@/components/mdx';
-import TableOfContents from '@/components/toc/toc';
-import { docs } from '@/lib/source';
 import { Flex, Headline, Text } from '@raystack/apsara';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import DocsFooter from '@/components/docs/footer';
+import DocsNavbar from '@/components/docs/navbar';
+import { mdxComponents } from '@/components/mdx';
+import TableOfContents from '@/components/toc/toc';
+import { docs } from '@/lib/source';
 import styles from './page.module.css';
 
 export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
@@ -15,8 +16,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
 
   const MDX = page.data.body;
 
-  console.log('page', page);
-
   return (
     <Flex
       direction='column'
@@ -33,22 +32,25 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       />
       <Flex width='full' align='start'>
         <Flex direction='column' align='center' justify='center' width='full'>
-          <Flex direction='column' gap={6} className={styles.content}>
-            <Flex direction='column' gap={3}>
-              <Headline size='t4'>{page.data.title}</Headline>
-              <Text size='regular' variant='secondary'>
-                {page.data.description}
-              </Text>
-            </Flex>
-            <Flex direction='column' className='prose'>
-              <MDX
-                components={{
-                  ...mdxComponents,
-                  // this allows you to link to other pages with relative file paths
-                  a: createRelativeLink(docs, page)
-                }}
-              />
+          <Flex direction='column' className={styles.content} justify='between'>
+            <Flex direction='column' gap={6}>
+              <Flex direction='column' gap={3}>
+                <Headline size='t4'>{page.data.title}</Headline>
+                <Text size='regular' variant='secondary'>
+                  {page.data.description}
+                </Text>
+              </Flex>
+              <Flex direction='column' className='prose'>
+                <MDX
+                  components={{
+                    ...mdxComponents,
+                    // this allows you to link to other pages with relative file paths
+                    a: createRelativeLink(docs, page)
+                  }}
+                />
+              </Flex>
             </Flex>
+            <DocsFooter url={page.url} />
           </Flex>
         </Flex>
         <aside
@@ -58,6 +60,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
             position: 'sticky',
             top: '50px',
             padding: '40px 0',
+            paddingRight: 'var(--rs-space-7)',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
diff --git a/apps/www/src/app/docs/layout.tsx b/apps/www/src/app/docs/layout.tsx
index 86e9b46a1..7c447f5a4 100644
--- a/apps/www/src/app/docs/layout.tsx
+++ b/apps/www/src/app/docs/layout.tsx
@@ -1,7 +1,7 @@
-import DocsSidebar from '@/components/docs/sidebar';
-import { docs } from '@/lib/source';
 import { Flex } from '@raystack/apsara';
 import type { ReactNode } from 'react';
+import DocsSidebar from '@/components/docs/sidebar';
+import { docs } from '@/lib/source';
 import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: ReactNode }) {
diff --git a/apps/www/src/components/datatable-demo.tsx b/apps/www/src/components/datatable-demo.tsx
index 2d934f0d5..60d420b3c 100644
--- a/apps/www/src/components/datatable-demo.tsx
+++ b/apps/www/src/components/datatable-demo.tsx
@@ -46,24 +46,29 @@ export type Payment = {
 };
 
 export const columns: DataTableColumnDef<Payment, unknown>[] = [
-  {
-    accessorKey: 'select',
-    header: '',
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label='Select row'
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false
-  },
   {
     accessorKey: 'status',
     header: 'Status',
+    styles: {
+      cell: {
+        paddingLeft: 'var(--rs-space-7)'
+      },
+      header: {
+        paddingLeft: 'var(--rs-space-7)'
+      }
+    },
     cell: ({ row }) => (
-      <div className='capitalize'>{row.getValue('status')}</div>
+      <Flex gap={3} align='center'>
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label='Select row'
+          style={{
+            display: 'block'
+          }}
+        />
+        <div className='capitalize'>{row.getValue('status')}</div>
+      </Flex>
     ),
     filterOptions: [
       {
diff --git a/apps/www/src/components/demo/demo-controls.tsx b/apps/www/src/components/demo/demo-controls.tsx
index 19287edc2..604888ebb 100644
--- a/apps/www/src/components/demo/demo-controls.tsx
+++ b/apps/www/src/components/demo/demo-controls.tsx
@@ -1,4 +1,3 @@
-import { camelCaseToWords } from '@/lib/utils';
 import {
   InfoCircledIcon,
   Pencil2Icon,
@@ -15,6 +14,7 @@ import {
   Text
 } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
+import { camelCaseToWords } from '@/lib/utils';
 import styles from './styles.module.css';
 import {
   ComponentPropsType,
@@ -48,6 +48,7 @@ export default function DemoControls({
         const propValue = componentProps?.[prop] ?? '';
         const isCheckbox = control.type === 'checkbox';
         const isIcon = control.type === 'icon';
+        const isIconOptional = control.isIconOptional ?? true;
 
         // For checkbox and icon types, render in a special container
         if (isCheckbox || isIcon) {
@@ -61,18 +62,20 @@ export default function DemoControls({
                 <Text variant='secondary' size='small' weight='medium'>
                   {propLabel}
                 </Text>
-                <Switch
-                  size='small'
-                  checked={!!componentProps[prop]}
-                  onCheckedChange={checked => {
-                    if (isCheckbox) onPropChange(prop, checked);
-                    else
-                      onPropChange(
-                        prop,
-                        checked ? String(ICONS_MAP.plus.value) : ''
-                      );
-                  }}
-                />
+                {isIconOptional && (
+                  <Switch
+                    size='small'
+                    checked={!!componentProps[prop]}
+                    onCheckedChange={checked => {
+                      if (isCheckbox) onPropChange(prop, checked);
+                      else
+                        onPropChange(
+                          prop,
+                          checked ? String(ICONS_MAP.plus.value) : ''
+                        );
+                    }}
+                  />
+                )}
               </Flex>
               {isIcon && (
                 <Flex gap={2} align='center' className={styles.iconContainer}>
@@ -90,6 +93,12 @@ export default function DemoControls({
                         e.stopPropagation();
                       }}
                       aria-label={`Select ${icon.value || 'none'} icon`}
+                      style={{
+                        color:
+                          propValue === icon.value
+                            ? 'var(--rs-color-background-accent-emphasis)'
+                            : undefined
+                      }}
                     >
                       {icon.icon}
                     </IconButton>
diff --git a/apps/www/src/components/demo/demo.tsx b/apps/www/src/components/demo/demo.tsx
index eb28a087e..9d133fbf6 100644
--- a/apps/www/src/components/demo/demo.tsx
+++ b/apps/www/src/components/demo/demo.tsx
@@ -8,6 +8,7 @@ import {
   UploadIcon
 } from '@radix-ui/react-icons';
 import * as Apsara from '@raystack/apsara';
+import dayjs from 'dayjs';
 import { Home, Info, Laugh, X } from 'lucide-react';
 import NextLink from 'next/link';
 import { Suspense } from 'react';
@@ -35,7 +36,8 @@ export default function Demo(props: DemoProps) {
       TransformIcon,
       Pencil2Icon,
       InfoCircledIcon,
-      UploadIcon
+      UploadIcon,
+      dayjs
     }
   } = props;
 
diff --git a/apps/www/src/components/demo/styles.module.css b/apps/www/src/components/demo/styles.module.css
index 2cecd5181..7e0948ade 100644
--- a/apps/www/src/components/demo/styles.module.css
+++ b/apps/www/src/components/demo/styles.module.css
@@ -11,8 +11,6 @@
   min-height: 368px;
   display: flex;
   width: 100%;
-  /* border-bottom: 0.5px solid var(--rs-color-border-base-primary); */
-  max-height: 340px;
 }
 
 .preview {
@@ -48,6 +46,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   flex-shrink: 0;
+  max-height: 400px;
 }
 .noShadow {
   box-shadow: none;
@@ -117,7 +116,9 @@
   padding: var(--rs-space-3) var(--rs-space-4);
   cursor: pointer;
   color: var(--rs-color-foreground-base-secondary);
-  transition: color 0.2s ease-in-out, border-bottom 0.2s ease-in-out;
+  transition:
+    color 0.2s ease-in-out,
+    border-bottom 0.2s ease-in-out;
   border-bottom: 0.5px solid transparent;
   font-size: var(--rs-font-size-small);
   letter-spacing: var(--rs-letter-spacing-small);
diff --git a/apps/www/src/components/demo/types.ts b/apps/www/src/components/demo/types.ts
index 4f0f0bafa..17f49060c 100644
--- a/apps/www/src/components/demo/types.ts
+++ b/apps/www/src/components/demo/types.ts
@@ -31,6 +31,7 @@ export type ControlType = {
   initialValue?: string | boolean;
   min?: number;
   max?: number;
+  isIconOptional?: boolean;
 };
 
 export type ControlsType = Record<string, ControlType>;
diff --git a/apps/www/src/components/docs/footer.tsx b/apps/www/src/components/docs/footer.tsx
new file mode 100644
index 000000000..3fb6cd623
--- /dev/null
+++ b/apps/www/src/components/docs/footer.tsx
@@ -0,0 +1,44 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Link } from '@raystack/apsara';
+import { findNeighbour } from 'fumadocs-core/page-tree';
+import { docs } from '@/lib/source';
+
+type DocsFooterProps = {
+  url: string;
+};
+
+export default function DocsFooter({ url }: DocsFooterProps) {
+  const neighbours = findNeighbour(docs.pageTree, url);
+  return (
+    <Flex width='full' justify='between'>
+      {neighbours.previous ? (
+        <Link href={neighbours.previous.url}>
+          <Button
+            variant='outline'
+            color='neutral'
+            size='normal'
+            leadingIcon={<ArrowLeftIcon />}
+          >
+            {neighbours.previous.name}
+          </Button>
+        </Link>
+      ) : (
+        <span />
+      )}
+      {neighbours.next ? (
+        <Link href={neighbours.next.url}>
+          <Button
+            variant='outline'
+            color='neutral'
+            size='normal'
+            trailingIcon={<ArrowRightIcon />}
+          >
+            {neighbours.next.name}
+          </Button>
+        </Link>
+      ) : (
+        <span />
+      )}
+    </Flex>
+  );
+}
diff --git a/apps/www/src/components/docs/navbar.module.css b/apps/www/src/components/docs/navbar.module.css
index db61acfe7..c762678dd 100644
--- a/apps/www/src/components/docs/navbar.module.css
+++ b/apps/www/src/components/docs/navbar.module.css
@@ -18,8 +18,12 @@
   top: 0;
   z-index: var(--rs-z-index-portal);
   height: 50px;
+  background: #fcfcfce6;
 }
 
+[data-theme="dark"] .navbar {
+  background: #111111e6;
+}
 .left {
   display: flex;
   align-items: center;
diff --git a/apps/www/src/components/docs/navbar.tsx b/apps/www/src/components/docs/navbar.tsx
index c551a8a55..5856c5d2d 100644
--- a/apps/www/src/components/docs/navbar.tsx
+++ b/apps/www/src/components/docs/navbar.tsx
@@ -1,13 +1,16 @@
 'use client';
-import { SourceType } from '@/lib/types';
+import { CopyIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
 import { Breadcrumb, Button } from '@raystack/apsara';
 import { useBreadcrumb } from 'fumadocs-core/breadcrumb';
 import { Root } from 'fumadocs-core/page-tree';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Fragment, useState } from 'react';
+import { SourceType } from '@/lib/types';
 import styles from './navbar.module.css';
 
 const cache = new Map<string, string>();
+const GITHUB_BASE_URL = 'https://github.com/raystack/apsara/blob/main';
 
 interface DocsNavbarProps {
   url: string;
@@ -59,12 +62,6 @@ export default function DocsNavbar({
     }
   };
 
-  const handleViewSource = () => {
-    // Construct GitHub URL or source viewer URL
-    // Adjust based on your repository structure
-    if (source) window.open(source, '_blank');
-  };
-
   return (
     <header className={styles.navbar}>
       <div className={styles.left}>
@@ -89,18 +86,21 @@ export default function DocsNavbar({
           size='small'
           disabled={isLoading}
           onClick={handleCopyMarkdown}
+          leadingIcon={<CopyIcon height={12} width={12} />}
         >
           Copy markdown
         </Button>
         {source && (
-          <Button
-            variant='outline'
-            color='neutral'
-            size='small'
-            onClick={handleViewSource}
-          >
-            View source
-          </Button>
+          <Link href={`${GITHUB_BASE_URL}/${source}`} target='_blank'>
+            <Button
+              variant='outline'
+              color='neutral'
+              size='small'
+              leadingIcon={<GitHubLogoIcon height={12} width={12} />}
+            >
+              View source
+            </Button>
+          </Link>
         )}
       </div>
     </header>
diff --git a/apps/www/src/components/docs/sidebar.module.css b/apps/www/src/components/docs/sidebar.module.css
index 2fe1582a2..77aecc645 100644
--- a/apps/www/src/components/docs/sidebar.module.css
+++ b/apps/www/src/components/docs/sidebar.module.css
@@ -7,6 +7,7 @@
   padding: 0 var(--rs-space-5);
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   border-radius: 0;
+  margin-bottom: 0;
 }
 .main {
   padding: var(--rs-space-5);
@@ -15,3 +16,18 @@
 .main a {
   transition: none;
 }
+.items {
+  gap: 0;
+}
+.label {
+  color: var(--rs-color-foreground-base-tertiary);
+}
+.itemText {
+  overflow: visible;
+}
+.indicator {
+  width: 5px;
+  height: 5px;
+  background-color: var(--rs-color-background-accent-emphasis);
+  border-radius: var(--rs-radius-full);
+}
diff --git a/apps/www/src/components/docs/sidebar.tsx b/apps/www/src/components/docs/sidebar.tsx
index 4e1a9c4d2..1787fed75 100644
--- a/apps/www/src/components/docs/sidebar.tsx
+++ b/apps/www/src/components/docs/sidebar.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { isActiveUrl } from '@/lib/utils';
 import { Flex, Sidebar } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
-import { Node, Root } from 'fumadocs-core/page-tree';
+import { Item, Node, Root } from 'fumadocs-core/page-tree';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { type ReactNode } from 'react';
+import { isActiveUrl } from '@/lib/utils';
 import Logo from '../logo';
 import { ThemeToggle } from '../theme-switcher';
 import DocsSearch from './search';
@@ -30,6 +30,10 @@ function renderNode(node: Node, pathname: string): ReactNode {
         label={node.name as string}
         key={node?.$id}
         leadingIcon={node?.icon}
+        classNames={{
+          items: styles.items,
+          label: styles.label
+        }}
       >
         {/* Render index item first */}
         {renderNode(node.index, pathname)}
@@ -55,6 +59,10 @@ function renderNode(node: Node, pathname: string): ReactNode {
         label={node.name as string}
         key={node?.$id}
         leadingIcon={node?.icon}
+        classNames={{
+          items: styles.items,
+          label: styles.label
+        }}
       >
         {node.children.map(child => renderNode(child, pathname))}
       </Sidebar.Group>
@@ -63,16 +71,7 @@ function renderNode(node: Node, pathname: string): ReactNode {
 
   // Handle page items
   if (node.type === 'page') {
-    return (
-      <Sidebar.Item
-        key={node?.$id}
-        leadingIcon={node?.icon}
-        as={<Link href={node.url} />}
-        active={isActiveUrl(node.url, pathname, false)}
-      >
-        {node.name as string}
-      </Sidebar.Item>
-    );
+    return <SidebarItem item={node} pathname={pathname} />;
   }
 
   // Handle separators (if needed)
@@ -83,6 +82,25 @@ function renderNode(node: Node, pathname: string): ReactNode {
   return null;
 }
 
+function SidebarItem({ item, pathname }: { item: Item; pathname: string }) {
+  return (
+    <Sidebar.Item
+      key={item?.$id}
+      leadingIcon={item?.icon}
+      as={<Link href={item.url} />}
+      active={isActiveUrl(item.url, pathname, false)}
+      classNames={{
+        text: styles.itemText
+      }}
+    >
+      <Flex align='center' gap={3}>
+        {item.name as string}
+        {item?.tag ? <span className={styles.indicator} /> : null}
+      </Flex>
+    </Sidebar.Item>
+  );
+}
+
 export default function DocsSidebar({ pageTree, className }: Props) {
   const pathname = usePathname();
   return (
diff --git a/apps/www/src/components/editor/editor.module.css b/apps/www/src/components/editor/editor.module.css
index f7b1b5262..ac8943cb1 100644
--- a/apps/www/src/components/editor/editor.module.css
+++ b/apps/www/src/components/editor/editor.module.css
@@ -1,5 +1,4 @@
 .editor {
-  border-top: 1px solid hsl(var(--fd-border) / 1);
 }
 .editor pre {
   overflow: auto !important;
diff --git a/apps/www/src/components/editor/editor.tsx b/apps/www/src/components/editor/editor.tsx
index 099660ee0..f4107b34d 100644
--- a/apps/www/src/components/editor/editor.tsx
+++ b/apps/www/src/components/editor/editor.tsx
@@ -1,6 +1,6 @@
-import { getFormattedCode } from '@/lib/prettier';
 import { CodeBlock } from '@raystack/apsara';
 import { useMemo } from 'react';
+import { getFormattedCode } from '@/lib/prettier';
 import styles from './editor.module.css';
 
 type props = {
@@ -12,7 +12,7 @@ export default function Editor({ code = '' }: props) {
 
   return (
     <div className={styles.editor} suppressHydrationWarning>
-      <CodeBlock maxLines={25}>
+      <CodeBlock maxLines={14}>
         <CodeBlock.Content>
           <CodeBlock.Code language='tsx' className={styles.code}>
             {formattedCode}
diff --git a/apps/www/src/components/logo/logo.module.css b/apps/www/src/components/logo/logo.module.css
index 0f5e40d3c..f93c59d73 100644
--- a/apps/www/src/components/logo/logo.module.css
+++ b/apps/www/src/components/logo/logo.module.css
@@ -9,3 +9,6 @@
   font-size: 2rem;
   font-weight: bold;
 }
+html[data-theme="dark"] .container {
+  filter: invert(1);
+}
diff --git a/apps/www/src/components/logo/logo.tsx b/apps/www/src/components/logo/logo.tsx
index 2330438c9..af7c7a190 100644
--- a/apps/www/src/components/logo/logo.tsx
+++ b/apps/www/src/components/logo/logo.tsx
@@ -14,7 +14,7 @@ export default function Logo({
   const size = variant === 'small' ? 24 : 48;
   return (
     <div className={cx(styles.container, styles[variant])}>
-      <Image src={`/assets/logo.png`} alt='' width={size} height={size} />
+      <Image src={`/assets/logo.svg`} alt='' width={size} height={size} />
       {!onlyWordmark && <p>Apsara</p>}
     </div>
   );
diff --git a/apps/www/src/components/mdx/mdx-components.module.css b/apps/www/src/components/mdx/mdx-components.module.css
index 21d7272a1..fcf076049 100644
--- a/apps/www/src/components/mdx/mdx-components.module.css
+++ b/apps/www/src/components/mdx/mdx-components.module.css
@@ -44,17 +44,17 @@
   margin-top: var(--rs-space-4);
 }
 
-:global(.prose) ul,
-:global(.prose) ol {
+:global(.prose) ul:not([data-demo] ul),
+:global(.prose) ol:not([data-demo] ol) {
   padding-left: var(--rs-space-5);
   margin: 0;
 }
 
-:global(.prose) ul li,
-:global(.prose) ol li {
+:global(.prose) ul:not([data-demo] ul) li,
+:global(.prose) ol:not([data-demo] ol) li {
   margin-bottom: var(--rs-space-3);
 }
-:global(.prose) ul li:first-child,
-:global(.prose) ol li:first-child {
+:global(.prose) ul:not([data-demo] ul) li:first-child,
+:global(.prose) ol:not([data-demo] ol) li:first-child {
   margin-top: var(--rs-space-3);
 }
diff --git a/apps/www/src/components/preview/preview.module.css b/apps/www/src/components/preview/preview.module.css
index 512953feb..1121a7bca 100644
--- a/apps/www/src/components/preview/preview.module.css
+++ b/apps/www/src/components/preview/preview.module.css
@@ -5,4 +5,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: auto;
 }
diff --git a/apps/www/src/components/toc/toc.module.css b/apps/www/src/components/toc/toc.module.css
index 9de65b517..153fa0532 100644
--- a/apps/www/src/components/toc/toc.module.css
+++ b/apps/www/src/components/toc/toc.module.css
@@ -11,7 +11,7 @@
 
 .tickContainer {
   position: absolute;
-  right: 1rem;
+  right: 0;
   display: grid;
   width: 6rem;
   align-items: center;
@@ -25,11 +25,11 @@
 }
 
 .tickLineBefore {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--rs-color-background-neutral-tertiary);
 }
 
 .tickLineAfter {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: var(--rs-color-background-neutral-tertiary);
 }
 
 .tickContainer:hover .tickLine {
@@ -58,13 +58,13 @@
   align-items: center;
   font-family: var(--rs-font-mono);
   font-size: 0.75rem;
-  color: black;
+  color: var(--rs-color-foreground-base-primary);
   text-transform: capitalize;
   opacity: 0;
   transition: opacity 300ms;
 }
 .headingLink {
-  color: var(--rs-color-foreground-accent-primary);
+  color: var(--rs-color-foreground-base-primary);
   text-align: right;
   font-family: var(--rs-font-body);
   font-size: var(--rs-font-size-mini);
@@ -95,16 +95,17 @@
 
 .connectingLine {
   position: absolute;
-  right: 1rem;
+  right: 0;
   height: 1px;
-  background-color: black;
+  background-color: var(--rs-color-background-neutral-emphasis);
 }
 
 .scrollMarkerContainer {
   position: absolute;
-  right: 1rem;
+  right: 0;
   z-index: 20;
   transition: opacity 300ms;
+  pointer-events: none;
 }
 
 .scrollMarkerContainerReady {
diff --git a/apps/www/src/components/toc/toc.tsx b/apps/www/src/components/toc/toc.tsx
index 169835c81..70ce2f1cf 100644
--- a/apps/www/src/components/toc/toc.tsx
+++ b/apps/www/src/components/toc/toc.tsx
@@ -84,7 +84,9 @@ function resolveOverlaps(headings: Heading[], maxPosition: number): Heading[] {
  */
 export default function TableOfContents({
   headings: tocHeadings
-}: { headings: TOCItemType[] }) {
+}: {
+  headings: TOCItemType[];
+}) {
   const [headings, setHeadings] = useState<Heading[]>([]);
   const [containerHeight, setContainerHeight] = useState<number>(0);
   const [ready, setReady] = useState<boolean>(false);
@@ -305,7 +307,8 @@ export default function TableOfContents({
                 // Center label vertically on tick (label height ~12px, so offset by half)
                 top: `${h.yPosition - 6}px`,
                 // Indent based on heading level (h2 furthest right, h4 closest to bar)
-                right: `${(3 - h.level) * 4 + 32}px`,
+                // right: `${(3 - h.level) * 4 + 28}px`,
+                right: '24px',
                 zIndex: 10 * (h.level < 4 ? 1 : 0),
                 transitionDelay: `${50 * i}ms`
               }}
diff --git a/apps/www/src/components/typetable/typetable.module.css b/apps/www/src/components/typetable/typetable.module.css
index 8da22295d..305aea381 100644
--- a/apps/www/src/components/typetable/typetable.module.css
+++ b/apps/www/src/components/typetable/typetable.module.css
@@ -21,7 +21,7 @@
   font-size: var(--rs-font-size-regular);
   line-height: var(--rs-line-height-regular);
   letter-spacing: var(--rs-letter-spacing-regular);
-  color: #000000;
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .propLabel {
@@ -48,6 +48,7 @@
   line-height: var(--rs-line-height-mono-small);
   letter-spacing: var(--rs-letter-spacing-mono-small);
   color: var(--rs-color-foreground-base-primary);
+  padding: var(--rs-space-3) var(--rs-space-4);
 }
 
 .propName {
@@ -74,6 +75,10 @@
   background: transparent;
   padding: 0;
 }
+.fieldCode :global(.token-line) > span {
+  display: flex;
+  flex-wrap: wrap;
+}
 
 .fieldLabel {
   width: 200px;
diff --git a/apps/www/src/content/docs/(overview)/index.mdx b/apps/www/src/content/docs/(overview)/index.mdx
index 97b0a221d..19c9e530b 100644
--- a/apps/www/src/content/docs/(overview)/index.mdx
+++ b/apps/www/src/content/docs/(overview)/index.mdx
@@ -3,6 +3,7 @@ title: Introduction
 description: A design system for building accessible and composable user interfaces in React.
 ---
 
-Apsara is a design system that simplifies React application development. It offers a collection 
-of carefully crafted components that work seamlessly together, are accessible out of the box, 
+Apsara is a design system that simplifies React application development. It offers a collection
+of carefully crafted components that work seamlessly together, are accessible out of the box,
 and help create consistent user interfaces quickly.
+
diff --git a/apps/www/src/content/docs/components/accordion/index.mdx b/apps/www/src/content/docs/components/accordion/index.mdx
index 6faca9b29..4945a75b7 100644
--- a/apps/www/src/content/docs/components/accordion/index.mdx
+++ b/apps/www/src/content/docs/components/accordion/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
-tag: new
+source: packages/raystack/components/accordion
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/amount/index.mdx b/apps/www/src/content/docs/components/amount/index.mdx
index 525ca4575..adc0e705d 100644
--- a/apps/www/src/content/docs/components/amount/index.mdx
+++ b/apps/www/src/content/docs/components/amount/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Amount
 description: Component for displaying monetary values
-tag: new
+source: packages/raystack/components/amount
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/announcement-bar/index.mdx b/apps/www/src/content/docs/components/announcement-bar/index.mdx
index af1b7f607..c5cca516d 100644
--- a/apps/www/src/content/docs/components/announcement-bar/index.mdx
+++ b/apps/www/src/content/docs/components/announcement-bar/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Announcement Bar
 description: AnnouncementBar component to display message
+source: packages/raystack/components/announcement-bar
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/avatar/index.mdx b/apps/www/src/content/docs/components/avatar/index.mdx
index bd50e308c..9ff19f09e 100644
--- a/apps/www/src/content/docs/components/avatar/index.mdx
+++ b/apps/www/src/content/docs/components/avatar/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Avatar
 description: An image element with a fallback for representing the user.
+source: packages/raystack/components/avatar
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/badge/index.mdx b/apps/www/src/content/docs/components/badge/index.mdx
index 823370ae9..3b85d17b4 100644
--- a/apps/www/src/content/docs/components/badge/index.mdx
+++ b/apps/www/src/content/docs/components/badge/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Badge
 description: Badge component to display concise information.
+source: packages/raystack/components/badge
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/breadcrumb/index.mdx b/apps/www/src/content/docs/components/breadcrumb/index.mdx
index 2e5f3a6d1..9000ed9e6 100644
--- a/apps/www/src/content/docs/components/breadcrumb/index.mdx
+++ b/apps/www/src/content/docs/components/breadcrumb/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 description: A navigation component for displaying a route trail.
-tag: update
+source: packages/raystack/components/breadcrumb
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/button/index.mdx b/apps/www/src/content/docs/components/button/index.mdx
index b02b187b5..365a9f416 100644
--- a/apps/www/src/content/docs/components/button/index.mdx
+++ b/apps/www/src/content/docs/components/button/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Button
 description: Triggers a click action usually performed by the user to trigger an event such as submitting a form or closing a dialog.
+source: packages/raystack/components/button
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/calendar/demo.ts b/apps/www/src/content/docs/components/calendar/demo.ts
index e10593876..a9bfb2354 100644
--- a/apps/www/src/content/docs/components/calendar/demo.ts
+++ b/apps/www/src/content/docs/components/calendar/demo.ts
@@ -14,10 +14,7 @@ export const preview = {
     },
     {
       name: 'Date Picker',
-      code: `
-      <Flex style={{height:200}}>
-        <DatePicker />
-      </Flex>`
+      code: `<DatePicker />`
     }
   ]
 };
@@ -116,7 +113,7 @@ export const dateInfoDemo = {
         gap={2}
         style={{ fontSize: '8px', color: 'var(--rs-color-foreground-base-secondary)' }}
       >
-        <BellIcon style={{ width: '8px', height: '8px' }} />
+        <Info style={{ width: '8px', height: '8px' }} />
         <Text style={{ fontSize: '8px' }} color='secondary'>25%</Text>
       </Flex>
     )
diff --git a/apps/www/src/content/docs/components/calendar/index.mdx b/apps/www/src/content/docs/components/calendar/index.mdx
index 694ac208b..636cbfe2a 100644
--- a/apps/www/src/content/docs/components/calendar/index.mdx
+++ b/apps/www/src/content/docs/components/calendar/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Calendar
 description: A calendar component for selecting dates and date ranges.
+source: packages/raystack/components/calendar
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/callout/index.mdx b/apps/www/src/content/docs/components/callout/index.mdx
index bc0d93cfc..65d491335 100644
--- a/apps/www/src/content/docs/components/callout/index.mdx
+++ b/apps/www/src/content/docs/components/callout/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Callout
 description: A visual message component to attract user's attention.
+source: packages/raystack/components/callout
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/checkbox/index.mdx b/apps/www/src/content/docs/components/checkbox/index.mdx
index f6bad8e7f..4dba9067c 100644
--- a/apps/www/src/content/docs/components/checkbox/index.mdx
+++ b/apps/www/src/content/docs/components/checkbox/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Checkbox
 description: Checkbox is a user interface control that enables users to toggle between checked, unchecked, and indeterminate states
+source: packages/raystack/components/checkbox
 ---
 
 import { playground, statesExamples } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/chip/demo.ts b/apps/www/src/content/docs/components/chip/demo.ts
index 618c22870..6591c9706 100644
--- a/apps/www/src/content/docs/components/chip/demo.ts
+++ b/apps/www/src/content/docs/components/chip/demo.ts
@@ -87,7 +87,7 @@ export const iconsDemo = {
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip leadingIcon={'O'}>Add Item</Chip>
-        <Chip variant="filled" leadingIcon={'O'}>Selected</Chip>
+        <Chip variant="filled" leadingIcon={'O'} data-state="active">Selected</Chip>
       </div>`
     },
     {
diff --git a/apps/www/src/content/docs/components/chip/index.mdx b/apps/www/src/content/docs/components/chip/index.mdx
index d24d3f1cd..8deaf3f6e 100644
--- a/apps/www/src/content/docs/components/chip/index.mdx
+++ b/apps/www/src/content/docs/components/chip/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Chip
 description: A compact element for representing an input, attribute, or action.
+source: packages/raystack/components/chip
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/code-block/index.mdx b/apps/www/src/content/docs/components/code-block/index.mdx
index 3414e5ad1..fe946184a 100644
--- a/apps/www/src/content/docs/components/code-block/index.mdx
+++ b/apps/www/src/content/docs/components/code-block/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Code Block
 description: A flexible composite component for displaying code with syntax highlighting, line numbers, copy functionality, and multi-language support.
+source: packages/raystack/components/code-block
 tag: new
 ---
 
diff --git a/apps/www/src/content/docs/components/code-block/props.ts b/apps/www/src/content/docs/components/code-block/props.ts
index fe420e49c..397d4996d 100644
--- a/apps/www/src/content/docs/components/code-block/props.ts
+++ b/apps/www/src/content/docs/components/code-block/props.ts
@@ -150,9 +150,9 @@ export interface CodeBlockCopyButtonProps {
 export interface CodeBlockCollapseTriggerProps {
   /**
    * The text to display on the collapse trigger
-   * @defaultValue "Show Code"
+   * @defaultValue (collapsed) => collapsed ? "Show Code" : "Hide Code"
    */
-  children?: ReactNode;
+  children?: ReactNode | ((collapsed: boolean) => ReactNode);
 
   /**
    * Additional CSS class name
diff --git a/apps/www/src/content/docs/components/color-picker/demo.ts b/apps/www/src/content/docs/components/color-picker/demo.ts
index 0ea1382d3..32c52a225 100644
--- a/apps/www/src/content/docs/components/color-picker/demo.ts
+++ b/apps/www/src/content/docs/components/color-picker/demo.ts
@@ -7,7 +7,7 @@ defaultValue='#DA2929'
 style={{
   width: '240px',
   height: '320px',
-  padding: 20,
+  padding: 12,
   background: 'white'
 }}
 >
@@ -27,7 +27,7 @@ export const basicDemo = {
 <ColorPicker defaultValue="#00bcd4" style={{
   width: '240px',
   height: '220px',
-  padding: 20,
+  padding: 12,
   background: 'white'
 }}>
   <ColorPicker.Area/>
diff --git a/apps/www/src/content/docs/components/color-picker/index.mdx b/apps/www/src/content/docs/components/color-picker/index.mdx
index 91e277f4c..d4443a36b 100644
--- a/apps/www/src/content/docs/components/color-picker/index.mdx
+++ b/apps/www/src/content/docs/components/color-picker/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Color Picker
 description: A composable color picker component supporting multiple color models, alpha channel, and customizable UI.
-tag: new
+source: packages/raystack/components/color-picker
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/command/index.mdx b/apps/www/src/content/docs/components/command/index.mdx
index 4f8fee2f7..fc0ced5b4 100644
--- a/apps/www/src/content/docs/components/command/index.mdx
+++ b/apps/www/src/content/docs/components/command/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Command
 description: Fast, composable, unstyled command menu for React.
+source: packages/raystack/components/command
 ---
 
 import { basicDemo, preview } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/container/demo.ts b/apps/www/src/content/docs/components/container/demo.ts
index 7a66c7f7f..bc65c8302 100644
--- a/apps/www/src/content/docs/components/container/demo.ts
+++ b/apps/www/src/content/docs/components/container/demo.ts
@@ -5,7 +5,7 @@ import { getPropsString } from '@/lib/utils';
 export const getCode = (props: any) => {
   const { children, ...rest } = props;
 
-  return `<Container${getPropsString(rest)}>${children}</Container>`;
+  return `<Container${getPropsString(rest)}><Text>${children}</Text></Container>`;
 };
 
 export const playground = {
diff --git a/apps/www/src/content/docs/components/container/index.mdx b/apps/www/src/content/docs/components/container/index.mdx
index 27caf5cb2..15599c9ea 100644
--- a/apps/www/src/content/docs/components/container/index.mdx
+++ b/apps/www/src/content/docs/components/container/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Container
 description: A wrapper component that sets a max-width and centers content horizontally.
+source: packages/raystack/components/container
 ---
 
 import { playground, alignDemo, sizeDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/copy-button/index.mdx b/apps/www/src/content/docs/components/copy-button/index.mdx
index f70226ffc..fb3f77452 100644
--- a/apps/www/src/content/docs/components/copy-button/index.mdx
+++ b/apps/www/src/content/docs/components/copy-button/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Copy Button
 description: A button component that copies text to clipboard with visual feedback.
+source: packages/raystack/components/copy-button
 ---
 
 import { playground, sizesDemo, stateDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index 3bc7eda42..8ea942436 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: DataTable
 description: An advanced React table that supports filtering, sorting, and pagination out of the box.
+source: packages/raystack/components/datatable
 ---
 
 import { preview } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/dialog/demo.ts b/apps/www/src/content/docs/components/dialog/demo.ts
index e614b5715..a343b2928 100644
--- a/apps/www/src/content/docs/components/dialog/demo.ts
+++ b/apps/www/src/content/docs/components/dialog/demo.ts
@@ -22,8 +22,8 @@ export const getCode = (props: any) => {
           </Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-          <Button>OK</Button>
-          <Dialog.Close asChild><Button color="neutral">Cancel</Button></Dialog.Close>
+        <Dialog.Close asChild><Button variant="outline" color="neutral">Cancel</Button></Dialog.Close>
+        <Button>OK</Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog>`;
diff --git a/apps/www/src/content/docs/components/dialog/index.mdx b/apps/www/src/content/docs/components/dialog/index.mdx
index d878548fe..ddb87622a 100644
--- a/apps/www/src/content/docs/components/dialog/index.mdx
+++ b/apps/www/src/content/docs/components/dialog/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+source: packages/raystack/components/dialog
 ---
 
 import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/dropdown/index.mdx b/apps/www/src/content/docs/components/dropdown/index.mdx
index 2e71f712c..f4c583526 100644
--- a/apps/www/src/content/docs/components/dropdown/index.mdx
+++ b/apps/www/src/content/docs/components/dropdown/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Dropdown Menu
 description: Displays a menu to the user, such as a set of actions or functions, triggered by a button.
+source: packages/raystack/components/dropdown
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/empty-state/demo.ts b/apps/www/src/content/docs/components/empty-state/demo.ts
index 5f559e78f..45cd2f2f0 100644
--- a/apps/www/src/content/docs/components/empty-state/demo.ts
+++ b/apps/www/src/content/docs/components/empty-state/demo.ts
@@ -3,11 +3,17 @@
 import { getPropsString } from '@/lib/utils';
 
 export const getCode = (props: any) => {
-  return `<EmptyState
-  ${getPropsString(props)}
-      primaryAction={<Button>Primary Action</Button>}
-      secondaryAction={<Button variant="text">Secondary Action</Button>}
-    />`;
+  const { primaryAction, secondaryAction, ...rest } = props;
+  const primaryActionCode = primaryAction
+    ? `<Button>Primary Action</Button>`
+    : undefined;
+  const secondaryActionCode = secondaryAction
+    ? `<Button variant="text">Secondary Action</Button>`
+    : undefined;
+  return `<EmptyState${getPropsString(rest)}
+  ${primaryAction ? `primaryAction={${primaryActionCode}}` : ''}
+  ${secondaryAction ? `secondaryAction={${secondaryActionCode}}` : ''}
+  />`;
 };
 
 export const playground = {
@@ -28,7 +34,18 @@ export const playground = {
     },
     icon: {
       type: 'icon',
-      initialValue: '<X size={16} />'
+      initialValue: '<X size={16} />',
+      isIconOptional: false
+    },
+    primaryAction: {
+      type: 'checkbox',
+      initialValue: true,
+      defaultValue: false
+    },
+    secondaryAction: {
+      type: 'checkbox',
+      initialValue: true,
+      defaultValue: false
     }
   },
   getCode
diff --git a/apps/www/src/content/docs/components/empty-state/index.mdx b/apps/www/src/content/docs/components/empty-state/index.mdx
index 2c35cd827..b7ec949fa 100644
--- a/apps/www/src/content/docs/components/empty-state/index.mdx
+++ b/apps/www/src/content/docs/components/empty-state/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Empty State
 description: Displays an empty state
+source: packages/raystack/components/empty-state
 ---
 
 import { playground, variantsDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/flex/index.mdx b/apps/www/src/content/docs/components/flex/index.mdx
index 35bbbd750..dc7c1ee7d 100644
--- a/apps/www/src/content/docs/components/flex/index.mdx
+++ b/apps/www/src/content/docs/components/flex/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Flex
 description: Component for flexbox
+source: packages/raystack/components/flex
 ---
 
 import { playground, basicDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/fliter-chip/index.mdx b/apps/www/src/content/docs/components/fliter-chip/index.mdx
index a84d3c36b..afb0691e3 100644
--- a/apps/www/src/content/docs/components/fliter-chip/index.mdx
+++ b/apps/www/src/content/docs/components/fliter-chip/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: FilterChip
 description: A compact, interactive element for filtering data with various input types.
+source: packages/raystack/components/filter-chip
 ---
 
 import { playground, inputDemo, iconDemo, actionDemo, operationsDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/grid/index.mdx b/apps/www/src/content/docs/components/grid/index.mdx
index b559329c6..0930653cb 100644
--- a/apps/www/src/content/docs/components/grid/index.mdx
+++ b/apps/www/src/content/docs/components/grid/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Grid
 description: A flexible and powerful component for grid layout
+source: packages/raystack/components/grid
 ---
 
 import { playground,  basicDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/headline/demo.ts b/apps/www/src/content/docs/components/headline/demo.ts
index 34de70ef4..a417a1c35 100644
--- a/apps/www/src/content/docs/components/headline/demo.ts
+++ b/apps/www/src/content/docs/components/headline/demo.ts
@@ -13,7 +13,7 @@ export const playground = {
     size: {
       type: 'select',
       options: ['t1', 't2', 't3', 't4'],
-      defaultValue: 't1'
+      defaultValue: 't2'
     },
     weight: {
       type: 'select',
diff --git a/apps/www/src/content/docs/components/headline/index.mdx b/apps/www/src/content/docs/components/headline/index.mdx
index 291003b55..2986151ea 100644
--- a/apps/www/src/content/docs/components/headline/index.mdx
+++ b/apps/www/src/content/docs/components/headline/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Headline
 description: A typographic component for displaying headings with different sizes and alignments.
-tag: update
+source: packages/raystack/components/headline
 ---
 
 import { playground, alignDemo, truncateDemo, weightDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/icon-button/demo.ts b/apps/www/src/content/docs/components/icon-button/demo.ts
index a6c727712..9ad6da363 100644
--- a/apps/www/src/content/docs/components/icon-button/demo.ts
+++ b/apps/www/src/content/docs/components/icon-button/demo.ts
@@ -19,7 +19,8 @@ export const playground = {
     disabled: { type: 'checkbox', defaultValue: false },
     children: {
       type: 'icon',
-      initialValue: '<Info size={16} />'
+      initialValue: '<Info size={16} />',
+      isIconOptional: false
     }
   },
   getCode
diff --git a/apps/www/src/content/docs/components/icon-button/index.mdx b/apps/www/src/content/docs/components/icon-button/index.mdx
index f9774803c..d943c98d6 100644
--- a/apps/www/src/content/docs/components/icon-button/index.mdx
+++ b/apps/www/src/content/docs/components/icon-button/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: IconButton
 description: A button component designed specifically for icons with various sizes and states.
+source: packages/raystack/components/icon-button
 ---
 
 import { playground, stateDemo, sizeDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/image/index.mdx b/apps/www/src/content/docs/components/image/index.mdx
index 45fe12c24..91402c236 100644
--- a/apps/www/src/content/docs/components/image/index.mdx
+++ b/apps/www/src/content/docs/components/image/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Image
 description: A responsive image component with fallback support and various fitting options.
+source: packages/raystack/components/image
 ---
 
 import { playground, radiusDemo, fitDemo, fallbackDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/indicator/index.mdx b/apps/www/src/content/docs/components/indicator/index.mdx
index 1c9e4b83b..a9823044a 100644
--- a/apps/www/src/content/docs/components/indicator/index.mdx
+++ b/apps/www/src/content/docs/components/indicator/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Indicator
 description: A small dot indicator with small information that can be positioned on top of other components.
+source: packages/raystack/components/indicator
 ---
 
 import { playground, labelDemo, variantDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/input-field/demo.ts b/apps/www/src/content/docs/components/input-field/demo.ts
index 097d7f67c..f6fcc9ddb 100644
--- a/apps/www/src/content/docs/components/input-field/demo.ts
+++ b/apps/www/src/content/docs/components/input-field/demo.ts
@@ -12,7 +12,7 @@ export const playground = {
     label: { type: 'text', initialValue: 'Your Name' },
     helperText: { type: 'text', initialValue: 'Enter your full name' },
     error: { type: 'text', initialValue: '' },
-    disabled: { type: 'boolean', initialValue: false },
+    disabled: { type: 'checkbox', initialValue: false, defaultValue: false },
     leadingIcon: { type: 'icon', initialValue: '' },
     trailingIcon: { type: 'icon', initialValue: '' },
     optional: { type: 'checkbox', defaultValue: false },
@@ -30,7 +30,7 @@ export const playground = {
 export const basicDemo = {
   type: 'code',
   code: `
-  <InputField 
+  <InputField
   label="Default"
   placeholder="Enter text"
 />`
@@ -38,7 +38,7 @@ export const basicDemo = {
 export const helperTextDemo = {
   type: 'code',
   code: `
-  <InputField 
+  <InputField
   label="With label"
   placeholder="Enter text"
   helperText="This is a helper text"
@@ -47,7 +47,7 @@ export const helperTextDemo = {
 export const errorDemo = {
   type: 'code',
   code: `
- <InputField 
+ <InputField
   label="With Error"
   placeholder="Enter text"
   error="This field is required"
@@ -56,7 +56,7 @@ export const errorDemo = {
 export const prefixDemo = {
   type: 'code',
   code: `
- <InputField 
+ <InputField
   label="With Prefix/Suffix"
   placeholder="0.00"
   prefix="$"
@@ -66,7 +66,7 @@ export const prefixDemo = {
 export const iconDemo = {
   type: 'code',
   code: `
- <InputField 
+ <InputField
   label="With Icons"
   placeholder="Enter text"
   leadingIcon={<Home size={16}/>}
@@ -76,7 +76,7 @@ export const iconDemo = {
 export const optionalDemo = {
   type: 'code',
   code: `
- <InputField 
+ <InputField
   label="Optional Field"
   placeholder="Enter text"
   optional
@@ -85,7 +85,7 @@ export const optionalDemo = {
 export const disabledDemo = {
   type: 'code',
   code: `
-<InputField 
+<InputField
   label="Disabled"
   placeholder="Enter text"
   disabled
@@ -94,7 +94,7 @@ export const disabledDemo = {
 export const widthDemo = {
   type: 'code',
   code: `
-<InputField 
+<InputField
   label="Custom Width"
   placeholder="Enter text"
   width="300px"
@@ -104,11 +104,11 @@ export const sizeDemo = {
   type: 'code',
   code: `
 <Flex direction="column" gap="medium">
-  <InputField 
+  <InputField
     label="Large Input (Default)"
     placeholder="32px height"
   />
-  <InputField 
+  <InputField
     label="Small Input"
     placeholder="24px height"
     size="small"
@@ -119,7 +119,7 @@ export const sizeChipDemo = {
   type: 'code',
   code: `
 <Flex direction="column" gap="medium">
-  <InputField 
+  <InputField
     label="Large Input with Chips"
     placeholder="Type and press Enter..."
     chips={[
@@ -127,7 +127,7 @@ export const sizeChipDemo = {
       { label: "B", onRemove: () => console.log("Remove B") }
     ]}
   />
-  <InputField 
+  <InputField
     label="Small Input with Chips"
     placeholder="Type and press Enter..."
     size="small"
diff --git a/apps/www/src/content/docs/components/input-field/index.mdx b/apps/www/src/content/docs/components/input-field/index.mdx
index 1c0a8476c..5725d366c 100644
--- a/apps/www/src/content/docs/components/input-field/index.mdx
+++ b/apps/www/src/content/docs/components/input-field/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Input Field
 description: A text input component with support for labels, helper text, and various states.
+source: packages/raystack/components/input-field
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/label/index.mdx b/apps/www/src/content/docs/components/label/index.mdx
index 6d5e2ca21..98b3cd13d 100644
--- a/apps/www/src/content/docs/components/label/index.mdx
+++ b/apps/www/src/content/docs/components/label/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Label
 description: A text label component that provides names for form controls.
+source: packages/raystack/components/label
 ---
 
 import { playground, requiredDemo, sizeDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/link/index.mdx b/apps/www/src/content/docs/components/link/index.mdx
index 05c2e17be..52c8028ec 100644
--- a/apps/www/src/content/docs/components/link/index.mdx
+++ b/apps/www/src/content/docs/components/link/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Link
 description: Display a hyperlink component
-tag: new
+source: packages/raystack/components/link
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/list/index.mdx b/apps/www/src/content/docs/components/list/index.mdx
index f0b104b4a..fd5306690 100644
--- a/apps/www/src/content/docs/components/list/index.mdx
+++ b/apps/www/src/content/docs/components/list/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: List
 description: A component for displaying information in a key-value pair list format.
+source: packages/raystack/components/list
 ---
 
 import { basicDemo, preview } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/navbar/demo.ts b/apps/www/src/content/docs/components/navbar/demo.ts
index 99c61e1a3..f927145f4 100644
--- a/apps/www/src/content/docs/components/navbar/demo.ts
+++ b/apps/www/src/content/docs/components/navbar/demo.ts
@@ -9,10 +9,10 @@ export const preview = {
     </Navbar.Start>
     <Navbar.End>
       <Search placeholder="Search an AOI" size="small" style={{ width: '200px' }} />
-      <Button variant="outline" size="small" color="neutral" leadingIcon={<FilterIcon />}>
+      <Button variant="outline" size="small" color="neutral" leadingIcon={<PlusIcon />}>
         Draw AOI
       </Button>
-      <Button variant="outline" size="small" color="neutral" leadingIcon={<OrganizationIcon />}>
+      <Button variant="outline" size="small" color="neutral" leadingIcon={<UploadIcon />}>
         Upload AOI
       </Button>
     </Navbar.End>
diff --git a/apps/www/src/content/docs/components/navbar/index.mdx b/apps/www/src/content/docs/components/navbar/index.mdx
index 25b754341..be41947b5 100644
--- a/apps/www/src/content/docs/components/navbar/index.mdx
+++ b/apps/www/src/content/docs/components/navbar/index.mdx
@@ -1,6 +1,8 @@
 ---
 title: Navbar
 description: A horizontal navigation bar component with flexible left and right sections for building site headers and navigation.
+source: packages/raystack/components/navbar
+tag: new
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/popover/index.mdx b/apps/www/src/content/docs/components/popover/index.mdx
index 97dd0e869..e1d4bdf50 100644
--- a/apps/www/src/content/docs/components/popover/index.mdx
+++ b/apps/www/src/content/docs/components/popover/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
+source: packages/raystack/components/popover
 ---
 
 import { playground, alignDemo, positionDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/radio/index.mdx b/apps/www/src/content/docs/components/radio/index.mdx
index b5cad60f1..0123ac444 100644
--- a/apps/www/src/content/docs/components/radio/index.mdx
+++ b/apps/www/src/content/docs/components/radio/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Radio
 description: A radio group component for selecting a single option from a list of options.
+source: packages/raystack/components/radio
 ---
 
 import { preview, stateDemo, labelDemo, formDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/search/index.mdx b/apps/www/src/content/docs/components/search/index.mdx
index 7ec469227..bf4bbc90a 100644
--- a/apps/www/src/content/docs/components/search/index.mdx
+++ b/apps/www/src/content/docs/components/search/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Search
 description: A search input component with built-in search icon and optional clear button.
+source: packages/raystack/components/search
 ---
 
 import { playground, sizeDemo, clearDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/select/index.mdx b/apps/www/src/content/docs/components/select/index.mdx
index 74dd0d2b3..974cc8183 100644
--- a/apps/www/src/content/docs/components/select/index.mdx
+++ b/apps/www/src/content/docs/components/select/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
+source: packages/raystack/components/select
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/separator/index.mdx b/apps/www/src/content/docs/components/separator/index.mdx
index 8ce5153fa..3f7609c0e 100644
--- a/apps/www/src/content/docs/components/separator/index.mdx
+++ b/apps/www/src/content/docs/components/separator/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Separator
 description: A visual divider that separates content with support for vertical and horizontal orientations.
+source: packages/raystack/components/separator
 ---
 
 import { playground, sizeDemo, colorDemo, orientationDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/sheet/index.mdx b/apps/www/src/content/docs/components/sheet/index.mdx
index bf49f0903..e6a6066f1 100644
--- a/apps/www/src/content/docs/components/sheet/index.mdx
+++ b/apps/www/src/content/docs/components/sheet/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Sheet
 description: Extends the Dialog component to display content that complements the main content of the screen.
+source: packages/raystack/components/sheet
 ---
 
 import { playground, basicDemo, positionDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/sidebar/demo.ts b/apps/www/src/content/docs/components/sidebar/demo.ts
index bf14b8110..8278e96f6 100644
--- a/apps/www/src/content/docs/components/sidebar/demo.ts
+++ b/apps/www/src/content/docs/components/sidebar/demo.ts
@@ -13,22 +13,22 @@ export const preview = {
       </Flex>
     </Sidebar.Header>
     <Sidebar.Main>
-      <Sidebar.Group label="Main" leadingIcon={<Info />}>
-        <Sidebar.Item href="#" leadingIcon={<Info />} active>
+      <Sidebar.Group label="Main" leadingIcon={<Info size={16} />}>
+        <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>
           Dashboard
         </Sidebar.Item>
-        <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
+        <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>
           Settings
         </Sidebar.Item>
       </Sidebar.Group>
       <Sidebar.Group label="Support">
-        <Sidebar.Item href="#" leadingIcon={<Info />}>
+        <Sidebar.Item href="#" leadingIcon={<Info size={16} />}>
           Help
         </Sidebar.Item>
       </Sidebar.Group>
     </Sidebar.Main>
     <Sidebar.Footer>
-      <Sidebar.Item href="#" leadingIcon={<Info />}>
+      <Sidebar.Item href="#" leadingIcon={<Info size={16} />}>
         Help
       </Sidebar.Item>
     </Sidebar.Footer>
@@ -51,8 +51,8 @@ export const positionDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     },
@@ -69,8 +69,8 @@ export const positionDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     }
@@ -92,8 +92,8 @@ export const stateDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     },
@@ -109,8 +109,8 @@ export const stateDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     },
@@ -126,8 +126,8 @@ export const stateDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     },
@@ -143,8 +143,8 @@ export const stateDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
     }
@@ -166,8 +166,8 @@ export const tooltipDemo = {
             </Flex>
           </Sidebar.Header>
           <Sidebar.Main>
-            <Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
+            <Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
           </Sidebar.Main>
         </Sidebar>`
 };
diff --git a/apps/www/src/content/docs/components/sidebar/index.mdx b/apps/www/src/content/docs/components/sidebar/index.mdx
index f0aab99c5..98342a310 100644
--- a/apps/www/src/content/docs/components/sidebar/index.mdx
+++ b/apps/www/src/content/docs/components/sidebar/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Sidebar
 description: A collapsible side navigation panel component.
+source: packages/raystack/components/sidebar
 ---
 
 import { preview, positionDemo, stateDemo, tooltipDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/sidepanel/demo.ts b/apps/www/src/content/docs/components/sidepanel/demo.ts
index 0f5ee6d36..843c97021 100644
--- a/apps/www/src/content/docs/components/sidepanel/demo.ts
+++ b/apps/www/src/content/docs/components/sidepanel/demo.ts
@@ -61,3 +61,43 @@ export const basicDemo = {
 </SidePanel>;
   `
 };
+
+export const positionDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Right',
+      code: `
+  <SidePanel side="right">
+    <SidePanel.Header title="Right Side Panel" />
+    <SidePanel.Section>
+      <List>
+        <List.Header>User Information</List.Header>
+        <List.Item align="center">
+          <List.Label minWidth="88px">Status</List.Label>
+          <List.Value>Active</List.Value>
+        </List.Item>
+      </List>
+    </SidePanel.Section>
+  </SidePanel>
+  `
+    },
+    {
+      name: 'Left',
+      code: `
+      <SidePanel side="left">
+        <SidePanel.Header title="Left Side Panel" />
+         <SidePanel.Section>
+      <List>
+        <List.Header>User Information</List.Header>
+        <List.Item align="center">
+          <List.Label minWidth="88px">Status</List.Label>
+          <List.Value>Active</List.Value>
+        </List.Item>
+      </List>
+    </SidePanel.Section>
+      </SidePanel>
+    `
+    }
+  ]
+};
diff --git a/apps/www/src/content/docs/components/sidepanel/index.mdx b/apps/www/src/content/docs/components/sidepanel/index.mdx
index 262b84f06..d63561d76 100644
--- a/apps/www/src/content/docs/components/sidepanel/index.mdx
+++ b/apps/www/src/content/docs/components/sidepanel/index.mdx
@@ -1,9 +1,10 @@
 ---
 title: Sidepanel
 description: A flexible side panel component to place content on either side of the page.
+source: packages/raystack/components/sidepanel
 ---
 
-import { basicDemo, preview } from "./demo.ts";
+import { basicDemo, positionDemo, preview } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -30,3 +31,9 @@ The `SidePanel` component is composed of several parts, each with their own prop
 ### Basic Usage
 
 <Demo data={basicDemo} />
+
+### Position
+
+The SidePanel can be positioned on either the left or right side of the screen.
+
+<Demo data={positionDemo} />
diff --git a/apps/www/src/content/docs/components/skeleton/index.mdx b/apps/www/src/content/docs/components/skeleton/index.mdx
index 8deb89b72..195586639 100644
--- a/apps/www/src/content/docs/components/skeleton/index.mdx
+++ b/apps/www/src/content/docs/components/skeleton/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Skeleton
 description: A placeholder loading state that mimics the layout of content while it's being loaded.
+source: packages/raystack/components/skeleton
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/slider/index.mdx b/apps/www/src/content/docs/components/slider/index.mdx
index 23154482d..b007f29af 100644
--- a/apps/www/src/content/docs/components/slider/index.mdx
+++ b/apps/www/src/content/docs/components/slider/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Slider
 description: A control that allows users to select a value or range from a given range.
-tag: update
+source: packages/raystack/components/slider
 ---
 
 import { playground, variantDemo, controlDemo, thumbSizeDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/spinner/demo.ts b/apps/www/src/content/docs/components/spinner/demo.ts
index fd4207cca..c999dd879 100644
--- a/apps/www/src/content/docs/components/spinner/demo.ts
+++ b/apps/www/src/content/docs/components/spinner/demo.ts
@@ -10,12 +10,10 @@ export const playground = {
   type: 'playground',
   controls: {
     size: {
-      type: 'number',
-      options: [1, 2, 3, 4, 5, 6],
-      defaultValue: 1,
-      initialValue: 4,
-      min: 1,
-      max: 6
+      type: 'select',
+      options: ['1', '2', '3', '4', '5', '6'],
+      defaultValue: '1',
+      initialValue: '4'
     },
     color: {
       type: 'select',
diff --git a/apps/www/src/content/docs/components/spinner/index.mdx b/apps/www/src/content/docs/components/spinner/index.mdx
index deeb57904..d97878977 100644
--- a/apps/www/src/content/docs/components/spinner/index.mdx
+++ b/apps/www/src/content/docs/components/spinner/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Spinner
 description: A visual indicator of a loading or processing state.
+source: packages/raystack/components/spinner
 ---
 
 import { playground, sizeDemo, colorDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/switch/index.mdx b/apps/www/src/content/docs/components/switch/index.mdx
index a5f9254f5..8110505ff 100644
--- a/apps/www/src/content/docs/components/switch/index.mdx
+++ b/apps/www/src/content/docs/components/switch/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
+source: packages/raystack/components/switch
 ---
 
 import { playground, stateDemo, sizeDemo, controlDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/table/index.mdx b/apps/www/src/content/docs/components/table/index.mdx
index 1ddb379ee..93573036b 100644
--- a/apps/www/src/content/docs/components/table/index.mdx
+++ b/apps/www/src/content/docs/components/table/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Table
 description: A responsive table component to show structured data.
+source: packages/raystack/components/table
 ---
 
 import { preview, basicDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/tabs/index.mdx b/apps/www/src/content/docs/components/tabs/index.mdx
index bb3ca13de..5a12685d3 100644
--- a/apps/www/src/content/docs/components/tabs/index.mdx
+++ b/apps/www/src/content/docs/components/tabs/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Tabs
 description: A set of layered sections of content that display one panel at a time.
+source: packages/raystack/components/tabs
 ---
 
 import { preview, basicDemo, iconsDemo, disabledDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/text/index.mdx b/apps/www/src/content/docs/components/text/index.mdx
index f5f00568f..c4a191cc9 100644
--- a/apps/www/src/content/docs/components/text/index.mdx
+++ b/apps/www/src/content/docs/components/text/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Text
 description: Component for Text
+source: packages/raystack/components/text
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/textarea/index.mdx b/apps/www/src/content/docs/components/textarea/index.mdx
index 4e2379d10..ec6c3c317 100644
--- a/apps/www/src/content/docs/components/textarea/index.mdx
+++ b/apps/www/src/content/docs/components/textarea/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: TextArea
 description: A multi-line text input field with support for labels and helper text.
+source: packages/raystack/components/textarea
 ---
 
 import {
diff --git a/apps/www/src/content/docs/components/toast/index.mdx b/apps/www/src/content/docs/components/toast/index.mdx
index b30735f44..0e97ba34d 100644
--- a/apps/www/src/content/docs/components/toast/index.mdx
+++ b/apps/www/src/content/docs/components/toast/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Toast
 description: Toast wrapper and function. Toast internally uses Sonner
+source: packages/raystack/components/toast
 ---
 
 import { preview, basicDemo, iconsDemo, disabledDemo } from "./demo.ts";
diff --git a/apps/www/src/content/docs/components/tooltip/index.mdx b/apps/www/src/content/docs/components/tooltip/index.mdx
index 6a19be3c3..bd0485b06 100644
--- a/apps/www/src/content/docs/components/tooltip/index.mdx
+++ b/apps/www/src/content/docs/components/tooltip/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Tooltip
 description: A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
+source: packages/raystack/components/tooltip
 ---
 
 import { playground, sideDemo, customDemo,followCursorDemo, providerDemo } from "./demo.ts";
diff --git a/apps/www/src/lib/source.ts b/apps/www/src/lib/source.ts
index e49014b4b..3f6ec71fa 100644
--- a/apps/www/src/lib/source.ts
+++ b/apps/www/src/lib/source.ts
@@ -1,7 +1,22 @@
+import { LoaderPlugin, loader } from 'fumadocs-core/source';
 import { docs as RAW_DOCS } from '@/.source';
-import { loader } from 'fumadocs-core/source';
+import { TagType } from './types';
 
 export const docs = loader({
   baseUrl: '/docs',
-  source: RAW_DOCS.toFumadocsSource()
+  source: RAW_DOCS.toFumadocsSource(),
+  plugins: [addFrontmatterToPageTree()]
 });
+
+function addFrontmatterToPageTree(): LoaderPlugin {
+  return {
+    transformPageTree: {
+      file(node, file) {
+        const data = this.storage.read(file as string);
+        const frontmatter = data?.data as Record<string, unknown> | undefined;
+        const tag: TagType = (frontmatter?.tag as TagType) ?? undefined;
+        return { ...node, tag };
+      }
+    }
+  };
+}
diff --git a/apps/www/src/styles.css b/apps/www/src/styles.css
index 15700dd8c..68914c329 100644
--- a/apps/www/src/styles.css
+++ b/apps/www/src/styles.css
@@ -14,3 +14,23 @@ div.prose > table td code {
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+a {
+  text-decoration: none;
+}
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index 2d8b966ec..f1bd1dde8 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -83,7 +83,7 @@
 .button-outline {
   background-color: var(--rs-color-background-base-primary);
   color: var(--rs-color-foreground-accent-primary);
-  border: 1px solid var(--rs-color-border-accent-emphasis);
+  border: 0.5px solid var(--rs-color-border-accent-emphasis);
 }
 
 .button-outline:hover {
@@ -407,7 +407,7 @@
 .button-outline-neutral {
   background-color: var(--rs-color-background-base-primary);
   color: var(--rs-color-foreground-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border-color: var(--rs-color-border-base-tertiary);
 }
 
 .button-outline-neutral:hover {
diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
index 759105ffe..aa6d33a8e 100644
--- a/packages/raystack/components/calendar/calendar.module.css
+++ b/packages/raystack/components/calendar/calendar.module.css
@@ -171,7 +171,7 @@
 .calendarPopover {
   padding: var(--rs-space-3) !important;
   /* border: none !important; */
-  border: 1px solid var(--rs-color-border-base-primary) !important;
+  border: 0.5px solid var(--rs-color-border-base-primary) !important;
   min-width: max-content;
   width: fit-content;
   max-width: none !important;
diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css
index c447bef7e..be770f299 100644
--- a/packages/raystack/components/callout/callout.module.css
+++ b/packages/raystack/components/callout/callout.module.css
@@ -8,6 +8,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
+  border: 0.5px solid transparent;
 }
 
 .container {
@@ -112,7 +113,7 @@
 
 .callout-outline.callout-grey {
   background: var(--rs-color-background-neutral-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
 }
 
 .callout-outline.callout-success {
@@ -122,17 +123,17 @@
 
 .callout-outline.callout-alert {
   background: var(--rs-color-background-danger-primary);
-  border: 1px solid var(--rs-color-border-danger-primary);
+  border: 0.5px solid var(--rs-color-border-danger-primary);
 }
 
 .callout-outline.callout-accent {
   background: var(--rs-color-background-accent-primary);
-  border: 1px solid var(--rs-color-border-accent-primary);
+  border: 0.5px solid var(--rs-color-border-accent-primary);
 }
 
 .callout-outline.callout-attention {
   background: var(--rs-color-background-attention-primary);
-  border: 1px solid var(--rs-color-border-attention-primary);
+  border: 0.5px solid var(--rs-color-border-attention-primary);
   color: var(--rs-color-foreground-base-secondary);
 }
 
@@ -171,25 +172,25 @@
 
 .callout-outline.callout-high-contrast.callout-grey {
   background: var(--rs-color-background-neutral-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-alert {
   background: var(--rs-color-background-danger-primary);
-  border: 1px solid var(--rs-color-border-danger-primary);
+  border: 0.5px solid var(--rs-color-border-danger-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-accent {
   background: var(--rs-color-background-accent-primary);
-  border: 1px solid var(--rs-color-border-accent-primary);
+  border: 0.5px solid var(--rs-color-border-accent-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-attention {
   background: var(--rs-color-background-attention-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -201,7 +202,7 @@
 
 .callout-outline.callout-gradient {
   background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
-  border: 1px solid #ef040444;
+  border: 0.5px solid #ef040444;
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -213,7 +214,7 @@
 
 .callout-outline.callout-high-contrast.callout-gradient {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -225,7 +226,7 @@
 
 .callout-outline.callout-normal {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -236,6 +237,6 @@
 
 .callout-outline.callout-high-contrast.callout-normal {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index be9476594..76bed9e30 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -49,7 +49,7 @@
 
 .chip-color-neutral.chip-variant-outline:active,
 .chip-color-neutral.chip-variant-outline[data-state="active"] {
-  border: 1px solid var(--rs-color-border-base-emphasis);
+  border: 0.5px solid var(--rs-color-border-base-emphasis);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -84,7 +84,7 @@
 
 .chip-color-accent.chip-variant-outline:active,
 .chip-color-accent.chip-variant-outline[data-state="active"] {
-  border: 1px solid var(--rs-color-border-accent-emphasis);
+  border: 0.5px solid var(--rs-color-border-accent-emphasis);
   color: var(--rs-color-foreground-accent-primary);
 }
 
diff --git a/packages/raystack/components/chip/chip.tsx b/packages/raystack/components/chip/chip.tsx
index 1c987c6d7..dfe459601 100644
--- a/packages/raystack/components/chip/chip.tsx
+++ b/packages/raystack/components/chip/chip.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 
 import styles from './chip.module.css';
diff --git a/packages/raystack/components/code-block/code-block-code.tsx b/packages/raystack/components/code-block/code-block-code.tsx
index 759616d42..d5588fb6f 100644
--- a/packages/raystack/components/code-block/code-block-code.tsx
+++ b/packages/raystack/components/code-block/code-block-code.tsx
@@ -1,13 +1,12 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { Highlight } from 'prism-react-renderer';
-import { Language } from 'prism-react-renderer';
-import { HTMLAttributes, forwardRef, memo } from 'react';
+import { Highlight, Language } from 'prism-react-renderer';
+import { forwardRef, HTMLAttributes, memo } from 'react';
 import { useIsomorphicLayoutEffect } from '~/hooks';
-import { useCodeBlockContext } from './code-block-root';
-import styles from './code-block.module.css';
 import code from './code.module.css';
+import styles from './code-block.module.css';
+import { useCodeBlockContext } from './code-block-root';
 
 export interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {
   children: string;
diff --git a/packages/raystack/components/code-block/code-block-language-select.tsx b/packages/raystack/components/code-block/code-block-language-select.tsx
index fe2e2a225..c3cc9acfc 100644
--- a/packages/raystack/components/code-block/code-block-language-select.tsx
+++ b/packages/raystack/components/code-block/code-block-language-select.tsx
@@ -5,8 +5,8 @@ import { Language } from 'prism-react-renderer';
 import { ComponentProps, ElementRef, forwardRef } from 'react';
 import { Select } from '../select';
 import { SingleSelectProps } from '../select/select-root';
-import { useCodeBlockContext } from './code-block-root';
 import styles from './code-block.module.css';
+import { useCodeBlockContext } from './code-block-root';
 
 export const CodeBlockLanguageSelect = (props: SingleSelectProps) => {
   const { value, setValue } = useCodeBlockContext();
diff --git a/packages/raystack/components/code-block/code-block-misc.tsx b/packages/raystack/components/code-block/code-block-misc.tsx
index 63b4a7571..25330596e 100644
--- a/packages/raystack/components/code-block/code-block-misc.tsx
+++ b/packages/raystack/components/code-block/code-block-misc.tsx
@@ -1,13 +1,19 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentProps, ElementRef, HTMLAttributes, forwardRef } from 'react';
+import {
+  ComponentProps,
+  ElementRef,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode
+} from 'react';
 import { Button } from '../button';
 import { CopyButton } from '../copy-button';
 import { Flex } from '../flex';
 import { Text } from '../text';
-import { useCodeBlockContext } from './code-block-root';
 import styles from './code-block.module.css';
+import { useCodeBlockContext } from './code-block-root';
 
 export const CodeBlockContent = forwardRef<
   HTMLDivElement,
@@ -54,32 +60,51 @@ export const CodeBlockLabel = forwardRef<
 
 CodeBlockLabel.displayName = 'CodeBlockLabel';
 
+export interface CodeBlockCollapseTriggerProps
+  extends Omit<ComponentProps<typeof Button>, 'children'> {
+  children?: ReactNode | ((collapsed: boolean) => ReactNode);
+}
 export const CodeBlockCollapseTrigger = forwardRef<
   HTMLButtonElement,
-  ComponentProps<typeof Button>
->(({ className, children = 'Show Code', onClick, ...props }, ref) => {
-  const { maxLines, collapsed, toggleCollapsed, code } = useCodeBlockContext();
-  const canCollapse = maxLines && maxLines > 0;
-  const lineCount = code?.split('\n').length ?? 0;
+  CodeBlockCollapseTriggerProps
+>(
+  (
+    {
+      className,
+      children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const { maxLines, collapsed, toggleCollapsed, code } =
+      useCodeBlockContext();
+    const canCollapse = maxLines && maxLines > 0;
+    const lineCount = code?.split('\n').length ?? 0;
 
-  if (!canCollapse || !collapsed || lineCount < maxLines) return null;
+    if (!canCollapse || lineCount < maxLines) return null;
 
-  return (
-    <Button
-      ref={ref}
-      onClick={e => {
-        toggleCollapsed();
-        onClick?.(e);
-      }}
-      variant='text'
-      color='neutral'
-      className={cx(styles.collapseTrigger, className)}
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        onClick={e => {
+          toggleCollapsed();
+          onClick?.(e);
+        }}
+        variant='text'
+        color='neutral'
+        className={cx(
+          styles.collapseTrigger,
+          collapsed && styles.collapsed,
+          className
+        )}
+        {...props}
+      >
+        {typeof children === 'function' ? children(!!collapsed) : children}
+      </Button>
+    );
+  }
+);
 
 CodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';
 
diff --git a/packages/raystack/components/code-block/code-block-root.tsx b/packages/raystack/components/code-block/code-block-root.tsx
index 11ba2afa0..a6e30f219 100644
--- a/packages/raystack/components/code-block/code-block-root.tsx
+++ b/packages/raystack/components/code-block/code-block-root.tsx
@@ -2,9 +2,9 @@
 
 import { cx } from 'class-variance-authority';
 import {
-  HTMLAttributes,
   createContext,
   forwardRef,
+  HTMLAttributes,
   useCallback,
   useContext,
   useState
diff --git a/packages/raystack/components/code-block/code-block.module.css b/packages/raystack/components/code-block/code-block.module.css
index 590590257..776e69df1 100644
--- a/packages/raystack/components/code-block/code-block.module.css
+++ b/packages/raystack/components/code-block/code-block.module.css
@@ -38,14 +38,16 @@
 
 /* Collapse Trigger */
 .collapseTrigger {
-  position: absolute;
-  bottom: 0;
   width: 100%;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: var(--rs-color-background-base-secondary);
   border-top: 0.5px solid var(--rs-color-border-base-primary);
 }
+.collapseTrigger.collapsed {
+  position: absolute;
+  bottom: 0;
+}
 
 /* Code Block Code */
 .codeContent {
@@ -88,7 +90,7 @@
   right: var(--rs-space-5);
   padding: var(--rs-space-2) var(--rs-space-3);
   width: fit-content;
-  height: fit-content;
+  height: auto;
   border-radius: var(--rs-radius-2);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
diff --git a/packages/raystack/components/data-table/components/filters.tsx b/packages/raystack/components/data-table/components/filters.tsx
index a716b9081..4573f7e9c 100644
--- a/packages/raystack/components/data-table/components/filters.tsx
+++ b/packages/raystack/components/data-table/components/filters.tsx
@@ -128,26 +128,30 @@ export function Filters<TData, TValue>({
 
   return (
     <Flex gap={3} className={className}>
-      <Flex gap={3} className={classNames?.container}>
-        {appliedFilters.map(filter => (
-          <FilterChip
-            key={filter.name}
-            label={filter.label}
-            value={filter.value}
-            onRemove={() => handleRemoveFilter(filter.name)}
-            onValueChange={value => handleFilterValueChange(filter.name, value)}
-            onOperationChange={operator =>
-              handleFilterOperationChange(
-                filter.name,
-                operator as FilterOperatorTypes
-              )
-            }
-            columnType={filter.filterType}
-            options={filter.options}
-            className={classNames?.filterChips}
-          />
-        ))}
-      </Flex>
+      {appliedFilters.length > 0 && (
+        <Flex gap={3} className={classNames?.container}>
+          {appliedFilters.map(filter => (
+            <FilterChip
+              key={filter.name}
+              label={filter.label}
+              value={filter.value}
+              onRemove={() => handleRemoveFilter(filter.name)}
+              onValueChange={value =>
+                handleFilterValueChange(filter.name, value)
+              }
+              onOperationChange={operator =>
+                handleFilterOperationChange(
+                  filter.name,
+                  operator as FilterOperatorTypes
+                )
+              }
+              columnType={filter.filterType}
+              options={filter.options}
+              className={classNames?.filterChips}
+            />
+          ))}
+        </Flex>
+      )}
       <AddFilter
         columnList={columnList}
         appliedFiltersSet={appliedFiltersSet}
diff --git a/packages/raystack/components/data-table/hooks/useFilters.tsx b/packages/raystack/components/data-table/hooks/useFilters.tsx
index 8c11b3d33..25621052a 100644
--- a/packages/raystack/components/data-table/hooks/useFilters.tsx
+++ b/packages/raystack/components/data-table/hooks/useFilters.tsx
@@ -1,11 +1,11 @@
-import { useDataTable } from "./useDataTable";
 import {
-  filterOperators,
   FilterOperatorTypes,
   FilterType,
-} from "~/types/filters";
-import { DataTableColumn } from "../data-table.types";
-import { getDataType } from "../utils/filter-operations";
+  filterOperators
+} from '~/types/filters';
+import { DataTableColumn } from '../data-table.types';
+import { getDataType } from '../utils/filter-operations';
+import { useDataTable } from './useDataTable';
 
 export function useFilters<TData, TValue>() {
   const { updateTableQuery } = useDataTable();
@@ -21,10 +21,10 @@ export function useFilters<TData, TValue>() {
       filterType === FilterType.date
         ? new Date()
         : filterType === FilterType.select
-        ? options[0].value
-        : "";
+          ? options[0].value
+          : '';
 
-    updateTableQuery((query) => {
+    updateTableQuery(query => {
       return {
         ...query,
         filters: [
@@ -35,32 +35,32 @@ export function useFilters<TData, TValue>() {
             _type: filterType,
             name: id,
             value: defaultValue,
-            operator: defaultFilter.value,
-          },
-        ],
+            operator: defaultFilter.value
+          }
+        ]
       };
     });
   }
 
   function handleRemoveFilter(columnId: string) {
-    updateTableQuery((query) => {
+    updateTableQuery(query => {
       return {
         ...query,
-        filters: query.filters?.filter((filter) => filter.name !== columnId),
+        filters: query.filters?.filter(filter => filter.name !== columnId)
       };
     });
   }
 
   function handleFilterValueChange(columnId: string, value: any) {
-    updateTableQuery((query) => {
+    updateTableQuery(query => {
       return {
         ...query,
-        filters: query.filters?.map((filter) => {
+        filters: query.filters?.map(filter => {
           if (filter.name === columnId) {
             return { ...filter, value };
           }
           return filter;
-        }),
+        })
       };
     });
   }
@@ -69,15 +69,15 @@ export function useFilters<TData, TValue>() {
     columnId: string,
     operator: FilterOperatorTypes
   ) {
-    updateTableQuery((query) => {
+    updateTableQuery(query => {
       return {
         ...query,
-        filters: query.filters?.map((filter) => {
+        filters: query.filters?.map(filter => {
           if (filter.name === columnId) {
             return { ...filter, operator };
           }
           return filter;
-        }),
+        })
       };
     });
   }
@@ -86,6 +86,6 @@ export function useFilters<TData, TValue>() {
     onAddFilter,
     handleRemoveFilter,
     handleFilterValueChange,
-    handleFilterOperationChange,
+    handleFilterOperationChange
   };
 }
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index d58bc833f..f2f4b0076 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -7,7 +7,7 @@
 
 .dialogContent {
   background-color: var(--rs-color-background-base-primary);
-  border-radius: var(--rs-radius-4);
+  border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-floating);
   position: fixed;
   top: 50%;
diff --git a/packages/raystack/components/dialog/dialog.tsx b/packages/raystack/components/dialog/dialog.tsx
index 6d3642ee1..08b1ee094 100644
--- a/packages/raystack/components/dialog/dialog.tsx
+++ b/packages/raystack/components/dialog/dialog.tsx
@@ -1,5 +1,5 @@
 import { Cross1Icon } from '@radix-ui/react-icons';
-import { VariantProps, cva, cx } from 'class-variance-authority';
+import { cva, cx, VariantProps } from 'class-variance-authority';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import {
   ComponentProps,
@@ -143,7 +143,11 @@ interface DialogTitleProps
   children: React.ReactNode;
 }
 
-function DialogTitle({ children, className, ...props }: DialogTitleProps) {
+export function DialogTitle({
+  children,
+  className,
+  ...props
+}: DialogTitleProps) {
   return (
     <DialogPrimitive.Title
       {...props}
@@ -162,7 +166,7 @@ interface DialogDescriptionProps
   className?: string;
 }
 
-function DialogDescription({
+export function DialogDescription({
   children,
   className,
   ...props
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css b/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
index 6e3e5377a..29b30396a 100644
--- a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
@@ -12,7 +12,7 @@
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-lifted);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
   min-width: var(--popover-anchor-width);
 }
diff --git a/packages/raystack/components/filter-chip/filter-chip.module.css b/packages/raystack/components/filter-chip/filter-chip.module.css
index 404fffe97..e5d00ffb2 100644
--- a/packages/raystack/components/filter-chip/filter-chip.module.css
+++ b/packages/raystack/components/filter-chip/filter-chip.module.css
@@ -150,12 +150,12 @@ button.selectValue:hover {
   border-radius: var(--rs-radius-1);
   min-height: 18px;
   height: 18px;
+  border: none;
+  box-shadow: none;
 }
 
 /* Match height of InputField when FilterChip variant is text */
 .chip[data-variant="text"] .inputField {
-  border: none;
-  box-shadow: none;
   height: 24px;
   min-height: 24px;
 }
@@ -178,12 +178,12 @@ button.selectValue:hover {
   width: 100%;
   height: 18px;
   min-height: 18px;
+  border: none;
+  box-shadow: none;
 }
 
-/* Remove border and match height of the DatePicker when FilterChip variant is text */
+/* match height of the DatePicker when FilterChip variant is text */
 .chip[data-variant="text"] .dateField {
-  border: none;
-  box-shadow: none;
   height: 24px;
   min-height: 24px;
 }
diff --git a/packages/raystack/components/filter-chip/filter-chip.tsx b/packages/raystack/components/filter-chip/filter-chip.tsx
index 6dc51bfaa..3cb6d9bbb 100644
--- a/packages/raystack/components/filter-chip/filter-chip.tsx
+++ b/packages/raystack/components/filter-chip/filter-chip.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Cross1Icon } from '@radix-ui/react-icons';
-import { VariantProps, cva, cx } from 'class-variance-authority';
+import { cva, cx, VariantProps } from 'class-variance-authority';
 import { ReactElement, ReactNode, useCallback, useState } from 'react';
 import {
   FilterOperation,
@@ -16,8 +16,8 @@ import { Flex } from '../flex';
 import { InputField } from '../input-field';
 import { Select } from '../select';
 import { Text } from '../text';
-import { Operation } from './filter-chip-operation';
 import styles from './filter-chip.module.css';
+import { Operation } from './filter-chip-operation';
 
 const chip = cva(styles.chip, {
   variants: {
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
index da1dbaa64..82b1f50d3 100644
--- a/packages/raystack/components/input-field/input-field.module.css
+++ b/packages/raystack/components/input-field/input-field.module.css
@@ -28,7 +28,6 @@
   border-radius: var(--rs-radius-2);
   border: 1px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
   box-sizing: border-box;
   overflow: hidden;
@@ -44,7 +43,6 @@
   border-color: var(--rs-color-border-accent-emphasis);
   background-color: var(--rs-color-background-base-primary);
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-accent-emphasis), 0.2);
 }
 
 .input-error-wrapper {
@@ -57,7 +55,6 @@
 
 .input-error-wrapper:focus-within {
   border-color: var(--rs-color-border-danger-emphasis-hover);
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-danger-primary), 0.2);
 }
 
 .input-disabled-wrapper {
@@ -296,32 +293,22 @@
 
 .variant-borderless {
   border-color: transparent;
-  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
-  box-shadow: none;
 }
 
 .variant-borderless:hover {
   border-color: transparent;
-  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); */
-  box-shadow: none;
 }
 
 .variant-borderless:focus-within {
   border-color: transparent;
-  /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16); */
-  box-shadow: none;
   outline: none;
 }
 
 .input-error-wrapper.variant-borderless {
   border-color: transparent;
-  /* box-shadow: 0 2px 8px rgba(var(--rs-color-border-danger-primary), 0.2); */
-  box-shadow: none;
 }
 
 .input-error-wrapper.variant-borderless:hover,
 .input-error-wrapper.variant-borderless:focus-within {
   border-color: transparent;
-  /* box-shadow: 0 2px 12px rgba(var(--rs-color-border-danger-primary), 0.3); */
-  box-shadow: none;
 }
diff --git a/packages/raystack/components/list/list.module.css b/packages/raystack/components/list/list.module.css
index b3dca9d44..d07383596 100644
--- a/packages/raystack/components/list/list.module.css
+++ b/packages/raystack/components/list/list.module.css
@@ -1,7 +1,6 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-3);
   padding: 0;
   margin: 0;
   list-style-type: none;
@@ -34,7 +33,6 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-
 .label {
   font-size: var(--rs-font-size-small);
   font-weight: var(--rs-font-weight-medium);
@@ -56,4 +54,4 @@
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
   color: var(--rs-color-foreground-base-primary);
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/navbar/navbar-sections.tsx b/packages/raystack/components/navbar/navbar-sections.tsx
index 74df29635..68a2e7224 100644
--- a/packages/raystack/components/navbar/navbar-sections.tsx
+++ b/packages/raystack/components/navbar/navbar-sections.tsx
@@ -13,7 +13,7 @@ export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
     <Flex
       ref={ref}
       align='center'
-      gap={3}
+      gap={5}
       className={cx(styles.start, className)}
       role={ariaLabel ? 'group' : undefined}
       aria-label={ariaLabel}
@@ -33,7 +33,7 @@ export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
     <Flex
       ref={ref}
       align='center'
-      gap={3}
+      gap={5}
       className={cx(styles.end, className)}
       role={ariaLabel ? 'group' : undefined}
       aria-label={ariaLabel}
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
index 7062e0e31..f43804266 100644
--- a/packages/raystack/components/navbar/navbar.module.css
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   width: 100%;
-  padding: var(--rs-space-4) var(--rs-space-6);
+  padding: var(--rs-space-4) var(--rs-space-7);
   background: var(--rs-color-background-base-primary);
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-feather);
diff --git a/packages/raystack/components/search/search.module.css b/packages/raystack/components/search/search.module.css
index 90952b388..3ef5501a4 100644
--- a/packages/raystack/components/search/search.module.css
+++ b/packages/raystack/components/search/search.module.css
@@ -3,6 +3,9 @@
   flex-direction: column;
   width: 100%;
 }
+.container input {
+  padding: 0 var(--rs-space-3);
+}
 
 .clearButtonWrapper {
   display: flex;
@@ -26,4 +29,4 @@
 .clearButton svg {
   width: 12px;
   height: 12px;
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 4850cc98d..5e8c7fb8a 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -8,7 +8,7 @@
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-soft);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   min-width: var(--radix-select-trigger-width);
   transition: all 0.2s ease;
   max-height: 320px;
@@ -67,11 +67,11 @@
   user-select: none;
   -webkit-user-select: none;
   transition: all 0.2s ease;
+  box-shadow: var(--rs-shadow-feather);
 }
 
 .trigger-outline {
   border: 0.5px solid var(--rs-color-border-base-secondary);
-  box-shadow: var(--rs-shadow-feather);
 }
 
 .trigger-text {
@@ -155,7 +155,7 @@
 .content[data-variant="text"] {
   margin-top: var(--rs-space-2);
   padding: var(--rs-space-1);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-soft);
 }
 
diff --git a/packages/raystack/components/sheet/sheet.tsx b/packages/raystack/components/sheet/sheet.tsx
index ffb7de475..234d06112 100644
--- a/packages/raystack/components/sheet/sheet.tsx
+++ b/packages/raystack/components/sheet/sheet.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Cross1Icon } from '@radix-ui/react-icons';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import {
   ComponentProps,
@@ -9,7 +9,7 @@ import {
   ElementRef,
   forwardRef
 } from 'react';
-
+import { DialogDescription, DialogTitle } from '../dialog/dialog';
 import styles from './sheet.module.css';
 
 const sheetContent = cva(styles.sheetContent, {
@@ -124,6 +124,6 @@ export const Sheet = Object.assign(RootSheet, {
   Trigger: DialogPrimitive.Trigger,
   Content: SheetContent,
   Close: DialogPrimitive.Close,
-  Title: DialogPrimitive.Title,
-  Description: DialogPrimitive.Description
+  Title: DialogTitle,
+  Description: DialogDescription
 });
diff --git a/packages/raystack/components/side-panel/side-panel.module.css b/packages/raystack/components/side-panel/side-panel.module.css
index f9e53a628..f4526ee63 100644
--- a/packages/raystack/components/side-panel/side-panel.module.css
+++ b/packages/raystack/components/side-panel/side-panel.module.css
@@ -12,10 +12,6 @@
   border-left: 0.5px solid var(--rs-color-border-base-primary);
 }
 
-.side-panel-header {
-  border-right: 0.5px solid var(--rs-color-border-base-primary);
-}
-
 .side-panel-header {
   padding: var(--rs-space-5);
   display: flex;
diff --git a/packages/raystack/components/side-panel/side-panel.tsx b/packages/raystack/components/side-panel/side-panel.tsx
index c13f68c00..471169948 100644
--- a/packages/raystack/components/side-panel/side-panel.tsx
+++ b/packages/raystack/components/side-panel/side-panel.tsx
@@ -1,31 +1,30 @@
-import React from "react";
-import { VariantProps, cva } from "class-variance-authority";
+import { cva, VariantProps } from 'class-variance-authority';
+import { Fragment, ReactNode } from 'react';
+import { Flex } from '../flex';
+import { Text } from '../text';
+import styles from './side-panel.module.css';
 
-import styles from "./side-panel.module.css";
-import { Flex } from "../flex";
-import { Text } from "../text";
-
-const sidePanelRoot = cva(styles["side-panel"], {
+const sidePanelRoot = cva(styles['side-panel'], {
   variants: {
     side: {
-      left: styles["side-panel-left"],
-      right: styles["side-panel-right"],
-    },
+      left: styles['side-panel-left'],
+      right: styles['side-panel-right']
+    }
   },
   defaultVariants: {
-    side: "right",
-  },
+    side: 'right'
+  }
 });
 
 interface SidePanelProps extends VariantProps<typeof sidePanelRoot> {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
 }
 
 const SidePanelRoot = ({
   children,
-  side = "right",
-  className,
+  side = 'right',
+  className
 }: SidePanelProps) => {
   return (
     <aside className={sidePanelRoot({ side, className })}>{children}</aside>
@@ -34,8 +33,8 @@ const SidePanelRoot = ({
 
 interface SidePanelHeaderProps {
   title: string;
-  icon?: React.ReactNode;
-  actions?: Array<React.ReactNode>;
+  icon?: ReactNode;
+  actions?: Array<ReactNode>;
   description?: string;
 }
 
@@ -43,11 +42,11 @@ const SidePanelHeader = ({
   title,
   icon,
   actions = [],
-  description,
+  description
 }: SidePanelHeaderProps) => {
   return (
-    <div className={styles["side-panel-header"]}>
-      <Flex gap={3} justify="between" align="center">
+    <div className={styles['side-panel-header']}>
+      <Flex gap={3} justify='between' align='center'>
         <Flex gap={3}>
           {icon}
           <Text size={5} weight={500}>
@@ -56,7 +55,7 @@ const SidePanelHeader = ({
         </Flex>
         <Flex gap={3}>
           {actions?.map((action, index) => (
-            <React.Fragment key={index}>{action}</React.Fragment>
+            <Fragment key={index}>{action}</Fragment>
           ))}
         </Flex>
       </Flex>
@@ -66,14 +65,14 @@ const SidePanelHeader = ({
 };
 
 interface SidePanelSectionProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const SidePanelSection = ({ children }: SidePanelSectionProps) => {
-  return <div className={styles["side-panel-section"]}>{children}</div>;
+  return <div className={styles['side-panel-section']}>{children}</div>;
 };
 
 export const SidePanel = Object.assign(SidePanelRoot, {
   Header: SidePanelHeader,
-  Section: SidePanelSection,
+  Section: SidePanelSection
 });
diff --git a/packages/raystack/components/sidebar/sidebar-item.tsx b/packages/raystack/components/sidebar/sidebar-item.tsx
index 339867522..a5e4a96eb 100644
--- a/packages/raystack/components/sidebar/sidebar-item.tsx
+++ b/packages/raystack/components/sidebar/sidebar-item.tsx
@@ -3,17 +3,17 @@
 import { cx } from 'class-variance-authority';
 import {
   ComponentPropsWithoutRef,
-  ReactElement,
-  ReactNode,
   cloneElement,
   forwardRef,
+  ReactElement,
+  ReactNode,
   useContext
 } from 'react';
 import { Avatar } from '../avatar';
 import { Flex } from '../flex';
 import { Tooltip } from '../tooltip';
-import { SidebarContext } from './sidebar-root';
 import styles from './sidebar.module.css';
+import { SidebarContext } from './sidebar-root';
 
 export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
   leadingIcon?: ReactNode;
@@ -49,6 +49,13 @@ export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
       typeof children === 'string' &&
       children.length > 0;
 
+    const iconProps = {
+      align: 'center',
+      gap: 3,
+      className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
+      ariaHidden: true
+    } as const;
+
     const content = cloneElement(
       as,
       {
@@ -62,13 +69,8 @@ export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
         ...props
       },
       <>
-        <Flex
-          align='center'
-          gap={3}
-          className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}
-          aria-hidden='true'
-        >
-          {shouldShowFallback ? (
+        {shouldShowFallback ? (
+          <Flex {...iconProps}>
             <Avatar
               size={1}
               variant='soft'
@@ -76,10 +78,11 @@ export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
               fallback={children[0].toUpperCase()}
               style={{ cursor: 'pointer' }}
             />
-          ) : (
-            leadingIcon
-          )}
-        </Flex>
+          </Flex>
+        ) : null}
+        {!shouldShowFallback && leadingIcon ? (
+          <Flex {...iconProps}>{leadingIcon}</Flex>
+        ) : null}
         {!isCollapsed && (
           <span className={cx(styles['nav-text'], classNames?.text)}>
             {children}
diff --git a/packages/raystack/components/sidebar/sidebar-misc.tsx b/packages/raystack/components/sidebar/sidebar-misc.tsx
index 0e94eeecb..8de58bca9 100644
--- a/packages/raystack/components/sidebar/sidebar-misc.tsx
+++ b/packages/raystack/components/sidebar/sidebar-misc.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode, forwardRef } from 'react';
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
 
@@ -42,25 +42,43 @@ export interface SidebarNavigationGroupProps
   extends ComponentPropsWithoutRef<'div'> {
   label: string;
   leadingIcon?: ReactNode;
+  classNames?: {
+    header?: string;
+    items?: string;
+    label?: string;
+    icon?: string;
+  };
 }
 
 export const SidebarNavigationGroup = forwardRef<
   HTMLElement,
   SidebarNavigationGroupProps
->(({ className, label, leadingIcon, children, ...props }, ref) => (
+>(({ className, label, leadingIcon, classNames, children, ...props }, ref) => (
   <section
     ref={ref}
     className={cx(styles['nav-group'], className)}
     aria-label={label}
     {...props}
   >
-    <Flex align='center' gap={3} className={styles['nav-group-header']}>
+    <Flex
+      align='center'
+      gap={3}
+      className={cx(styles['nav-group-header'], classNames?.header)}
+    >
       {leadingIcon && (
-        <span className={styles['nav-leading-icon']}>{leadingIcon}</span>
+        <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>
+          {leadingIcon}
+        </span>
       )}
-      <span className={styles['nav-group-label']}>{label}</span>
+      <span className={cx(styles['nav-group-label'], classNames?.label)}>
+        {label}
+      </span>
     </Flex>
-    <Flex direction='column' className={styles['nav-group-items']} role='list'>
+    <Flex
+      direction='column'
+      className={cx(styles['nav-group-items'], classNames?.items)}
+      role='list'
+    >
       {children}
     </Flex>
   </section>
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 37ec7c520..018f97c22 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -2,13 +2,11 @@
   display: flex;
   width: 220px;
   height: 100%;
-  padding: var(--rs-space-1) var(--rs-space-4) var(--rs-space-5)
-    var(--rs-space-4);
+  padding: var(--rs-space-5) var(--rs-space-4);
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   flex-shrink: 0;
-  border-right: 1px solid var(--rs-color-border-base-primary);
   background: var(--rs-color-background-base-primary);
   transition: width 0.2s ease;
   position: relative;
@@ -27,16 +25,17 @@
 }
 
 .root[data-state="collapsed"] {
-  width: 56px;
+  width: 57px;
 }
 
 .header {
   gap: var(--rs-space-3);
-  padding: var(--rs-space-6) var(--rs-space-2);
+  padding: var(--rs-space-2);
   align-self: stretch;
   border-radius: var(--rs-radius-2);
   background: var(--rs-color-background-base-primary);
   overflow: hidden;
+  margin-bottom: var(--rs-space-6);
 }
 
 .main {
@@ -149,6 +148,7 @@
   left: 0;
   right: auto;
   cursor: ew-resize;
+  transform: translateX(-50%);
 }
 
 .nav-group {
diff --git a/packages/raystack/components/slider/slider.module.css b/packages/raystack/components/slider/slider.module.css
index 9c97439f1..565d8f1e9 100644
--- a/packages/raystack/components/slider/slider.module.css
+++ b/packages/raystack/components/slider/slider.module.css
@@ -64,7 +64,7 @@
   height: 16px;
   border-radius: var(--rs-radius-full);
   background-color: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   box-shadow: var(--rs-shadow-soft);
 }
 
diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
index 6fa95bce8..b996568fa 100644
--- a/packages/raystack/components/spinner/spinner.module.css
+++ b/packages/raystack/components/spinner/spinner.module.css
@@ -56,7 +56,6 @@
 }
 
 @keyframes spin {
-
   0%,
   100% {
     opacity: 0.8;
@@ -112,13 +111,13 @@
 }
 
 .spinner-size-5 {
-  width: var(--rs-space-8);
-  height: var(--rs-space-8);
+  width: var(--rs-space-9);
+  height: var(--rs-space-9);
 }
 
 .spinner-size-6 {
-  width: var(--rs-space-9);
-  height: var(--rs-space-9);
+  width: var(--rs-space-10);
+  height: var(--rs-space-10);
 }
 
 .spinner-color-default {
@@ -143,4 +142,4 @@
 
 .spinner-color-attention {
   color: var(--rs-color-foreground-attention-primary);
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index da0fc850e..5b0bc8743 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -10,7 +10,7 @@
   gap: var(--rs-space-2);
   background-color: var(--rs-color-background-neutral-secondary);
   padding: var(--rs-space-1);
-  border-radius: var(--rs-radius-3);
+  border-radius: var(--rs-radius-2);
   width: 100%;
   box-shadow: var(--rs-shadow-inset);
 }
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index 3dd4781f3..2c822f275 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -63,7 +63,6 @@
   color: var(--rs-color-foreground-base-primary);
   padding: var(--rs-space-3);
   transition: all 0.2s ease;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
 
@@ -76,7 +75,6 @@
   border-color: var(--rs-color-border-accent-emphasis);
   background: var(--rs-color-background-base-primary);
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-accent-emphasis), 0.2);
 }
 
 .textarea::placeholder {
@@ -108,7 +106,6 @@
 
 .error:focus {
   border-color: var(--rs-color-border-danger-emphasis-hover);
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-danger-primary), 0.2);
 }
 
 .helperTextError {
diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css
index 0f11ccbd7..06bcc2e58 100644
--- a/packages/raystack/components/toast/toast.module.css
+++ b/packages/raystack/components/toast/toast.module.css
@@ -1,9 +1,3 @@
-.raystack-toast [data-sonner-toast] {
-  background: var(--rs-color-background-base-primary);
-  color: var(--rs-color-foreground-base-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
-}
-
 .toast-wrapper {
   margin-right: var(--rs-space-3);
 }
diff --git a/packages/raystack/components/toast/toast.tsx b/packages/raystack/components/toast/toast.tsx
index 12e0b546e..ff6c21851 100644
--- a/packages/raystack/components/toast/toast.tsx
+++ b/packages/raystack/components/toast/toast.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Toaster, type ToasterProps, toast as sonnerToast } from 'sonner';
+import { toast as sonnerToast, Toaster, type ToasterProps } from 'sonner';
 
 import { useTheme } from '../theme-provider';
 import { UseThemeProps } from '../theme-provider/types';
@@ -16,6 +16,15 @@ const ToastContainer = (props: ToastContainerProps) => {
     <Toaster
       theme={resolvedTheme as UseThemeProps['systemTheme']}
       className={styles['raystack-toast']}
+      toastOptions={{
+        style: {
+          background: 'var(--rs-color-background-base-primary)',
+          color: 'var(--rs-color-foreground-base-primary)',
+          border: '0.5px solid var(--rs-color-border-base-primary)',
+          padding: 'var(--rs-space-3)',
+          borderRadius: 'var(--rs-radius-2)'
+        }
+      }}
       {...props}
     />
   );
diff --git a/packages/raystack/components/tooltip/tooltip.module.css b/packages/raystack/components/tooltip/tooltip.module.css
index f77836ae3..2794b9fcd 100644
--- a/packages/raystack/components/tooltip/tooltip.module.css
+++ b/packages/raystack/components/tooltip/tooltip.module.css
@@ -10,7 +10,7 @@
   padding: var(--rs-space-2) var(--rs-space-3);
   border-radius: var(--rs-radius-2);
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-soft);
   color: var(--rs-color-foreground-base-primary);
   font-size: var(--rs-font-size-mini);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4c1bdbd8..4bef7689d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,8 +108,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
       zod:
-        specifier: ^3.24.2
-        version: 3.25.58
+        specifier: ^4.1.12
+        version: 4.1.12
     devDependencies:
       '@raystack/tools-config':
         specifier: workspace:*