diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index f337efe5afe..b798ce5c99f 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -468,7 +468,7 @@ export const reference = {
       items: [
         {
           name: 'Supabase CLI',
-          url: '/new/reference/cli',
+          url: '/new/reference/cli/start',
           items: [],
           icon: '/img/icons/javascript.svg',
         },
@@ -503,6 +503,26 @@ export const reference_javascript = {
   ],
 }
 
+export const reference_cli = {
+  icon: '/img/icons/javascript-icon.svg',
+  title: 'javascript-js',
+  parent: '/reference',
+  items: [
+    {
+      name: 'Getting Started',
+      items: [
+        {
+          name: 'fake link',
+          href: '/reference/javascript/start',
+          level: 'reference_javascript',
+          items: [],
+          icon: '/img/icons/javascript.svg',
+        },
+      ],
+    },
+  ],
+}
+
 // export const reference: [
 //   {
 //     label: 'Official'
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 0a63f7f4f9b..638cd23189d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -53,6 +53,9 @@ const SideNav = () => {
       case url.includes(`/docs/new/reference/javascript/`) && url:
         setLevel('reference_javascript')
         break
+      case url.includes(`/docs/new/reference/cli/`) && url:
+        setLevel('reference_cli')
+        break
 
       default:
         break
@@ -252,6 +255,7 @@ const SideNav = () => {
 
       {/* reference level */}
       <NavigationMenuRefList id={'reference_javascript'} currentLevel={level} setLevel={setLevel} />
+      <NavigationMenuRefList id={'reference_cli'} currentLevel={level} setLevel={setLevel} />
 
       {/* // ref menu */}
       {/* <div
diff --git a/apps/docs/components/Options.tsx b/apps/docs/components/Options.tsx
new file mode 100644
index 00000000000..b3e9d37e70f
--- /dev/null
+++ b/apps/docs/components/Options.tsx
@@ -0,0 +1,78 @@
+import { FC, useState } from 'react'
+import { IconXCircle } from '~/../../packages/ui'
+import { AcceptedValue } from '~/pages/new/reference/cli/[...slug]'
+
+interface IOptions {
+  name?: string
+}
+
+const Options: FC<IOptions> = (props) => {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className="mt-0">
+      <button
+        className={[
+          'px-5',
+          'border-t border-l border-r border-scale-500',
+          'text-left text-sm text-scale-1100',
+          'hover:bg-scale-300 transition-all',
+
+          'flex items-center gap-2',
+          open ? 'w-full py-1.5 rounded-tl-lg rounded-tr-lg' : 'py-1 border-b rounded-full',
+        ].join(' ')}
+        onClick={() => setOpen(!open)}
+      >
+        <div className="">
+          <div className={[!open ? 'rotate-45' : 'rotate-0'].join(' ')}>
+            <IconXCircle size={14} />
+          </div>
+        </div>
+        {`${!open ? `Open` : `Close`} ${props.name ?? 'accepted values'}`}
+      </button>
+      <div
+        className={['transition-all opacity-0', open ? 'opacity-100 h-auto' : 'invisible h-0'].join(
+          ' '
+        )}
+      >
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+type IOption = AcceptedValue | any
+
+const Option: FC<IOption> = (props) => {
+  return (
+    <div
+      className="
+        px-5 py-3 first:border-t border-b border-l border-r
+        border-scale-500
+        last:rounded-bl-lg last:rounded-br-lg
+        flex flex-col gap-3
+      "
+    >
+      <div className="flex gap-3 items-center">
+        <span className="text-sm text-scale-1200 font-mono font-medium">
+          {props.name ?? 'no-name'}
+        </span>
+        <span>
+          {props.isOptional ? (
+            <div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
+          ) : (
+            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
+              REQUIRED
+            </div>
+          )}
+        </span>
+        <span className="text-scale-900 text-xs">{props.type ?? 'no type'}</span>
+      </div>
+      <p className="text-sm text-scale-1000 m-0">{props.description ?? 'nodescription'}</p>
+    </div>
+  )
+}
+
+// @ts-ignore
+Options.Option = Option
+
+export default Options
diff --git a/apps/docs/components/Params.tsx b/apps/docs/components/Params.tsx
new file mode 100644
index 00000000000..7475d4ab2de
--- /dev/null
+++ b/apps/docs/components/Params.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { Flag } from '~/pages/new/reference/cli/[...slug]'
+
+type IParamProps = Flag | any
+
+const Param: FC<IParamProps> = (paramItem) => {
+  return (
+    <div className="border-t border-b py-5 flex flex-col gap-3">
+      <div className="flex gap-3 items-center">
+        <span className="text-sm text-scale-1200 font-mono font-medium">
+          {paramItem.name ?? 'no-name'}
+        </span>
+        <span>
+          {paramItem.isOptional ? (
+            <div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
+          ) : (
+            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
+              REQUIRED
+            </div>
+          )}
+        </span>
+        <span className="text-scale-900 text-xs">{paramItem.type ?? 'no type'}</span>
+      </div>
+      <p className="text-sm text-scale-1000 m-0">{paramItem.description ?? 'nodescription'}</p>
+      {paramItem.children}
+    </div>
+  )
+}
+
+export default Param
diff --git a/apps/docs/pages/new/reference/cli/usage.tsx b/apps/docs/pages/new/reference/cli/[...slug].tsx
similarity index 55%
rename from apps/docs/pages/new/reference/cli/usage.tsx
rename to apps/docs/pages/new/reference/cli/[...slug].tsx
index 7708e8d8fb1..86953e9853c 100644
--- a/apps/docs/pages/new/reference/cli/usage.tsx
+++ b/apps/docs/pages/new/reference/cli/[...slug].tsx
@@ -1,15 +1,25 @@
 // @ts-expect-error
 import cliSpec from '~/../../spec/cli_v1_commands_new_shape.yaml' assert { type: 'yml' }
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
+import Options from '~/components/Options'
+import Param from '~/components/Params'
 
-type Flag = {
+export type AcceptedValue = {
+  id: string
+  name: string
+  type: 'string' | 'boolean' | 'object'
+  description?: string
+}
+
+export type Flag = {
   id: string
   name: string
   description: string
   default_value: string
+  accepted_values: AcceptedValue[]
 }
 
-type Command = {
+export type Command = {
   id: string
   title: string
   description: string
@@ -26,25 +36,26 @@ export default function CliUsage() {
     <article>
       <div className="flex my-16">
         <div className="w-full">
-          <h1>Usage</h1>
-          <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-4"></div>
-          <p className="text-xl max-w-xl">{cliSpec.info.description}</p>
+          <p className="">{cliSpec.info.description}</p>
 
           <div className="grid gap-32 mx-auto max-w-5xl mt-24">
             {cliSpec.commands.map((command: Command, commandIndex) => {
               return (
                 <div>
                   <div className="grid ref-container" id={command.id}>
-                    <div className="prose border-b pb-8" key={command.id}>
+                    <div className="border-b pb-8" key={command.id}>
                       <header
                         className={[
                           // 'border-b sticky top-16 z-10',
                           ' mb-16',
                         ].join(' ')}
                       >
-                        <h2 className="text-2xl not-prose text-scale-1200 capitalize mb-4 scroll-mt-16 mt-0">
-                          {command.summary}
+                        <h2 className="mb-4 scroll-mt-16 mt-0 font-mono text-scale-1200">
+                          $ {command.title}
                         </h2>
+                        <p className="capitalize mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
+                          {command.summary}
+                        </p>
                       </header>
 
                       {command.usage && (
@@ -54,8 +65,10 @@ export default function CliUsage() {
                       )}
 
                       {command.subcommands.length > 0 && (
-                        <>
-                          <h3 className="text-sm font-bold">Available Commands</h3>
+                        <div className="">
+                          <h3 className="text-sm font-bold text-scale-1200 mb-3">
+                            Available Commands
+                          </h3>
                           <ul>
                             {command.subcommands.map((subcommand) => (
                               <li key={subcommand}>
@@ -65,19 +78,26 @@ export default function CliUsage() {
                               </li>
                             ))}
                           </ul>
-                        </>
+                        </div>
                       )}
                       {command.flags.length > 0 && (
                         <>
-                          <h3 className="text-lg ">Options</h3>
-                          <ul className="grid gap-2">
-                            {command.flags.map((flag) => (
-                              <li className="mt-0">
-                                <div>
-                                  <code className="font-bold">{flag.name}</code>
-                                </div>
-                                <p className="text-sm">{flag.description}</p>
-                              </li>
+                          <h3 className="text-lg text-scale-1200 mb-3">Flags</h3>
+                          <ul className="">
+                            {command.flags.map((flag: Flag) => (
+                              <>
+                                <li className="mt-0">
+                                  <Param {...flag}>
+                                    {flag?.accepted_values && (
+                                      <Options>
+                                        {flag?.accepted_values.map((value) => {
+                                          return <Options.Option {...value} />
+                                        })}
+                                      </Options>
+                                    )}
+                                  </Param>
+                                </li>
+                              </>
                             ))}
                           </ul>
                         </>
diff --git a/apps/docs/pages/new/reference/javascript/[...slug].tsx b/apps/docs/pages/new/reference/javascript/[...slug].tsx
index 938769fe9cd..4ae1692f297 100644
--- a/apps/docs/pages/new/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/new/reference/javascript/[...slug].tsx
@@ -30,6 +30,8 @@ import { useRouter } from 'next/router'
 import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers'
 import { ComesFrom } from '~/components/ComesFrom'
 import Link from 'next/link'
+import Param from '~/components/Params'
+import Options from '~/components/Options'
 
 const marginTop = 256
 export default function Ref(props) {
@@ -228,11 +230,11 @@ export default function Ref(props) {
                       <header
                         className={[
                           // 'border-b sticky top-16 z-10',
-                          ' mb-16',
+                          'mb-16',
                         ].join(' ')}
                       >
                         <h2
-                          className="text-2xl not-prose text-scale-1200 capitalize mb-4 scroll-mt-16"
+                          className="text-2xl text-scale-1200 capitalize mb-4 scroll-mt-16"
                           onClick={() => updateUrl(item.id)}
                         >
                           {examples.functions[itemIndex].title ??
@@ -243,54 +245,53 @@ export default function Ref(props) {
                         {shortText && (
                           <>
                             <p
-                              className="text-base text-scale-1100 not-prose"
+                              className="text-sm text-scale-1100"
                               dangerouslySetInnerHTML={{ __html: shortText }}
                             ></p>
-                            <ComesFrom
+                            {/* <ComesFrom
                               link="https://raw.githubusercontent.com/supabase/supabase/master/spec/enrichments/tsdoc_v2/combined.json"
                               text="combined.json"
-                            />
+                            /> */}
                           </>
                         )}
                       </header>
 
                       {item.description && (
                         <>
-                          <ComesFrom
+                          {/* <ComesFrom
                             link="https://raw.githubusercontent.com/supabase/supabase/master/spec/enrichments/tsdoc_v2/combined.json"
                             text="combined.json"
-                          />
-                          <p className="text-lg not-prose">{item.description}</p>
+                          /> */}
+                          <p className="text-sm">{item.description}</p>
                         </>
                       )}
-                      <hr />
                       {functionMarkdownContent && (
                         <>
-                          <ComesFrom
+                          {/* <ComesFrom
                             link="https://github.com/supabase/supabase/pull/10095/files#diff-bf42aab7d324c5330e4ae65d94803cd6da686d2241015536b0263e7f76aeca35"
                             text="auth.signUp().mdx"
-                          />
+                          /> */}
                           <MDXRemote {...functionMarkdownContent} components={components} />
                         </>
                       )}
                       {item.notes && (
                         <div>
-                          <ComesFrom
+                          {/* <ComesFrom
                             link="https://github.com/supabase/supabase/blob/master/spec/supabase_js_v2.yml#L105"
                             text="supabase_js_v2"
-                          />
+                          /> */}
                           <ReactMarkdown className="text-sm">{item.notes}</ReactMarkdown>
                         </div>
                       )}
                       {/* // parameters */}
                       {parameters && (
-                        <>
-                          <ComesFrom
+                        <div className="not-prose mt-12">
+                          {/* <ComesFrom
                             link="https://github.com/supabase/supabase/blob/master/spec/enrichments/tsdoc_v2/combined.json"
                             text="combined.json"
-                          />
+                          /> */}
                           <h5 className="mb-3 text-base">Parameters</h5>
-                          <div className="">
+                          <ul className="">
                             {parameters.map((param) => {
                               // grab override params from yaml file
                               const overrideParams = item.overrideParams
@@ -303,76 +304,22 @@ export default function Ref(props) {
                               const paramItem = overide?.length > 0 ? overide[0] : param
 
                               return (
-                                <div className="border-t border-b py-5 flex flex-col gap-3">
-                                  <div className="flex gap-3 items-center">
-                                    <span className="text-sm text-scale-1200 font-mono font-medium">
-                                      {paramItem.name ?? 'no-name'}
-                                    </span>
-                                    <span>
-                                      {paramItem.isOptional ? (
-                                        <div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">
-                                          Optional
-                                        </div>
-                                      ) : (
-                                        <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                          REQUIRED
-                                        </div>
-                                      )}
-                                    </span>
-                                    <span className="text-scale-900 text-xs">
-                                      {paramItem.type ?? 'no type'}
-                                    </span>
-                                  </div>
-                                  <p className="text-sm text-scale-1000 m-0">
-                                    {paramItem.description ?? 'nodescription'}
-                                  </p>
+                                <Param {...paramItem}>
                                   {paramItem.subContent && (
                                     <div className="mt-3">
-                                      {param.subContent.map((param) => {
-                                        return (
-                                          <div
-                                            className="px-5 py-3 first:border-t border-b border-l border-r
-                                            border-scale-500
-
-                                            first:rounded-tl-lg first:rounded-tr-lg
-                                            last:rounded-bl-lg last:rounded-br-lg
-
-                                            flex flex-col gap-3
-                                          "
-                                          >
-                                            <div className="flex gap-3 items-center">
-                                              <span className="text-sm text-scale-1200 font-mono font-medium">
-                                                {param.name ?? 'no-name'}
-                                              </span>
-                                              <span>
-                                                {param.isOptional ? (
-                                                  <div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">
-                                                    Optional
-                                                  </div>
-                                                ) : (
-                                                  <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                                    REQUIRED
-                                                  </div>
-                                                )}
-                                              </span>
-                                              <span className="text-scale-900 text-xs">
-                                                {param.type ?? 'no type'}
-                                              </span>
-                                            </div>
-                                            <p className="text-sm text-scale-1000 m-0">
-                                              {param.description ?? 'nodescription'}
-                                            </p>
-                                          </div>
-                                        )
-                                      })}
+                                      <Options>
+                                        {param.subContent.map((param) => {
+                                          return <Options.Option {...param} />
+                                        })}
+                                      </Options>
                                     </div>
                                   )}
-                                </div>
+                                </Param>
                               )
                             })}
-                          </div>
+                          </ul>
                           {/* <div dangerouslySetInnerHTML={{ __html: parameters }}></div> */}
-                        </>
+                        </div>
                       )}
                     </div>
                     <div className="w-full">