diff --git a/apps/docs/lib/refGenerator/refTypes.ts b/apps/docs/lib/refGenerator/refTypes.ts
new file mode 100644
index 00000000000..c3563de9f01
--- /dev/null
+++ b/apps/docs/lib/refGenerator/refTypes.ts
@@ -0,0 +1,17 @@
+export type Link = {
+  name: string
+  link: string
+}
+
+export type Parameter = {
+  id: string
+  title: string
+  description: string
+  summary: string
+  tags?: string[]
+  links?: Link[]
+  subcommands?: []
+  usage?: string
+  required?: boolean
+  default?: boolean
+}
diff --git a/apps/docs/pages/new/reference/auth/config.tsx b/apps/docs/pages/new/reference/auth/config.tsx
new file mode 100644
index 00000000000..dc54e4e8ce7
--- /dev/null
+++ b/apps/docs/pages/new/reference/auth/config.tsx
@@ -0,0 +1,68 @@
+// @ts-expect-error
+import specFile from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
+import { Parameter } from '~/lib/refGenerator/refTypes'
+import ReactMarkdown from 'react-markdown'
+
+// Parameters are grouped on the page by tag
+const TAGS = ['general', 'database']
+
+export default function Config() {
+  return (
+    <div>
+      <div className="flex my-16">
+        <div className="w-full prose">
+          <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
+          <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
+          <div>
+            {TAGS.map((tag) =>
+              specFile.parameters
+                .filter((param: Parameter) => param.tags[0] === tag)
+                .map((parameter: Parameter, index) => (
+                  <div>
+                    {index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
+                    <div className="mt-8">
+                      <div>
+                        <h2 className="text-xl font-medium text-scale-1200 font-mono">
+                          <span className="mr-2">$</span>
+                          {parameter.title}
+                        </h2>
+                        <div className="grid" id={parameter.id}>
+                          <div className="border-b pb-8" key={parameter.id}>
+                            <div className=" mb-16">
+                              <p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
+                                <ReactMarkdown>{parameter.description}</ReactMarkdown>
+                              </p>
+                              <div className="grid gap-2">
+                                <div className="flex gap-2">
+                                  Required: <code>{parameter.required.toString()}</code>
+                                </div>
+                                <div className="flex gap-2">
+                                  Default:
+                                  <code>
+                                    {parameter.default ? parameter.default.toString() : 'None'}
+                                  </code>
+                                </div>
+                              </div>
+                            </div>
+                            {parameter.links &&
+                              parameter.links.map((link) => (
+                                <div>
+                                  <h3>See also:</h3>
+                                  <li>
+                                    <a href={link.link}>{link.name}</a>
+                                  </li>
+                                </div>
+                              ))}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/docs/pages/new/reference/cli/[...slug].tsx b/apps/docs/pages/new/reference/cli/[...slug].tsx
index 04896a8740b..f779cbc5fa4 100644
--- a/apps/docs/pages/new/reference/cli/[...slug].tsx
+++ b/apps/docs/pages/new/reference/cli/[...slug].tsx
@@ -32,7 +32,7 @@ export type Command = {
   usage?: string
 }
 
-export default function CliUsage() {
+export default function Config() {
   return (
     <RefSubLayout>
       <div className="flex my-16">
diff --git a/apps/docs/pages/new/reference/cli/config.tsx b/apps/docs/pages/new/reference/cli/config.tsx
index c8c8ac7a745..f5aadc1c4a8 100644
--- a/apps/docs/pages/new/reference/cli/config.tsx
+++ b/apps/docs/pages/new/reference/cli/config.tsx
@@ -1,30 +1,12 @@
 // @ts-expect-error
 import specFile from '~/../../spec/cli_v1_config.yaml' assert { type: 'yml' }
-
+import { Parameter } from '~/lib/refGenerator/refTypes'
 import ReactMarkdown from 'react-markdown'
 
-export type Link = {
-  name: string
-  link: string
-}
-
-export type Parameter = {
-  id: string
-  title: string
-  description: string
-  summary: string
-  tags?: string[]
-  links?: Link[]
-  subcommands?: []
-  usage?: string
-  required?: boolean
-  default?: boolean
-}
-
 // Parameters are grouped on the page by tag
 const TAGS = ['general', 'auth', 'api', 'database', 'dashboard', 'local']
 
-export default function CliUsage() {
+export default function Config() {
   return (
     <div>
       <div className="flex my-16">
diff --git a/apps/docs/pages/new/reference/realtime/config.tsx b/apps/docs/pages/new/reference/realtime/config.tsx
index b687890bedf..7089b03d9a1 100644
--- a/apps/docs/pages/new/reference/realtime/config.tsx
+++ b/apps/docs/pages/new/reference/realtime/config.tsx
@@ -1,30 +1,13 @@
 // @ts-expect-error
 import specFile from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
+import { Parameter } from '~/lib/refGenerator/refTypes'
 
 import ReactMarkdown from 'react-markdown'
 
-export type Link = {
-  name: string
-  link: string
-}
-
-export type Parameter = {
-  id: string
-  title: string
-  description: string
-  summary: string
-  tags?: string[]
-  links?: Link[]
-  subcommands?: []
-  usage?: string
-  required?: boolean
-  default?: boolean
-}
-
 // Parameters are grouped on the page by tag
 const TAGS = ['general', 'database']
 
-export default function CliUsage() {
+export default function Config() {
   return (
     <div>
       <div className="flex my-16">
diff --git a/apps/docs/pages/new/reference/storage/config.tsx b/apps/docs/pages/new/reference/storage/config.tsx
new file mode 100644
index 00000000000..d9f5e0ee9d9
--- /dev/null
+++ b/apps/docs/pages/new/reference/storage/config.tsx
@@ -0,0 +1,69 @@
+// @ts-expect-error
+import specFile from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
+import { Parameter } from '~/lib/refGenerator/refTypes'
+
+import ReactMarkdown from 'react-markdown'
+
+// Parameters are grouped on the page by tag
+const TAGS = ['general', 'multitenant']
+console.log(specFile)
+export default function Config() {
+  return (
+    <div>
+      <div className="flex my-16">
+        <div className="w-full prose">
+          <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
+          <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
+          <div>
+            {TAGS.map((tag) =>
+              specFile.parameters
+                .filter((param: Parameter) => param.tags[0] === tag)
+                .map((parameter: Parameter, index) => (
+                  <div>
+                    {index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
+                    <div className="mt-8">
+                      <div>
+                        <h2 className="text-xl font-medium text-scale-1200 font-mono">
+                          <span className="mr-2">$</span>
+                          {parameter.title}
+                        </h2>
+                        <div className="grid" id={parameter.id}>
+                          <div className="border-b pb-8" key={parameter.id}>
+                            <div className=" mb-16">
+                              <p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
+                                <ReactMarkdown>{parameter.description}</ReactMarkdown>
+                              </p>
+                              <div className="grid gap-2">
+                                <div className="flex gap-2">
+                                  Required: <code>{parameter.required.toString()}</code>
+                                </div>
+                                <div className="flex gap-2">
+                                  Default:
+                                  <code>
+                                    {parameter.default ? parameter.default.toString() : 'None'}
+                                  </code>
+                                </div>
+                              </div>
+                            </div>
+                            {parameter.links &&
+                              parameter.links.map((link) => (
+                                <div>
+                                  <h3>See also:</h3>
+                                  <li>
+                                    <a href={link.link}>{link.name}</a>
+                                  </li>
+                                </div>
+                              ))}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}