diff --git a/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page-render.tsx b/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page-render.tsx
new file mode 100644
index 00000000000..ee0d6d70db7
--- /dev/null
+++ b/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page-render.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useParams, usePathname } from 'next/navigation'
+import { cn } from 'ui'
+
+export default function PageRender() {
+  const { org, config } = useParams()
+  const pathname = usePathname()
+
+  return (
+    <div className="h-full p-3 py-5">
+      <span className="text-lg text-foreground">
+        {org} {config} {pathname}
+      </span>
+      <hr />
+    </div>
+  )
+}
diff --git a/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page.tsx b/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page.tsx
new file mode 100644
index 00000000000..a79b427717b
--- /dev/null
+++ b/apps/studio-prototype/src/app/[org]/settings/[project]/[config]/page.tsx
@@ -0,0 +1,10 @@
+import PageRender from './page-render'
+
+export default function SettingsProjectPage() {
+  return (
+    <div className="h-full p-3 py-5">
+      <PageRender />
+      <hr />
+    </div>
+  )
+}
diff --git a/apps/studio-prototype/src/app/[org]/settings/account/page.tsx b/apps/studio-prototype/src/app/[org]/settings/account/page.tsx
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/apps/studio-prototype/src/app/[org]/settings/layout.tsx b/apps/studio-prototype/src/app/[org]/settings/layout.tsx
index e2611c58282..0f241f56475 100644
--- a/apps/studio-prototype/src/app/[org]/settings/layout.tsx
+++ b/apps/studio-prototype/src/app/[org]/settings/layout.tsx
@@ -8,7 +8,6 @@ export default function TableEditorLayout({
   return (
     <div className="flex flex-col h-full">
       <div className="flex h-full">
-        <SettingsMenuPanel />
         <div>{children}</div>
       </div>
     </div>
diff --git a/apps/studio-prototype/src/app/[org]/settings/settings-menu-children.tsx b/apps/studio-prototype/src/app/[org]/settings/settings-menu-children.tsx
new file mode 100644
index 00000000000..f0bc4506e60
--- /dev/null
+++ b/apps/studio-prototype/src/app/[org]/settings/settings-menu-children.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+
+import settingsData from '@/src/config/settings.json'
+import { ScrollArea, ScrollBar } from 'ui'
+import { useConfig } from '@/src/hooks/use-config'
+
+const SettingsMenuChildren: React.FC = () => {
+  const [config] = useConfig()
+
+  const { organization, project } = config
+
+  const getBasePath = (section: string) => {
+    switch (section) {
+      case 'PROJECT_SETTINGS':
+        return `/${organization}/settings/${project}`
+      case 'ORGANIZATION_SETTINGS':
+        return `/${organization}/settings`
+      case 'ACCOUNT_SETTINGS':
+        return `/${organization}/settings/account`
+      default:
+        return ''
+    }
+  }
+
+  const renderItems = (items: any[], basePath: string) => {
+    return items.map((item) => (
+      <li key={item.key} className="py-0.5">
+        <a href={`${basePath}${item.href}`} className="hover:text-white text-sm">
+          {item.label}
+        </a>
+        {item.items && (
+          <ul role="menu" className="pl-4">
+            {renderItems(item.items, basePath)}
+          </ul>
+        )}
+      </li>
+    ))
+  }
+
+  return (
+    <ScrollArea className="h-full w-full overflow-hidden">
+      <nav aria-label="Settings Navigation" className="text-foreground-light h-full">
+        <div className="mb-8">
+          <h2 className="text-sm font-semibold uppercase tracking-wide">Project Settings</h2>
+          <ul role="menu" className="mt-2 pl-2 border-l border-gray-700">
+            {renderItems(settingsData.PROJECT_SETTINGS.items, getBasePath('PROJECT_SETTINGS'))}
+          </ul>
+        </div>
+        <div className="mb-8">
+          <h2 className="text-sm font-semibold uppercase tracking-wide">Organization Settings</h2>
+          <ul role="menu" className="mt-2 pl-2 border-l border-gray-700">
+            {renderItems(
+              settingsData.ORGANIZATION_SETTINGS.items,
+              getBasePath('ORGANIZATION_SETTINGS')
+            )}
+          </ul>
+        </div>
+        <div className="mb-8">
+          <h2 className="text-sm font-semibold uppercase tracking-wide">Account Settings</h2>
+          <ul role="menu" className="mt-2 pl-2 border-l border-gray-700">
+            {renderItems(settingsData.ACCOUNT_SETTINGS.items, getBasePath('ACCOUNT_SETTINGS'))}
+          </ul>
+        </div>
+      </nav>
+      <ScrollBar />
+    </ScrollArea>
+  )
+}
+
+export default SettingsMenuChildren
diff --git a/apps/studio-prototype/src/app/[org]/settings/settings-menu-panel.tsx b/apps/studio-prototype/src/app/[org]/settings/settings-menu-panel.tsx
index cba37455a93..9b0075fdc14 100644
--- a/apps/studio-prototype/src/app/[org]/settings/settings-menu-panel.tsx
+++ b/apps/studio-prototype/src/app/[org]/settings/settings-menu-panel.tsx
@@ -2,28 +2,25 @@
 
 import { useParams, usePathname } from 'next/navigation'
 import { cn } from 'ui'
+import SettingsMenuChildren from './settings-menu-children'
 
 export default function SettingsMenuPanel() {
   const { org } = useParams()
   const pathname = usePathname()
-  const isActive = pathname === `/${org}/settings`
+  const isActive = pathname.startsWith(`/${org}/settings`)
 
   return (
     <div
       className={cn(
         'h-full',
-        //
         isActive ? 'w-[300px]' : 'w-[0px]',
-        isActive &&
-          `
-        border-r 
-        `,
+        isActive && 'border-r',
         'duration-200',
-        'ease-in-out',
+        'ease-out',
         'transition-all'
       )}
     >
-      <span className="text-foreground">items panel</span>
+      <SettingsMenuChildren />
     </div>
   )
 }
diff --git a/apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx b/apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx
index 528e767dadb..7604ebb5a54 100644
--- a/apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx
+++ b/apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx
@@ -7,9 +7,7 @@ import { cn } from 'ui'
 export default function SideNavMenuIcon({ product }: { product: any }) {
   const { org } = useParams()
   const pathname = usePathname()
-  const isActive = pathname === `/${org}${product.href}`
-
-  console.log('pathname', pathname)
+  const isActive = pathname.startsWith(`/${org}${product.href}`)
 
   return (
     <Link
diff --git a/apps/studio-prototype/src/app/[org]/table-editor/table-editor-items-panel.tsx b/apps/studio-prototype/src/app/[org]/table-editor/table-editor-items-panel.tsx
index 81b1b40e08f..40359b2f471 100644
--- a/apps/studio-prototype/src/app/[org]/table-editor/table-editor-items-panel.tsx
+++ b/apps/studio-prototype/src/app/[org]/table-editor/table-editor-items-panel.tsx
@@ -1,7 +1,29 @@
+'use client'
+
+import { useParams, usePathname } from 'next/navigation'
+import { cn } from 'ui'
+
 export default function TableEditorItemsPanel() {
+  const { org } = useParams()
+  const pathname = usePathname()
+  const isActive = pathname === `/${org}/table-editor`
+
   return (
-    <div className="w-[300px] border-r h-full">
-      <span className="text-foreground">items panel</span>
+    <div
+      className={cn(
+        'h-full',
+        //
+        isActive ? 'w-[300px]' : 'w-[0px]',
+        isActive &&
+          `
+        border-r 
+        `,
+        'duration-500',
+        'ease-out',
+        'transition-all'
+      )}
+    >
+      hello world
     </div>
   )
 }
diff --git a/apps/studio-prototype/src/config/settings.json b/apps/studio-prototype/src/config/settings.json
new file mode 100644
index 00000000000..66e6f1ba975
--- /dev/null
+++ b/apps/studio-prototype/src/config/settings.json
@@ -0,0 +1,62 @@
+{
+  "PROJECT_SETTINGS": {
+    "metadata": {
+      "base_path": "/project"
+    },
+    "items": [
+      { "label": "General", "key": "general", "href": "/general" },
+      { "label": "Infrastructure", "key": "infrastructure", "href": "/infrastructure" },
+      { "label": "Integrations", "key": "integrations", "href": "/integrations" },
+      { "label": "Add ons", "key": "add_ons", "href": "/add-ons" },
+      { "label": "Vault", "key": "vault", "href": "/vault" },
+      { "label": "Database", "key": "database", "href": "/database" },
+      {
+        "label": "Authentication",
+        "key": "authentication",
+        "href": "/authentication",
+        "items": [
+          { "label": "General", "key": "auth_general", "href": "/authentication/general" },
+          { "label": "Providers", "key": "providers", "href": "/authentication/providers" },
+          { "label": "Rate Limits", "key": "rate_limits", "href": "/authentication/rate-limits" },
+          {
+            "label": "Email templates",
+            "key": "email_templates",
+            "href": "/authentication/email-templates"
+          },
+          {
+            "label": "URL configuration",
+            "key": "url_configuration",
+            "href": "/authentication/url-configuration"
+          },
+          { "label": "Hooks", "key": "hooks", "href": "/authentication/hooks" }
+        ]
+      },
+      { "label": "Storage", "key": "storage", "href": "/storage" },
+      { "label": "Edge Functions", "key": "edge_functions", "href": "/edge-functions" },
+      { "label": "Realtime", "key": "realtime", "href": "/realtime" },
+      { "label": "Branching", "key": "branching", "href": "/branching" }
+    ]
+  },
+  "ORGANIZATION_SETTINGS": {
+    "items": [
+      { "label": "General", "key": "general", "href": "/general" },
+      { "label": "Subscription plan", "key": "subscription_plan", "href": "/subscription-plan" },
+      { "label": "Team", "key": "team", "href": "/team" },
+      { "label": "Integrations", "key": "integrations", "href": "/integrations" },
+      { "label": "Billing", "key": "billing", "href": "/billing" },
+      { "label": "Usage", "key": "usage", "href": "/usage" },
+      { "label": "Invoices", "key": "invoices", "href": "/invoices" },
+      { "label": "OAuth apps", "key": "oauth_apps", "href": "/oauth-apps" },
+      { "label": "Audit logs", "key": "audit_logs", "href": "/audit-logs" },
+      { "label": "Legal documents", "key": "legal_documents", "href": "/legal-documents" }
+    ]
+  },
+  "ACCOUNT_SETTINGS": {
+    "items": [
+      { "label": "General", "key": "general", "href": "/general" },
+      { "label": "Access tokens", "key": "access_tokens", "href": "/access-tokens" },
+      { "label": "Security", "key": "security", "href": "/security" },
+      { "label": "Audit logs", "key": "audit_logs", "href": "/audit-logs" }
+    ]
+  }
+}
diff --git a/apps/studio-prototype/src/hooks/use-config.ts b/apps/studio-prototype/src/hooks/use-config.ts
index 209ed875f47..04f7943f6ff 100644
--- a/apps/studio-prototype/src/hooks/use-config.ts
+++ b/apps/studio-prototype/src/hooks/use-config.ts
@@ -4,11 +4,13 @@ import { atomWithStorage } from 'jotai/utils'
 type Config = {
   radius: number
   organization?: string
+  project?: string
 }
 
 const configAtom = atomWithStorage<Config>('config', {
   radius: 0.5,
   organization: 'Summers-Muir',
+  project: 'Sonsing',
 })
 
 export function useConfig() {