diff --git a/studio/components/to-be-cleaned/Docs/Pages/Authentication.tsx b/studio/components/interfaces/Docs/Authentication.tsx
similarity index 98%
rename from studio/components/to-be-cleaned/Docs/Pages/Authentication.tsx
rename to studio/components/interfaces/Docs/Authentication.tsx
index 29513f00540..7c048ae2a2f 100644
--- a/studio/components/to-be-cleaned/Docs/Pages/Authentication.tsx
+++ b/studio/components/interfaces/Docs/Authentication.tsx
@@ -1,8 +1,8 @@
 import Link from 'next/link'
 
 import { AutoApiService } from 'data/config/project-api-query'
-import CodeSnippet from '../CodeSnippet'
-import Snippets from '../Snippets'
+import CodeSnippet from './CodeSnippet'
+import Snippets from './Snippets'
 
 interface AuthenticationProps {
   autoApiService: AutoApiService
diff --git a/studio/components/to-be-cleaned/Docs/CodeSnippet.tsx b/studio/components/interfaces/Docs/CodeSnippet.tsx
similarity index 68%
rename from studio/components/to-be-cleaned/Docs/CodeSnippet.tsx
rename to studio/components/interfaces/Docs/CodeSnippet.tsx
index 4c58fa3aeb8..9bb0b831f29 100644
--- a/studio/components/to-be-cleaned/Docs/CodeSnippet.tsx
+++ b/studio/components/interfaces/Docs/CodeSnippet.tsx
@@ -4,8 +4,8 @@ interface CodeSnippetProps {
   selectedLang: 'bash' | 'js'
   snippet: {
     title?: string
-    bash: { language: string; code: string }
-    js: { language: string; code: string }
+    bash: { language?: string; code: string }
+    js?: { language?: string; code: string }
   }
 }
 
@@ -14,8 +14,8 @@ const CodeSnippet = ({ selectedLang, snippet }: CodeSnippetProps) => {
   return (
     <div className="codeblock-container">
       <h4>{snippet.title}</h4>
-      <SimpleCodeBlock className={snippet[selectedLang].language}>
-        {snippet[selectedLang].code}
+      <SimpleCodeBlock className={snippet[selectedLang]?.language}>
+        {snippet[selectedLang]?.code}
       </SimpleCodeBlock>
     </div>
   )
diff --git a/studio/components/to-be-cleaned/Docs/Description.tsx b/studio/components/interfaces/Docs/Description.tsx
similarity index 98%
rename from studio/components/to-be-cleaned/Docs/Description.tsx
rename to studio/components/interfaces/Docs/Description.tsx
index 8311ffce3bf..e7543298078 100644
--- a/studio/components/to-be-cleaned/Docs/Description.tsx
+++ b/studio/components/interfaces/Docs/Description.tsx
@@ -22,7 +22,7 @@ const temp_removePostgrestText = (content: string) => {
 
 interface DescrptionProps {
   content: string
-  metadata: { table: string; column: string; rpc: string }
+  metadata: { table?: string; column?: string; rpc?: string }
   onChange: (value: string) => void
 }
 
diff --git a/studio/components/interfaces/Docs/GeneralContent.tsx b/studio/components/interfaces/Docs/GeneralContent.tsx
index 8823d00c030..cb336120919 100644
--- a/studio/components/interfaces/Docs/GeneralContent.tsx
+++ b/studio/components/interfaces/Docs/GeneralContent.tsx
@@ -1,8 +1,8 @@
-import Introduction from 'components/to-be-cleaned/Docs/Pages/Introduction'
-import Authentication from 'components/to-be-cleaned/Docs/Pages/Authentication'
-import TablesIntroduction from 'components/to-be-cleaned/Docs/Pages/Tables/Introduction'
-import UserManagement from 'components/to-be-cleaned/Docs/Pages/UserManagement'
-import RpcIntroduction from 'components/to-be-cleaned/Docs/Pages/Rpc/Introduction'
+import Introduction from 'components/interfaces/Docs/Introduction'
+import Authentication from 'components/interfaces/Docs/Authentication'
+import TablesIntroduction from 'components/interfaces/Docs/Pages/Tables/Introduction'
+import UserManagement from 'components/interfaces/Docs/Pages/UserManagement'
+import RpcIntroduction from 'components/interfaces/Docs/Pages/Rpc/Introduction'
 
 const GeneralContent = ({ autoApiService, selectedLang, page, showApiKey }: any) => {
   let selected = page?.toLowerCase()
diff --git a/studio/components/interfaces/Docs/GeneratingTypes.tsx b/studio/components/interfaces/Docs/GeneratingTypes.tsx
index 6e09a181cf3..049e65127c6 100644
--- a/studio/components/interfaces/Docs/GeneratingTypes.tsx
+++ b/studio/components/interfaces/Docs/GeneratingTypes.tsx
@@ -3,12 +3,12 @@ import { useState } from 'react'
 import { Button, IconDownload, IconExternalLink } from 'ui'
 
 import { useParams } from 'common/hooks'
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 import { generateTypes } from 'data/projects/project-type-generation-query'
 import { useStore } from 'hooks'
 
 interface Props {
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 export default function GeneratingTypes({ selectedLang }: Props) {
diff --git a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx b/studio/components/interfaces/Docs/Introduction.tsx
similarity index 79%
rename from studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx
rename to studio/components/interfaces/Docs/Introduction.tsx
index c64f2f5457e..fcdd3f48e13 100644
--- a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx
+++ b/studio/components/interfaces/Docs/Introduction.tsx
@@ -1,10 +1,10 @@
 import { AutoApiService } from 'data/config/project-api-query'
-import Snippets from '../Snippets'
-import CodeSnippet from '../CodeSnippet'
+import Snippets from 'components/interfaces/Docs/Snippets'
+import CodeSnippet from './CodeSnippet'
 
 interface Props {
   autoApiService: AutoApiService
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 export default function Introduction({ autoApiService, selectedLang }: Props) {
diff --git a/studio/components/to-be-cleaned/Docs/NoDescription.tsx b/studio/components/interfaces/Docs/NoDescription.tsx
similarity index 100%
rename from studio/components/to-be-cleaned/Docs/NoDescription.tsx
rename to studio/components/interfaces/Docs/NoDescription.tsx
diff --git a/studio/components/to-be-cleaned/Docs/Pages/Rpc/Introduction.tsx b/studio/components/interfaces/Docs/Pages/Rpc/Introduction.tsx
similarity index 100%
rename from studio/components/to-be-cleaned/Docs/Pages/Rpc/Introduction.tsx
rename to studio/components/interfaces/Docs/Pages/Rpc/Introduction.tsx
diff --git a/studio/components/to-be-cleaned/Docs/Pages/Tables/Introduction.tsx b/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
similarity index 97%
rename from studio/components/to-be-cleaned/Docs/Pages/Tables/Introduction.tsx
rename to studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
index fc2905d5304..ee3b05b333a 100644
--- a/studio/components/to-be-cleaned/Docs/Pages/Tables/Introduction.tsx
+++ b/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
@@ -2,10 +2,10 @@ import { useParams } from 'common'
 import Link from 'next/link'
 
 import GeneratingTypes from 'components/interfaces/Docs/GeneratingTypes'
-import CodeSnippet from '../../CodeSnippet'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 
 interface IntroductionProps {
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 const Introduction = ({ selectedLang }: IntroductionProps) => {
diff --git a/studio/components/to-be-cleaned/Docs/Pages/UserManagement.tsx b/studio/components/interfaces/Docs/Pages/UserManagement.tsx
similarity index 100%
rename from studio/components/to-be-cleaned/Docs/Pages/UserManagement.tsx
rename to studio/components/interfaces/Docs/Pages/UserManagement.tsx
diff --git a/studio/components/to-be-cleaned/Docs/Param.tsx b/studio/components/interfaces/Docs/Param.tsx
similarity index 92%
rename from studio/components/to-be-cleaned/Docs/Param.tsx
rename to studio/components/interfaces/Docs/Param.tsx
index fd972672d79..70cc94e6195 100644
--- a/studio/components/to-be-cleaned/Docs/Param.tsx
+++ b/studio/components/interfaces/Docs/Param.tsx
@@ -1,7 +1,7 @@
 import { noop } from 'lodash'
 import { Badge, IconCode, IconDatabase } from 'ui'
 
-import Description from './Description'
+import Description from 'components/interfaces/Docs/Description'
 
 function getColumnType(type: string, format: string) {
   // json and jsonb both have type=undefined, so check format instead
@@ -89,7 +89,11 @@ const Param = ({
       {description !== false && (
         <div className="grid gap-2 mt-2">
           <label className="font-mono text-xs uppercase text-scale-900">Description</label>
-          <Description content={description} metadata={metadata} onChange={onDesciptionUpdated} />
+          <Description
+            content={description.toString()}
+            metadata={metadata}
+            onChange={onDesciptionUpdated}
+          />
         </div>
       )}
     </>
diff --git a/studio/components/interfaces/Docs/ResourceContent.tsx b/studio/components/interfaces/Docs/ResourceContent.tsx
index 83210e50b2e..7bb2736a4a0 100644
--- a/studio/components/interfaces/Docs/ResourceContent.tsx
+++ b/studio/components/interfaces/Docs/ResourceContent.tsx
@@ -1,10 +1,10 @@
 import { useParams } from 'common'
 import { IconTable } from 'ui'
 
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
-import Description from 'components/to-be-cleaned/Docs/Description'
-import Param from 'components/to-be-cleaned/Docs/Param'
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
+import Description from 'components/interfaces/Docs/Description'
+import Param from 'components/interfaces/Docs/Param'
+import Snippets from 'components/interfaces/Docs/Snippets'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 
 const ResourceContent = ({
diff --git a/studio/components/interfaces/Docs/RpcContent.tsx b/studio/components/interfaces/Docs/RpcContent.tsx
index dc0c1b85466..4ae7a1b0f89 100644
--- a/studio/components/interfaces/Docs/RpcContent.tsx
+++ b/studio/components/interfaces/Docs/RpcContent.tsx
@@ -1,7 +1,7 @@
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
-import Param from 'components/to-be-cleaned/Docs/Param'
-import Description from 'components/to-be-cleaned/Docs/Description'
+import Snippets from 'components/interfaces/Docs/Snippets'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
+import Param from 'components/interfaces/Docs/Param'
+import Description from 'components/interfaces/Docs/Description'
 
 /**
  * TODO: need to support rpc with the same name and different params type
diff --git a/studio/components/to-be-cleaned/Docs/Snippets.ts b/studio/components/interfaces/Docs/Snippets.ts
similarity index 100%
rename from studio/components/to-be-cleaned/Docs/Snippets.ts
rename to studio/components/interfaces/Docs/Snippets.ts
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index c0847e3788d..bdb05b801b7 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -8,7 +8,7 @@ import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
 import { useCheckPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
+import Snippets from 'components/interfaces/Docs/Snippets'
 import Panel from 'components/ui/Panel'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'