diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
new file mode 100644
index 00000000000..be15452cdae
--- /dev/null
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -0,0 +1,20 @@
+import Panel from 'components/ui/Panel'
+
+const APIKeys = () => {
+ return (
+
+ Project API
+
+ Your API is secured behind an API gateway which requires an API Key for every request.
+
+ You can use the keys below to use Supabase client libraries.
+
+
+ }
+ >
+ )
+}
+
+export default APIKeys
diff --git a/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx b/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx
new file mode 100644
index 00000000000..4ff1c2bf385
--- /dev/null
+++ b/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx
@@ -0,0 +1,172 @@
+const GetStartedHero = () => {
+ return (
+
+
+
+
+
1
+
+ create table countries {`(`}
+
+
+
+
2
+
+ id bigint generated by default
+
+
+
+
+
4
+
+ iso2 text not null
+
+
+
+
+
6
+
+ local_name text
+
+
+
+
7
+
+ continent continents
+
+
+
+
+
+
+
+ )
+}
+
+export default GetStartedHero
diff --git a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx
deleted file mode 100644
index b83016a2b6f..00000000000
--- a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { Button, IconDatabase, IconKey, IconArchive } from '@supabase/ui'
-import Panel from 'components/ui/Panel'
-
-interface Props {}
-
-const GetStartedPanel: FC = ({}) => {
- const router = useRouter()
- const { ref } = router.query
- return (
- <>
-
-
-
-
Welcome to your new project
-
- Your project has been deployed on its own instance, with its own API all set up and
- ready to use.
-
-
-
-
-
-
-
Get started by building out your database
-
- Start building your app by creating tables and inserting some data. Our table editor
- makes Postgres as easy to use as a spreadsheet, but there's also our SQL editor if you
- need something more.
-
-
-
-
Hello
-
-
-
-
-
-
-
-
- Supabase is built on top of Postgres, an extremely scalable Relational Database.
-
-
-
-
-
-
-
-
-
-
-
- Supabase makes it simple to manage your users.
-
-
-
-
-
-
-
-
-
-
-
- Store and serve large files from multiple buckets.
-
-
-
-
-
-
-
- >
- )
-}
-
-export default GetStartedPanel
diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 0658a231e89..9564a3d16d3 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -1,28 +1,245 @@
-import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
+import Link from 'next/link'
import { FC } from 'react'
-import GetStartedPanel from './GetStartedPanel'
+import SVG from 'react-inlinesvg'
+import { useRouter } from 'next/router'
+import { Button, IconKey, IconArchive, IconExternalLink, IconCode } from '@supabase/ui'
+
+import Panel from 'components/ui/Panel'
+import APIKeys from './APIKeys'
+import GetStartedHero from './GetStartedHero'
+import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
interface Props {}
-const NewProjectPanel: FC = ({}) => (
-
-
-
-
-
-
-
Connecting to your new project
+const NewProjectPanel: FC
= ({}) => {
+ const router = useRouter()
+ const { ref } = router.query
-
- Your project has API keys for interacting with the database via Supabase client libraries.
-
+ return (
+
+
+
+
+
+
Welcome to your new project
+
+ Your project has been deployed on its own instance, with its own API all set up and
+ ready to use.
+
+
+
+
+
+
+
+
+ Get started by building out your database
+
+
+ Start building your app by creating tables and inserting data. Our table editor
+ makes Postgres as easy to use as a spreadsheet, but there's also our SQL editor if
+ you need something more.
+
+
+
+
+
+
+
+
+
+
Explore our other products
+
+ Supabase provides all the backend features you need to build a product. You can use
+ it completely, or just the features you need.
+
+
+
+
+
+
+
+
+ A complete user management system that works without any additional tools.
+
+
+
+
+
+
+
+
+
+
+
+ Store, organize, and serve any file types of any size from multiple buckets.
+
+
+
+
+
+
+
+
+
+
+
+ Write custom code without deploying or scaling servers, with fast deploy times
+ and low latency.
+
+
+
+
+
+
+
+
+
+
+
+
+
Connecting to your new project
+
+ Interact with your database through the Supabase client libraries with your API keys.
+
+
+ More information about your project's keys can be found in your project's API
+ settings.
+
+
+
+
+
+
-
-
-
-
-
-)
+ )
+}
export default NewProjectPanel
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index 80d494395fa..dfd54a394f4 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -9,10 +9,8 @@ import {
IconUsers,
} from '@supabase/ui'
import SVG from 'react-inlinesvg'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
import { ProjectBase } from 'types'
-import { checkPermissions } from 'hooks'
import { Route } from 'components/ui/ui.types'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'