diff --git a/docs/app/components/CategoryList.tsx b/docs/app/components/CategoryList.tsx
index d595147f..659ccd6f 100644
--- a/docs/app/components/CategoryList.tsx
+++ b/docs/app/components/CategoryList.tsx
@@ -1,5 +1,5 @@
-import categoryData from '@/app/data/categories.json'
-import navData from '@/app/react/side-nav.json'
+import categoryData from '@/app/data/categories.react.json'
+import { sideNavData } from '@/app/react/side-nav'
 import { Image as ImageIcon } from '@cerberus-design/icons'
 import { Show } from '@cerberus-design/react'
 import { css } from '@cerberus/styled-system/css'
@@ -13,7 +13,7 @@ interface CategoryCardProps {
 }
 
 function CategoryCard(props: CategoryCardProps) {
-  const item = navData.find((navItem) => navItem.label === props.item)
+  const item = sideNavData.find((navItem) => navItem.label === props.item)
   return (
     <Show when={item != null}>
       <Link
diff --git a/docs/app/components/SideNav.tsx b/docs/app/components/SideNav.tsx
index 897cae86..2ed2aee4 100644
--- a/docs/app/components/SideNav.tsx
+++ b/docs/app/components/SideNav.tsx
@@ -4,19 +4,17 @@ import { type PropsWithChildren, memo } from 'react'
 import MatchSideNavItem from './MatchSideNavItem'
 
 export type NavList = (HeadingItem | LinkItem)[]
-type SideNavType = 'heading' | 'route'
+export type NavItemType = 'heading' | 'route'
 
-interface SideNavItem {
-  id: string
+export interface HeadingItem {
   label: string
-  type: SideNavType
-}
-
-export interface HeadingItem extends SideNavItem {
+  route?: never
+  tag?: never
   type: 'heading'
 }
 
-export interface LinkItem extends SideNavItem {
+export interface LinkItem {
+  label: string
   route: string
   tag: '' | 'new' | 'next'
   type: 'route'
diff --git a/docs/app/components/code-builder/builder-snippet.tsx b/docs/app/components/code-builder/builder-snippet.tsx
index 2ac69fb7..2ca66a73 100644
--- a/docs/app/components/code-builder/builder-snippet.tsx
+++ b/docs/app/components/code-builder/builder-snippet.tsx
@@ -46,7 +46,7 @@ export default function BuilderSnippet(
       if (isFormState(key) || isProgressKey(key)) {
         return `{${selectedProps[key as keyof typeof selectedProps] || 'false'}}`
       }
-      return `"${selectedProps[key as keyof typeof selectedProps] || 'false'}"`
+      return `"${selectedProps[key as keyof typeof selectedProps] || ''}"`
     })
   }, [props.code, selectedProps])
 
diff --git a/docs/app/data/categories.json b/docs/app/data/categories.react.json
similarity index 69%
rename from docs/app/data/categories.json
rename to docs/app/data/categories.react.json
index c2cad021..b314106a 100644
--- a/docs/app/data/categories.json
+++ b/docs/app/data/categories.react.json
@@ -2,31 +2,43 @@
   "actions": {
     "name": "Actions",
     "description": "Components that trigger an action.",
-    "items": ["Button", "Icon Button"]
+    "items": ["Button", "Icon Button"],
+    "next": [],
+    "new": []
   },
   "communication": {
     "name": "Communication",
     "description": "Communication components provide useful information.",
-    "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"]
+    "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"],
+    "next": [],
+    "new": ["Avatar", "Progress Bar"]
   },
   "containment": {
     "name": "Containment",
     "description": "Components that contain other components.",
-    "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"]
+    "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"],
+    "next": [],
+    "new": []
   },
   "navigation": {
     "name": "Navigation",
     "description": "Components that help users navigate through the app.",
-    "items": ["Nav Menu", "Tabs"]
+    "items": ["Nav Menu", "Tabs"],
+    "next": [],
+    "new": []
   },
   "selection": {
     "name": "Selection",
     "description": "Components that allow users to select choices.",
-    "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"]
+    "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"],
+    "next": [],
+    "new": ["Select", "Checkbox"]
   },
   "inputs": {
     "name": "Inputs",
     "description": "Components that allow users to input data.",
-    "items": ["Input", "Textarea", "File Uploader"]
+    "items": ["Input", "Textarea", "File Uploader"],
+    "next": [],
+    "new": ["File Uploader"]
   }
 }
