diff --git a/apps/studio/components/interfaces/Home/Connect/Connect.constants.ts b/apps/studio/components/interfaces/Home/Connect/Connect.constants.ts
index 1873ee34810..ff2eae87891 100644
--- a/apps/studio/components/interfaces/Home/Connect/Connect.constants.ts
+++ b/apps/studio/components/interfaces/Home/Connect/Connect.constants.ts
@@ -167,8 +167,8 @@ export const FRAMEWORKS: ConnectionType[] = [
           },
           {
             location: 'nuxt/supabasejs/app',
-            destinationLocation: 'App.tsx',
-            destinationFilename: 'App.tsx',
+            destinationLocation: 'src/App.vue',
+            destinationFilename: 'App.vue',
           },
         ],
       },
@@ -178,30 +178,108 @@ export const FRAMEWORKS: ConnectionType[] = [
     key: 'vuejs',
     label: 'Vue.JS',
     icon: 'vuejs',
-    files: [
+    files: [],
+    children: [
       {
-        // omit .tsx extension
-        location: 'vue1/env.local',
-        destinationFilename: 'vue1.env.local',
-        destinationLocation: 'vue1/.env.local',
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+        files: [
+          {
+            // omit .tsx extension
+            location: 'vue/supabasejs/env.local', // location on local disk
+            destinationLocation: '.env.local', // label for the ui
+            destinationFilename: '.env.local', // where the user should put the file
+          },
+          {
+            location: 'vue/supabasejs/supabase',
+            destinationLocation: 'utils/supabase.ts',
+            destinationFilename: 'supabase.ts',
+          },
+          {
+            location: 'vue/supabasejs/app',
+            destinationLocation: 'src/App.vue',
+            destinationFilename: 'App.vue',
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    key: 'sveltekit',
+    label: 'SvelteKit',
+    icon: 'sveltekit',
+    files: [],
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+        files: [
+          {
+            // omit .tsx extension
+            location: 'sveltekit/supabasejs/env.local',
+            destinationFilename: '.env.local',
+            destinationLocation: '.env.local',
+          },
+          {
+            location: 'sveltekit/supabasejs/supabase',
+            destinationLocation: 'src/lib/supabaseClient.js',
+            destinationFilename: 'supabase.js',
+          },
+          {
+            // omit .tsx extension
+            location: 'sveltekit/supabasejs/server',
+            destinationFilename: '+page.server.js',
+            destinationLocation: 'src/routes/+page.server.js',
+          },
+          {
+            // omit .tsx extension
+            location: 'sveltekit/supabasejs/page',
+            destinationFilename: '+page.server.js',
+            destinationLocation: 'src/routes/+page.server.js',
+          },
+        ],
       },
     ],
-    children: [],
   },
   {
     key: 'solidjs',
     label: 'Solid.js',
     icon: 'solidjs',
-    files: [
+    files: [],
+    children: [
       {
-        // omit .tsx extension
-        location: 'solidjs/env.local',
-        destinationFilename: 'solidjs.env.local',
-        destinationLocation: 'solidjs/.env.local',
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+        files: [
+          {
+            // omit .tsx extension
+            location: 'solidjs/supabasejs/env.local',
+            destinationFilename: '.env.local',
+            destinationLocation: '.env.local',
+          },
+          {
+            location: 'solidjs/supabasejs/supabase',
+            destinationLocation: 'utils/supabase.ts',
+            destinationFilename: 'supabase.ts',
+          },
+          {
+            // omit .tsx extension
+            location: 'solidjs/supabasejs/app',
+            destinationFilename: 'App.tsx',
+            destinationLocation: 'src/App.jsx',
+          },
+        ],
       },
     ],
-    children: [],
   },
+
   {
     key: 'redwoodjs',
     label: 'RedwoodJS',
@@ -220,51 +298,27 @@ export const FRAMEWORKS: ConnectionType[] = [
     key: 'refine',
     label: 'refine',
     icon: 'refine',
-    children: [],
-    files: [
-      {
-        // omit .tsx extension
-        location: 'refine/env.local',
-        destinationFilename: 'refine.env.local',
-        destinationLocation: 'refine/.env.local',
-      },
-    ],
-  },
-
-  {
-    key: 'svelte',
-    label: 'Svelte.JS',
-    icon: 'svelte',
     files: [],
     children: [
       {
-        key: 'svelterouter',
-        label: 'Svelte router',
-        icon: 'svelte',
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
         files: [
           {
             // omit .tsx extension
-            location: 'svelte1/env.local',
-            destinationFilename: 'svelte1.env.local',
-            destinationLocation: 'svelte1/.env.local',
+            location: 'refine/supabasejs/env.local',
+            destinationFilename: 'env.local',
+            destinationLocation: '.env.local',
           },
-        ],
-        children: [],
-      },
-      {
-        key: 'svelterouter2',
-        label: 'Svelte router2',
-        icon: 'svelte',
-        files: [
           {
             // omit .tsx extension
-            location: 'svelte2/env.local',
-            destinationFilename: 'svelte2.env.local',
-            destinationLocation: 'svelte2/.env.local',
+            location: 'refine/supabasejs/supabase',
+            destinationFilename: 'supabase.tsx',
+            destinationLocation: 'utility/supabase.tsx',
           },
         ],
-
-        children: [],
       },
     ],
   },
@@ -301,6 +355,9 @@ export const ORMS: ConnectionType[] = [
   },
 ]
 
+// @todo
+// maybe we need a "command?" prop for files
+// ie: it's not a file, but a terminal command
 export const GRAPHQL: ConnectionType[] = [
   {
     key: 'graphql',
@@ -310,9 +367,9 @@ export const GRAPHQL: ConnectionType[] = [
     files: [
       {
         // omit .tsx extension
-        location: 'graphql/env.local',
-        destinationFilename: 'graphql.env.local',
-        destinationLocation: 'graphql/.env.local',
+        location: 'graphql/terminal',
+        destinationFilename: '',
+        destinationLocation: '',
       },
     ],
   },
diff --git a/apps/studio/components/interfaces/Home/Connect/Connect.tsx b/apps/studio/components/interfaces/Home/Connect/Connect.tsx
index 57a76fa9ebb..4114d159857 100644
--- a/apps/studio/components/interfaces/Home/Connect/Connect.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/Connect.tsx
@@ -15,7 +15,14 @@ import {
   TabsTrigger_Shadcn_,
   Tabs_Shadcn_,
 } from 'ui'
-import { CONNECTION_TYPES, FRAMEWORKS, File, ORMS, Parent } from './Connect.constants'
+import {
+  CONNECTION_TYPES,
+  FRAMEWORKS,
+  File,
+  ORMS,
+  ConnectionType,
+  GRAPHQL,
+} from './Connect.constants'
 import ConnectDropdown from './ConnectDropdown'
 import ConnectTabContent from './ConnectTabContent'
 
@@ -33,7 +40,7 @@ type GetContentFilesArgs = {
   selectedParent: string
   selectedChild: string
   selectedGrandchild: string
-  connectionObject: Parent[]
+  connectionObject: ConnectionType[]
 }
 const getContentFiles = ({
   connectionObject,
@@ -71,7 +78,7 @@ const Connect = () => {
   const [grandChildDropdownOpen, setGrandChildDropdownOpen] = useState(false)
   const [useConnectionPooler, setUseConnectionPooler] = useState(false)
 
-  const [connectionObject, setConnectionObject] = useState<Parent[]>(FRAMEWORKS)
+  const [connectionObject, setConnectionObject] = useState<ConnectionType[]>(FRAMEWORKS)
   const [selectedParent, setSelectedParent] = useState(connectionObject[0].key) // aka nextjs
   const [selectedChild, setSelectedChild] = useState(
     connectionObject.find((item) => item.key === selectedParent)?.children[0]?.key ?? ''
@@ -130,7 +137,7 @@ const Connect = () => {
   }
 
   // reset the parent/child/grandchild when the connection type (tab) changes
-  function handleConnectionTypeChange(connections: Parent[]) {
+  function handleConnectionTypeChange(connections: ConnectionType[]) {
     setSelectedParent(connections[0].key)
 
     if (connections[0]?.children.length > 0) {
@@ -157,6 +164,11 @@ const Connect = () => {
       setConnectionObject(ORMS)
       handleConnectionTypeChange(ORMS)
     }
+
+    if (type === 'graphql') {
+      setConnectionObject(GRAPHQL)
+      handleConnectionTypeChange(GRAPHQL)
+    }
   }
 
   const getChildOptions = () => {
@@ -247,7 +259,7 @@ const Connect = () => {
                       setOpen={setParentSelectorOpen}
                       state={selectedParent}
                       updateState={handleParentChange}
-                      label="Framework"
+                      label={connectionObject === FRAMEWORKS ? 'Frameworks' : 'Tool'}
                       items={connectionObject}
                     />
 
diff --git a/apps/studio/components/interfaces/Home/Connect/Connect.utils.ts b/apps/studio/components/interfaces/Home/Connect/Connect.utils.ts
new file mode 100644
index 00000000000..5eee00b9de7
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/Connect.utils.ts
@@ -0,0 +1,10 @@
+export function getProjectRef(url: string): string | null {
+  const regex: RegExp = /https:\/\/([^\.]+)\./
+  const match: RegExpMatchArray | null = url.match(regex)
+
+  if (match) {
+    return match[1]
+  } else {
+    return null
+  }
+}
diff --git a/apps/studio/components/interfaces/Home/Connect/content/graphql/terminal.tsx b/apps/studio/components/interfaces/Home/Connect/content/graphql/terminal.tsx
new file mode 100644
index 00000000000..42f1efe68b0
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/graphql/terminal.tsx
@@ -0,0 +1,28 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+import { getProjectRef } from '../../Connect.utils'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  const { apiUrl, anonKey } = projectKeys
+  const projectRef = getProjectRef(apiUrl)
+
+  console.log({ apiUrl }, { projectRef })
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+
+curl -X POST https://<PROJECT_REF>.supabase.co/graphql/v1 \
+    -H 'apiKey: <API_KEY>' \
+    -H 'Content-Type: application/json' \
+    --data-raw '{"query": "{ accountCollection(first: 1) { edges { node { id } } } }", "variables": {}}'
+
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/app.tsx b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/app.tsx
index c2ace16d8c0..791c742b42b 100644
--- a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/app.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/app.tsx
@@ -5,33 +5,26 @@ const ContentFile = () => {
     <div>
       <SimpleCodeBlock className="typescript">
         {`
-import { useState, useEffect } from 'react'
-import { supabase } from '../utils/supabase'
+<script setup>
+  import { supabase } from '../utils/supabase'
+  const todos = ref([])
 
-function Page() {
-  const [todos, setTodos] = useState([])
-
-  useEffect(() => {
-    function getTodos() {
-      const { data: todos } = await supabase.from('todos').select()
-
-      if (todos.length > 1) {
-        setTodos(todos)
-      }
-    }
+  async function getTodos() {
+    const { data: todos } = await supabase.from('todos').select()
+    countries.value = todos
+  }
 
+  onMounted(() => {
     getTodos()
-  }, [])
+  })
 
-  return (
-    <div>
-      {todos.map((todo) => (
-        <li key={todo}>{todo}</li>
-      ))}
-    </div>
-  )
-}
-export default Page
+</script>
+
+<template>
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li>
+  </ul>
+</template>
 `}
       </SimpleCodeBlock>
     </div>
diff --git a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/env.local.tsx
index e6230f27e1f..1a9f0d21fe0 100644
--- a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/env.local.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/env.local.tsx
@@ -6,8 +6,8 @@ const ContentFile = ({ projectKeys }: ContentFileProps) => {
     <div>
       <SimpleCodeBlock className="bash">
         {`
-NEXT_PUBLIC_SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
-NEXT_PUBLIC_SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
         `}
       </SimpleCodeBlock>
     </div>
diff --git a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/supabase.tsx
index 3266048a6d7..496d94f6862 100644
--- a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/supabase.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/supabase.tsx
@@ -8,8 +8,8 @@ const ContentFile = ({ projectKeys }: ContentFileProps) => {
         {`
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey = process.env.SUPABASE_KEY;
 
 export const supabase = createClient(supabaseUrl, supabaseKey);
         `}
diff --git a/apps/studio/components/interfaces/Home/Connect/content/redwood/app.tsx b/apps/studio/components/interfaces/Home/Connect/content/redwood/app.tsx
new file mode 100644
index 00000000000..3fef5d1e11f
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/redwood/app.tsx
@@ -0,0 +1,33 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+import { supabase } from '../utils/supabase'
+import { createResource, For } from "solid-js";
+
+async function getTodos() {
+  const { data: todos } = await supabase.from("todos").select();
+  return data;
+}
+
+function App() {
+  const [todos] = createResource(getTodos);
+
+  return (
+    <ul>
+      <For each={todos()}>{(country) => <li>{todo.name}</li>}</For>
+    </ul>
+  );
+}
+
+export default App;
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/redwood/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/redwood/env.local.tsx
new file mode 100644
index 00000000000..223473a68e9
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/redwood/env.local.tsx
@@ -0,0 +1,17 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/redwood/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/redwood/supabase.tsx
new file mode 100644
index 00000000000..aef09dbf23f
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/redwood/supabase.tsx
@@ -0,0 +1,21 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey = process.env.SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/app.tsx b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/app.tsx
new file mode 100644
index 00000000000..6ed992dab6b
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/app.tsx
@@ -0,0 +1,36 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+import { Refine } from "@refinedev/core";
+import routerBindings from "@refinedev/react-router-v6";
+import { dataProvider, liveProvider } from "@refinedev/supabase";
+import { BrowserRouter } from "react-router-dom";
+import authProvider from "./authProvider";
+import { supabaseClient } from "./utility/supabase";
+
+function App() {
+  return (
+    <BrowserRouter>
+        <Refine
+          dataProvider={dataProvider(supabaseClient)}
+          liveProvider={liveProvider(supabaseClient)}
+          authProvider={authProvider}
+          routerProvider={routerBindings}
+          resources={...}>
+        </Refine>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/env.local.tsx
new file mode 100644
index 00000000000..223473a68e9
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/env.local.tsx
@@ -0,0 +1,17 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/supabase.tsx
new file mode 100644
index 00000000000..466e8623447
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/supabase.tsx
@@ -0,0 +1,28 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+import { createClient } from "@refinedev/supabase";
+
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const SUPABASE_KEY = process.env.SUPABASE_KEY
+
+export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
+  db: {
+    schema: "public",
+  },
+  auth: {
+    persistSession: true,
+  },
+});
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/app.tsx b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/app.tsx
new file mode 100644
index 00000000000..3fef5d1e11f
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/app.tsx
@@ -0,0 +1,33 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+import { supabase } from '../utils/supabase'
+import { createResource, For } from "solid-js";
+
+async function getTodos() {
+  const { data: todos } = await supabase.from("todos").select();
+  return data;
+}
+
+function App() {
+  const [todos] = createResource(getTodos);
+
+  return (
+    <ul>
+      <For each={todos()}>{(country) => <li>{todo.name}</li>}</For>
+    </ul>
+  );
+}
+
+export default App;
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/env.local.tsx
new file mode 100644
index 00000000000..223473a68e9
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/env.local.tsx
@@ -0,0 +1,17 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/supabase.tsx
new file mode 100644
index 00000000000..aef09dbf23f
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/supabase.tsx
@@ -0,0 +1,21 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey = process.env.SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/env.local.tsx
new file mode 100644
index 00000000000..223473a68e9
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/env.local.tsx
@@ -0,0 +1,17 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/page.tsx b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/page.tsx
new file mode 100644
index 00000000000..3fef5d1e11f
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/page.tsx
@@ -0,0 +1,33 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+import { supabase } from '../utils/supabase'
+import { createResource, For } from "solid-js";
+
+async function getTodos() {
+  const { data: todos } = await supabase.from("todos").select();
+  return data;
+}
+
+function App() {
+  const [todos] = createResource(getTodos);
+
+  return (
+    <ul>
+      <For each={todos()}>{(country) => <li>{todo.name}</li>}</For>
+    </ul>
+  );
+}
+
+export default App;
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/server.tsx b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/server.tsx
new file mode 100644
index 00000000000..4aaabe728a7
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/server.tsx
@@ -0,0 +1,22 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+  import { supabase } from "$lib/supabaseClient";
+
+  export async function load() {
+    const { data } = await supabase.from("countries").select();
+    return {
+      countries: data ?? [],
+    };
+  }
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/supabase.tsx
new file mode 100644
index 00000000000..d2e0885bd9c
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/supabase.tsx
@@ -0,0 +1,21 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey = process.env.SUPABASE_ANON_KEY;
+
+export const supabase = createClient(https://supabaseUrl.supabase.co', 'supabaseKey')
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/vue/postgres-js/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/vue/postgres-js/env.local.tsx
deleted file mode 100644
index c07f54cef19..00000000000
--- a/apps/studio/components/interfaces/Home/Connect/content/vue/postgres-js/env.local.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-interface envProps {
-  props: any
-}
-const ConnectContentComponent = () => {
-  return <div>.env.local file for vue/postgres-js</div>
-}
-
-export default ConnectContentComponent
diff --git a/apps/studio/components/interfaces/Home/Connect/content/vue/supabase-js/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/vue/supabase-js/env.local.tsx
deleted file mode 100644
index 386ae636c5a..00000000000
--- a/apps/studio/components/interfaces/Home/Connect/content/vue/supabase-js/env.local.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const ConnectContentComponent = () => {
-  return <div>.env.local file for vue/supabase-js</div>
-}
-
-export default ConnectContentComponent
diff --git a/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/app.tsx b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/app.tsx
new file mode 100644
index 00000000000..791c742b42b
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/app.tsx
@@ -0,0 +1,34 @@
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = () => {
+  return (
+    <div>
+      <SimpleCodeBlock className="typescript">
+        {`
+<script setup>
+  import { supabase } from '../utils/supabase'
+  const todos = ref([])
+
+  async function getTodos() {
+    const { data: todos } = await supabase.from('todos').select()
+    countries.value = todos
+  }
+
+  onMounted(() => {
+    getTodos()
+  })
+
+</script>
+
+<template>
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li>
+  </ul>
+</template>
+`}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/env.local.tsx b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/env.local.tsx
new file mode 100644
index 00000000000..1a9f0d21fe0
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/env.local.tsx
@@ -0,0 +1,17 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/supabase.tsx b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/supabase.tsx
new file mode 100644
index 00000000000..496d94f6862
--- /dev/null
+++ b/apps/studio/components/interfaces/Home/Connect/content/vue/supabasejs/supabase.tsx
@@ -0,0 +1,21 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <div>
+      <SimpleCodeBlock className="bash">
+        {`
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey = process.env.SUPABASE_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+        `}
+      </SimpleCodeBlock>
+    </div>
+  )
+}
+
+export default ContentFile
diff --git a/apps/studio/public/img/libraries/graphql-icon.svg b/apps/studio/public/img/libraries/graphql-icon.svg
new file mode 100644
index 00000000000..f57033c1858
--- /dev/null
+++ b/apps/studio/public/img/libraries/graphql-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#e10098" style="fill:color(display-p3 .8824 0 .5961)" viewBox="0 0 100 100"><path fill-rule="evenodd" d="m50 6.903 37.323 21.549v43.096L50 93.097 12.677 71.548V28.451L50 6.903ZM16.865 30.87v31.656L44.28 15.041 16.864 30.87ZM50 13.51 18.398 68.246h63.205L50 13.509Zm27.415 58.924h-54.83L50 88.261l27.415-15.828Zm5.72-9.908L55.72 15.041 83.136 30.87v31.656Z" clip-rule="evenodd"/><circle cx="50" cy="9.321" r="8.82"/><circle cx="85.229" cy="29.66" r="8.82"/><circle cx="85.229" cy="70.34" r="8.82"/><circle cx="50" cy="90.679" r="8.82"/><circle cx="14.766" cy="70.34" r="8.82"/><circle cx="14.766" cy="29.66" r="8.82"/></svg>
\ No newline at end of file
diff --git a/apps/studio/public/img/libraries/nuxt-icon.svg b/apps/studio/public/img/libraries/nuxt-icon.svg
new file mode 100644
index 00000000000..22096977c69
--- /dev/null
+++ b/apps/studio/public/img/libraries/nuxt-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="0 0 48 32"><path fill="#00DC82" fill-rule="nonzero" d="M26.88 32h17.76c.567 0 1.11-.2 1.6-.48.49-.28.997-.633 1.28-1.12.283-.486.48-1.038.48-1.6s-.196-1.114-.48-1.6l-12-20.64a2.918 2.918 0 0 0-1.12-1.12c-.49-.28-1.193-.48-1.76-.48s-1.11.2-1.6.48c-.49.28-.837.634-1.12 1.12l-3.04 5.28L20.8 1.6c-.284-.487-.63-1-1.12-1.28-.49-.28-1.033-.32-1.6-.32-.567 0-1.11.04-1.6.32s-.997.793-1.28 1.28L.32 27.2c-.284.486-.32 1.038-.32 1.6 0 .561.037 1.113.32 1.6.283.486.79.84 1.28 1.12.49.28 1.033.48 1.6.48h11.2c4.438 0 7.668-1.99 9.92-5.76l5.44-9.44 2.88-4.96 8.8 15.04H29.76L26.88 32Zm-12.64-5.12H6.4L18.08 6.72 24 16.8l-3.921 6.836c-1.496 2.446-3.201 3.244-5.839 3.244Z"/></svg>
\ No newline at end of file
diff --git a/apps/studio/public/img/libraries/svelte-icon.svg b/apps/studio/public/img/libraries/sveltekit-icon.svg
similarity index 100%
rename from apps/studio/public/img/libraries/svelte-icon.svg
rename to apps/studio/public/img/libraries/sveltekit-icon.svg