diff --git a/docs/app/react/avatar/components/live-playground.tsx b/docs/app/react/avatar/components/live-playground.tsx
index 08282a2d..a01e8228 100644
--- a/docs/app/react/avatar/components/live-playground.tsx
+++ b/docs/app/react/avatar/components/live-playground.tsx
@@ -59,7 +59,7 @@ export function AvatarPreview() {
     return (
       <Avatar
         {...selectedProps}
-        ariaLabel={(selectedProps.ariaLabel as string) || 'User Avatar'}
+        ariaLabel={selectedProps.ariaLabel as string}
         gradient="light-teal"
         src={selectedProps.src as string}
       />
@@ -68,7 +68,7 @@ export function AvatarPreview() {
   return (
     <Avatar
       {...selectedProps}
-      ariaLabel={(selectedProps.ariaLabel as string) || 'User Avatar'}
+      ariaLabel={selectedProps.ariaLabel as string}
       src={selectedProps.src as string}
     />
   )
diff --git a/docs/app/react/layout.tsx b/docs/app/react/layout.tsx
index 3f13c517..bbe0eca0 100644
--- a/docs/app/react/layout.tsx
+++ b/docs/app/react/layout.tsx
@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react'
-import { PageLayout, PageSideNav } from '../components/PageLayout'
-import SideNav, { type NavList } from '../components/SideNav'
-import sideNavData from './side-nav.json'
 import type { Metadata } from 'next/types'
+import { PageLayout, PageSideNav } from '../components/PageLayout'
+import SideNav from '../components/SideNav'
+import { sideNavData } from './side-nav'
 
 interface ReactProps {}
 
@@ -14,7 +14,7 @@ export default function ReactLayout(props: PropsWithChildren<ReactProps>) {
   return (
     <PageLayout>
       <PageSideNav>
-        <SideNav navList={sideNavData as NavList} />
+        <SideNav navList={sideNavData} />
       </PageSideNav>
 
       {props.children}
diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json
deleted file mode 100644
index eb20bbd2..00000000
--- a/docs/app/react/side-nav.json
+++ /dev/null
@@ -1,241 +0,0 @@
-[
-  {
-    "label": "Overview",
-    "type": "heading"
-  },
-  {
-    "label": "Getting Started",
-    "route": "/react",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Loading States",
-    "route": "/react/loading-states",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "label": "Actions",
-    "type": "heading"
-  },
-  {
-    "label": "Button",
-    "route": "/react/button",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Icon Button",
-    "route": "/react/icon-button",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Communication",
-    "type": "heading"
-  },
-  {
-    "label": "Avatar",
-    "route": "/react/avatar",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "label": "Notification",
-    "route": "/react/notification",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Progress Bar",
-    "route": "/react/progress-bar",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "label": "Tag",
-    "route": "/react/tags",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Tooltip",
-    "route": "/react/tooltip",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Containment",
-    "type": "heading"
-  },
-  {
-    "label": "Confirm Modal",
-    "route": "/react/confirm-modal",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Prompt Modal",
-    "route": "/react/prompt-modal",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Modal",
-    "route": "/react/modal",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Table",
-    "route": "/react/table",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Navigation",
-    "type": "heading"
-  },
-  {
-    "label": "Nav Menu",
-    "route": "/react/nav-menu",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Tabs",
-    "route": "/react/tabs",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Selection",
-    "type": "heading"
-  },
-  {
-    "label": "Drag & Drop",
-    "route": "/react/drag-n-drop",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Checkbox",
-    "route": "/react/checkbox",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "label": "Radio",
-    "route": "/react/radio",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Select",
-    "route": "/react/select",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "label": "Toggle",
-    "route": "/react/toggle",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Forms",
-    "type": "heading"
-  },
-  {
-    "label": "Field Message",
-    "route": "/react/field-message",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "File Uploader",
-    "route": "/react/file-uploader",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Input",
-    "route": "/react/input",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Label",
-    "route": "/react/label",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Textarea",
-    "route": "/react/textarea",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Rendering",
-    "type": "heading"
-  },
-  {
-    "label": "Show",
-    "route": "/react/show",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Portal",
-    "route": "/react/portal",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Feature Flags",
-    "route": "/react/feature-flags",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Hooks",
-    "type": "heading"
-  },
-  {
-    "label": "useModal",
-    "route": "/react/use-modal",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "useTheme",
-    "route": "/react/use-theme",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "useThemeContext",
-    "route": "/react/use-theme-context",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "useToggle",
-    "route": "/react/use-toggle",
-    "tag": "",
-    "type": "route"
-  },
-  {
-    "label": "Helpers",
-    "type": "heading"
-  },
-  {
-    "id": "4:a",
-    "label": "trapFocus",
-    "route": "/react/trap-focus",
-    "tag": "",
-    "type": "route"
-  }
-]
diff --git a/docs/app/react/side-nav.ts b/docs/app/react/side-nav.ts
new file mode 100644
index 00000000..c760336f
--- /dev/null
+++ b/docs/app/react/side-nav.ts
@@ -0,0 +1,57 @@
+import categoriesData from '@/app/data/categories.react.json'
+import { type NavList } from '../components/SideNav'
+
+interface Category {
+  name: string
+  description: string
+  items: string[]
+  next: string[]
+  new: string[]
+}
+type CategoriesList = Record<string, Category>
+
+const overviewGroup: CategoriesList = {
+  overview: {
+    name: 'Overview',
+    description: 'Getting started with Cerberus React',
+    items: ['Getting Started', 'Loading States'],
+    next: [],
+    new: ['Loading States'],
+  },
+}
+
+function createSideNavData(categories: CategoriesList): NavList {
+  const navList: NavList = []
+  Object.values(categories).forEach((category) => {
+    navList.push({
+      label: category.name,
+      type: 'heading',
+    })
+    category.items.forEach((name) => {
+      const formattedName = name === 'Getting Started' ? '' : name
+      navList.push({
+        label: name,
+        route: `/react/${formattedName.replace(/ /g, '-').toLowerCase()}`,
+        tag: getCategoryItemTags(name, category.new, category.next),
+        type: 'route',
+      })
+    })
+  })
+  return navList
+}
+
+function getCategoryItemTags(
+  category: string,
+  newItems: string[],
+  next: string[],
+): '' | 'new' | 'next' {
+  if (newItems.includes(category)) return 'new'
+  if (next.includes(category)) return 'next'
+  return ''
+}
+
+// now we need to flatten the data structure
+export const sideNavData: NavList = [
+  ...createSideNavData(overviewGroup),
+  ...createSideNavData(categoriesData),
+]
diff --git a/packages/panda-preset/src/recipes/slots/fileStatus.ts b/packages/panda-preset/src/recipes/slots/fileStatus.ts
index 7e3e68e1..48a39600 100644
--- a/packages/panda-preset/src/recipes/slots/fileStatus.ts
+++ b/packages/panda-preset/src/recipes/slots/fileStatus.ts
@@ -35,22 +35,22 @@ export const fileStatus: Partial<SlotRecipeConfig> = defineSlotRecipe({
       todo: {
         icon: {
           ...action,
-          cerbGradient: 'purple',
-          color: 'colorPalette.text.inverse',
+          cerbGradient: 'dark-purple',
+          color: 'action.text.initial',
         },
       },
       processing: {
         icon: {
           ...action,
-          cerbGradient: 'purple',
-          color: 'colorPalette.text.inverse',
+          cerbGradient: 'dark-purple',
+          color: 'action.text.initial',
         },
       },
       done: {
         icon: {
           ...success,
           cerbGradient: 'green',
-          color: 'colorPalette.text.200',
+          color: 'colorPalette.text.static',
         },
       },
       error: {
diff --git a/tests/panda-preset/recipes/slots/fileStatus.test.ts b/tests/panda-preset/recipes/slots/fileStatus.test.ts
index d2d9db10..d171464c 100644
--- a/tests/panda-preset/recipes/slots/fileStatus.test.ts
+++ b/tests/panda-preset/recipes/slots/fileStatus.test.ts
@@ -27,22 +27,22 @@ describe('fileStatus recipe', () => {
 
   test('should have a todo status variant', () => {
     expect(fileStatus.variants?.status?.todo?.icon).toMatchObject({
-      cerbGradient: 'purple',
-      color: 'colorPalette.text.inverse',
+      cerbGradient: 'dark-purple',
+      color: 'action.text.initial',
     })
   })
 
   test('should have a processing status variant', () => {
     expect(fileStatus.variants?.status?.processing?.icon).toMatchObject({
-      cerbGradient: 'purple',
-      color: 'colorPalette.text.inverse',
+      cerbGradient: 'dark-purple',
+      color: 'action.text.initial',
     })
   })
 
   test('should have a done status variant', () => {
     expect(fileStatus.variants?.status?.done?.icon).toMatchObject({
       cerbGradient: 'green',
-      color: 'colorPalette.text.200',
+      color: 'colorPalette.text.static',
     })
   })