diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
index 4612f6c4b7606..4e7d6a8a0e40b 100644
--- a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
@@ -55,7 +55,7 @@ export const ActivityStats = () => {
 
   return (
     <div className="@container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-wrap">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-6 flex-wrap">
         <ServiceStatus />
 
         <SingleStat
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
index 7763014676ab1..e555e13aa49fb 100644
--- a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
@@ -1,44 +1,182 @@
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
+
 import { cn, Button, Card, CardContent, CardHeader, CardTitle, Badge } from 'ui'
-import { Row } from 'ui-patterns'
+
 import { GettingStartedStep } from './GettingStartedSection'
+import Image from 'next/image'
+import { BASE_PATH } from 'lib/constants'
 
 export interface GettingStartedProps {
   steps: GettingStartedStep[]
 }
 
 export function GettingStarted({ steps }: GettingStartedProps) {
+  const [activeStepKey, setActiveStepKey] = useState<string | null>(steps[0]?.key ?? null)
+
+  useEffect(() => {
+    if (steps.length === 0) {
+      setActiveStepKey(null)
+      return
+    }
+
+    const hasActiveStep = activeStepKey ? steps.some((step) => step.key === activeStepKey) : false
+
+    if (!hasActiveStep) {
+      setActiveStepKey(steps[0]?.key ?? null)
+    }
+  }, [steps, activeStepKey])
+
+  const activeStep = steps.find((step) => step.key === activeStepKey) ?? steps[0]
+  const activeStepIndex = activeStep ? steps.findIndex((step) => step.key === activeStep.key) : -1
+  const previousStep = activeStepIndex > 0 ? steps[activeStepIndex - 1] : null
+  const nextStep =
+    activeStepIndex > -1 && activeStepIndex < steps.length - 1 ? steps[activeStepIndex + 1] : null
+
+  const handleSelectPrevious = () => {
+    if (previousStep) {
+      setActiveStepKey(previousStep.key)
+    }
+  }
+
+  const handleSelectNext = () => {
+    if (nextStep) {
+      setActiveStepKey(nextStep.key)
+    }
+  }
+
+  if (!activeStep) {
+    return null
+  }
+
   return (
-    <Row columns={[3, 2, 1]} className="items-stretch">
-      {steps.map((step, index) => (
-        <Card key={step.key} className={cn('group overflow-hidden h-full flex flex-col')}>
-          <CardHeader className="flex flex-row space-y-0 justify-between items-center border-b-0">
-            <div className="flex flex-row items-center gap-3">
-              {step.icon && <div>{step.icon}</div>}
-              <CardTitle className="text-foreground-light">
-                {index + 1}. {step.title}
-              </CardTitle>
+    <Card className="overflow-hidden">
+      <div className="flex flex-col lg:flex-row">
+        <aside className="hidden border-r lg:block lg:w-[calc(1/3*100%-16px)]">
+          <ol>
+            {steps.map((step, index) => {
+              const isActive = step.key === activeStep.key
+              const isComplete = step.status === 'complete'
+
+              return (
+                <li key={step.key} className="border-b last:border-b-0 truncate">
+                  <Button
+                    type="text"
+                    onClick={() => setActiveStepKey(step.key)}
+                    className={cn(
+                      'pl-1 block justify-start w-full rounded-none h-auto text-left text-foreground-light',
+                      isActive && 'bg-muted text-foreground'
+                    )}
+                  >
+                    <div className="flex items-center gap-3 text-sm w-full">
+                      <span
+                        className={cn(
+                          'text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md'
+                        )}
+                      >
+                        {isComplete ? (
+                          <Check size={16} strokeWidth={1.5} className="text-brand" />
+                        ) : (
+                          index + 1
+                        )}
+                      </span>
+                      <span
+                        className={cn(
+                          'flex-1 block truncate',
+                          isActive ? 'text-foreground' : 'group-hover:text-foreground',
+                          isComplete && 'line-through'
+                        )}
+                      >
+                        {step.title}
+                      </span>
+                      <ChevronRight
+                        size={16}
+                        strokeWidth={1.5}
+                        className="text-foreground-lighter"
+                      />
+                    </div>
+                  </Button>
+                </li>
+              )
+            })}
+          </ol>
+        </aside>
+
+        <CardContent className="flex flex-1 flex-col gap-0 p-0 overflow-y-auto border-b-0">
+          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 lg:hidden">
+            <span className="text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md">
+              {activeStepIndex + 1}
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                type="outline"
+                onClick={handleSelectPrevious}
+                disabled={!previousStep}
+                className="gap-2"
+                aria-label="Previous step"
+              >
+                <ChevronLeft size={16} strokeWidth={1.5} />
+              </Button>
+              <Button
+                type="outline"
+                onClick={handleSelectNext}
+                disabled={!nextStep}
+                className="gap-2"
+                aria-label="Next step"
+              >
+                <ChevronRight size={16} strokeWidth={1.5} />
+              </Button>
+            </div>
+          </div>
+          <div className="relative w-full flex-1 min-h-[100px] shrink-0 overflow-hidden">
+            {activeStep.image ? (
+              <Image
+                className="w-full select-none"
+                src={activeStep.image}
+                fill
+                objectFit="cover"
+                objectPosition="top"
+                alt={activeStep.title}
+              />
+            ) : (
+              <div className="absolute top-0 left-0 right-0 overflow-hidden">
+                <img
+                  src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
+                  alt="Supabase Grafana"
+                  className="w-full h-full object-cover object-right hidden dark:block user-select-none"
+                />
+                <img
+                  src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
+                  alt="Supabase Grafana"
+                  className="w-full h-full object-cover object-right dark:hidden user-select-none"
+                />
+              </div>
+            )}
+            <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background-surface-100 to-transparent" />
+          </div>
+          <div className="p-10">
+            <div className="flex flex-row items-center gap-4 mb-1">
+              <h3>{activeStep.title}</h3>
+              <Badge
+                variant={activeStep.status === 'complete' ? 'success' : 'default'}
+                className="capitalize hidden lg:inline-flex"
+              >
+                {activeStep.status}
+              </Badge>
             </div>
-            <Badge
-              variant={step.status === 'complete' ? 'success' : 'default'}
-              className="capitalize"
-            >
-              {step.status}
-            </Badge>
-          </CardHeader>
-          <CardContent className="p-6 pt-16 flex-1 flex flex-col justify-end">
-            {step.image && <div className="w-full">{step.image}</div>}
-            <p className={cn('text-base text-foreground')}>{step.description}</p>
-            <div className="flex flex-wrap gap-2 mt-4">
-              {step.actions.map((action, i) => {
+            <p className="text-foreground-light max-w-prose mb-4">{activeStep.description}</p>
+            <div className="mt-auto flex flex-wrap gap-2 pt-2">
+              {activeStep.actions.map((action, i) => {
                 if (action.component) {
-                  return <div key={`${step.key}-action-${i}`}>{action.component}</div>
+                  return <div key={`${activeStep.key}-action-${i}`}>{action.component}</div>
                 }
+
                 if (action.href) {
                   return (
                     <Button
                       asChild
-                      key={`${step.key}-action-${i}`}
+                      key={`${activeStep.key}-action-${i}`}
                       type={action.variant ?? 'default'}
                       icon={action.icon}
                       className="text-foreground-light hover:text-foreground"
@@ -47,22 +185,22 @@ export function GettingStarted({ steps }: GettingStartedProps) {
                     </Button>
                   )
                 }
+
                 return (
                   <Button
-                    key={`${step.key}-action-${i}`}
+                    key={`${activeStep.key}-action-${i}`}
                     type={action.variant ?? 'default'}
                     icon={action.icon}
                     onClick={action.onClick}
-                    className="text-foreground-light hover:text-foreground"
                   >
                     {action.label}
                   </Button>
                 )
               })}
             </div>
-          </CardContent>
-        </Card>
-      ))}
-    </Row>
+          </div>
+        </CardContent>
+      </div>
+    </Card>
   )
 }
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
index 9d91f50447d79..571e8df0ca250 100644
--- a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
@@ -1,7 +1,13 @@
 import { useParams } from 'common'
+import { useBranchesQuery } from 'data/branches/branches-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { useRouter } from 'next/router'
+import { useCallback, useMemo, useState } from 'react'
+import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+
 import { GettingStarted } from './GettingStarted'
+import { FrameworkSelector } from './FrameworkSelector'
 import {
   Code,
   Database,
@@ -14,11 +20,6 @@ import {
   Table2,
   GitBranch,
 } from 'lucide-react'
-import { useBranchesQuery } from 'data/branches/branches-query'
-import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
-import { useRouter } from 'next/router'
-import { useCallback, useMemo, useState } from 'react'
-import { FrameworkSelector } from './FrameworkSelector'
 import { FRAMEWORKS } from 'components/interfaces/Connect/Connect.constants'
 import {
   AiIconAnimation,
@@ -46,7 +47,7 @@ export type GettingStartedStep = {
   icon?: React.ReactNode
   title: string
   description: string
-  image?: React.ReactNode
+  image?: string
   actions: GettingStartedAction[]
 }
 
@@ -82,6 +83,11 @@ export function GettingStartedSection({
   const hasNonDefaultBranch =
     (branchesData ?? []).some((b) => !b.is_default) || isDefaultProject === false
 
+  const selectedFrameworkMeta = useMemo(
+    () => FRAMEWORKS.find((item) => item.key === selectedFramework),
+    [selectedFramework]
+  )
+
   // Helpers
   const openAiChat = useCallback(
     (name: string, initialInput: string) => aiSnap.newChat({ name, open: true, initialInput }),
@@ -118,11 +124,11 @@ export function GettingStartedSection({
       },
       {
         label: 'Connect',
-        variant: 'default',
+        variant: 'primary',
         onClick: openConnect,
       },
     ],
-    [openConnect, selectedFramework]
+    [openConnect, openAiChat, selectedFramework, selectedFrameworkMeta?.label]
   )
 
   const codeSteps: GettingStartedStep[] = useMemo(
@@ -133,7 +139,7 @@ export function GettingStartedSection({
         title: 'Install the Supabase CLI',
         icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          'To get started, install the Supabase CLI to manage your project locally, handle migrations, and seed data.',
+          'To get started, install the Supabase CLI—our command-line toolkit for managing projects locally, handling migrations, and seeding data—using the npm command below to add it to your workspace.',
         actions: [
           {
             label: 'Install via npm',
@@ -150,7 +156,9 @@ export function GettingStartedSection({
         status: tablesCount > 0 ? 'complete' : 'incomplete',
         title: 'Design your database schema',
         icon: <Database strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Next, create a schema file that defines the structure of your database.',
+        image: '/img/getting-started/declarative-schemas.png',
+        description:
+          'Next, create a schema file that defines the structure of your database, either following our declarative schema guide or asking the AI assistant to generate one for you.',
         actions: [
           {
             label: 'Create schema file',
@@ -174,7 +182,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Seed your database with data',
         icon: <Table strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Now, create a seed file to populate your database with initial data.',
+        description:
+          'Now, create a seed file to populate your database with initial data, using the docs for guidance or letting the AI assistant draft realistic inserts.',
         actions: [
           {
             label: 'Create a seed file',
@@ -199,7 +208,7 @@ export function GettingStartedSection({
         title: 'Secure your data with RLS policies',
         icon: <Shield strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Let's secure your data by enabling Row Level Security and defining access policies in a migration file.",
+          "Let's secure your data by enabling Row Level Security (per-row access rules that decide who can read or write specific records) and defining policies in a migration file, either configuring them manually or letting the AI assistant draft policies for your tables.",
         actions: [
           {
             label: 'Create a migration file',
@@ -224,7 +233,7 @@ export function GettingStartedSection({
         title: 'Configure authentication',
         icon: <User strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "It's time to configure your authentication providers and settings for Supabase Auth.",
+          "It's time to configure your authentication providers and settings for Supabase Auth, so jump into the configuration page and tailor the providers you need.",
         actions: [
           { label: 'Configure', href: `/project/${ref}/auth/providers`, variant: 'default' },
         ],
@@ -234,7 +243,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Connect your application',
         icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Your project is ready. Connect your app using one of our client libraries.',
+        description:
+          'Your project is ready; use the framework selector to preview starter code and launch the Connect flow with the client library you prefer.',
         actions: connectActions,
       },
       {
@@ -242,7 +252,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Sign up your first user',
         icon: <UserPlus strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Test your authentication setup by creating the first user account.',
+        description:
+          'Test your authentication setup by creating the first user account, following the docs if you need a step-by-step walkthrough.',
         actions: [
           {
             label: 'Read docs',
@@ -256,7 +267,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Upload a file',
         icon: <Upload strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Integrate file storage by creating a bucket and uploading a file.',
+        description:
+          'Integrate file storage by creating a bucket and uploading a file, starting from the buckets dashboard linked below.',
         actions: [
           { label: 'Buckets', href: `/project/${ref}/storage/buckets`, variant: 'default' },
         ],
@@ -266,7 +278,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Deploy an Edge Function',
         icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Add server-side logic by creating and deploying your first Edge Function.',
+        description:
+          'Add server-side logic by creating and deploying your first Edge Function—a lightweight TypeScript or JavaScript function that runs close to your users—then revisit the list to monitor and iterate on it.',
         actions: [
           {
             label: 'Create a function',
@@ -282,7 +295,7 @@ export function GettingStartedSection({
         title: "Monitor your project's usage",
         icon: <BarChart3 strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Track your project's activity by creating custom reports for API, database, and auth events.",
+          "Track your project's activity by creating custom reports for API, database, and auth events right from the reports dashboard.",
         actions: [{ label: 'Reports', href: `/project/${ref}/reports`, variant: 'default' }],
       },
       {
@@ -291,7 +304,7 @@ export function GettingStartedSection({
         title: 'Connect to GitHub',
         icon: <GitBranch strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          'Streamline your development workflow by connecting your project to GitHub to automatically manage branches.',
+          'Streamline your development workflow by connecting your project to GitHub, using the integrations page to automate branch management.',
         actions: [
           {
             label: 'Connect to GitHub',
@@ -311,8 +324,9 @@ export function GettingStartedSection({
         status: tablesCount > 0 ? 'complete' : 'incomplete',
         title: 'Create your first table',
         icon: <Database strokeWidth={1} className="text-foreground-muted" size={16} />,
+        image: '/img/getting-started/sample.png',
         description:
-          "To kick off your new project, let's start by creating your very first database table using either the table editor or AI Assistant.",
+          "To kick off your new project, let's start by creating your very first database table using either the table editor or the AI assistant to shape the structure for you.",
         actions: [
           { label: 'Create a table', href: `/project/${ref}/editor`, variant: 'default' },
           {
@@ -333,7 +347,7 @@ export function GettingStartedSection({
         title: 'Add sample data',
         icon: <Table strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Next, let's add some sample data that you can play with once you connect your app.",
+          "Next, let's add some sample data that you can play with once you connect your app, either by inserting rows yourself or letting the AI assistant craft realistic examples.",
         actions: [
           { label: 'Add data', href: `/project/${ref}/editor`, variant: 'default' },
           {
@@ -354,7 +368,7 @@ export function GettingStartedSection({
         title: 'Secure your data with Row Level Security',
         icon: <Shield strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Now that you have some data, let's secure it by enabling Row Level Security and creating policies.",
+          "Now that you have some data, let's secure it by enabling Row Level Security (row-specific access rules that control who can view or modify records) and creating policies yourself or with help from the AI assistant.",
         actions: [
           {
             label: 'Create a policy',
@@ -378,7 +392,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Set up authentication',
         icon: <User strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: "It's time to set up authentication so you can start signing up users.",
+        description:
+          "It's time to set up authentication so you can start signing up users, configuring providers and settings from the auth dashboard.",
         actions: [
           {
             label: 'Configure auth',
@@ -392,7 +407,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Connect your application',
         icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: "Your project is ready. Let's connect your application to Supabase.",
+        description:
+          'Your project is ready; use the framework selector to preview starter code and launch the Connect flow to wire up your app.',
         actions: connectActions,
       },
       {
@@ -400,7 +416,8 @@ export function GettingStartedSection({
         status: 'incomplete',
         title: 'Sign up your first user',
         icon: <UserPlus strokeWidth={1} className="text-foreground-muted" size={16} />,
-        description: 'Test your authentication by signing up your first user.',
+        description:
+          'Test your authentication by signing up your first user, referencing the docs if you need sample flows or troubleshooting tips.',
         actions: [
           {
             label: 'Read docs',
@@ -415,7 +432,7 @@ export function GettingStartedSection({
         title: 'Upload a file',
         icon: <Upload strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Let's add file storage to your app by creating a bucket and uploading your first file.",
+          "Let's add file storage to your app by creating a bucket and uploading your first file from the buckets dashboard.",
         actions: [
           { label: 'Buckets', href: `/project/${ref}/storage/buckets`, variant: 'default' },
         ],
@@ -426,7 +443,7 @@ export function GettingStartedSection({
         title: 'Add server-side logic',
         icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Extend your app's functionality by creating an Edge Function for server-side logic.",
+          "Extend your app's functionality by creating an Edge Function—a lightweight serverless function that executes close to your users—for server-side logic directly from the functions page.",
         actions: [
           {
             label: 'Create a function',
@@ -441,7 +458,7 @@ export function GettingStartedSection({
         title: "Monitor your project's health",
         icon: <BarChart3 strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          "Keep an eye on your project's performance and usage by setting up custom reports.",
+          "Keep an eye on your project's performance and usage by setting up custom reports from the reports dashboard.",
         actions: [
           { label: 'Create a report', href: `/project/${ref}/reports`, variant: 'default' },
         ],
@@ -452,7 +469,7 @@ export function GettingStartedSection({
         title: 'Create a branch to test changes',
         icon: <GitBranch strokeWidth={1} className="text-foreground-muted" size={16} />,
         description:
-          'Safely test changes by creating a preview branch before deploying to production.',
+          'Safely test changes by creating a preview branch before deploying to production, using the branches view to spin one up.',
         actions: [
           { label: 'Create a branch', href: `/project/${ref}/branches`, variant: 'default' },
         ],
@@ -476,16 +493,20 @@ export function GettingStartedSection({
             <ToggleGroupItem
               value="no-code"
               aria-label="No-code workflow"
-              className="w-[26px] h-[26px] p-0"
+              size="sm"
+              className="text-xs gap-2 h-auto"
             >
-              <Table2 size={16} strokeWidth={1.5} className="text-foreground" />
+              <Table2 size={16} strokeWidth={1.5} />
+              Code
             </ToggleGroupItem>
             <ToggleGroupItem
               value="code"
+              size="sm"
               aria-label="Code workflow"
-              className="w-[26px] h-[26px] p-0"
+              className="text-xs gap-2 h-auto"
             >
-              <Code size={16} strokeWidth={1.5} className="text-foreground" />
+              <Code size={16} strokeWidth={1.5} />
+              No-code
             </ToggleGroupItem>
           </ToggleGroup>
           <Button size="tiny" type="outline" onClick={() => onChange('hidden')}>
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
index 1c8aa8fbb2810..a7a98b51cf470 100644
--- a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { Archive, ChevronDown, Code, Database, Key, Zap } from 'lucide-react'
+import { Archive, Code, Database, Key, Zap, ChevronDown } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
@@ -19,14 +19,15 @@ import {
   CardHeader,
   CardTitle,
   DropdownMenu,
+  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
-  DropdownMenuTrigger,
+  TooltipTrigger,
   Loading,
   Tooltip,
   TooltipContent,
-  TooltipTrigger,
+  cn,
 } from 'ui'
 import { Row } from 'ui-patterns'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
@@ -268,17 +269,20 @@ export const ProjectUsageSection = () => {
   return (
     <div className="space-y-6">
       <div className="flex flex-row justify-between items-center gap-x-2">
-        <div className="flex items-center gap-6">
-          <div className="flex items-baseline gap-2 heading-section text-foreground-light">
+        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
+          <div className="flex items-start gap-2 heading-section text-foreground-light">
             <span className="text-foreground">{totalRequests.toLocaleString()}</span>
             <span>Total Requests</span>
-            <span className={`${totalDeltaClass}`}>{formatDelta(totalRequestsChangePct)}</span>
+            <span className={cn('text-sm', totalDeltaClass)}>
+              {formatDelta(totalRequestsChangePct)}
+            </span>
           </div>
-          <span className="text-foreground-muted">/</span>
-          <div className="flex items-baseline gap-2 heading-section text-foreground-light">
+          <div className="flex items-start gap-2 heading-section text-foreground-light">
             <span className="text-foreground">{errorRate.toFixed(1)}%</span>
             <span>Error Rate</span>
-            <span className={`${errorDeltaClass}`}>{formatDelta(errorRateChangePct)}</span>
+            <span className={cn('text-sm', errorDeltaClass)}>
+              {formatDelta(errorRateChangePct)}
+            </span>
           </div>
         </div>
         <DropdownMenu>
diff --git a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
index 0b1539a933e11..48cad4cd2788a 100644
--- a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
@@ -274,7 +274,7 @@ export const ServiceStatus = () => {
               ))}
             </div>
           }
-          label={<span>Health</span>}
+          label={<span>Status</span>}
           value={<span>{overallStatusLabel}</span>}
         />
       </PopoverTrigger_Shadcn_>
diff --git a/apps/studio/components/interfaces/HomeNew/TopSection.tsx b/apps/studio/components/interfaces/HomeNew/TopSection.tsx
index 56c026709ebb2..0d44224947a6a 100644
--- a/apps/studio/components/interfaces/HomeNew/TopSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/TopSection.tsx
@@ -31,9 +31,9 @@ export const TopSection = ({
 }: TopSectionProps) => {
   return (
     <div className="flex flex-col gap-y-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-16 py-16 md:p-0 w-full items-center">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-0 w-full items-center">
         <div className="flex flex-col">
-          <div className="flex flex-col md:flex-row md:items-center gap-3 w-full">
+          <div className="flex flex-row flex-wrap items-center gap-4 w-full">
             <div>
               {!isMainBranch && (
                 <Link
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 89bae87a18ec2..f9abc67e8a7c0 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -7,27 +7,36 @@ import { useParams } from 'common'
 import { useOrganizationAcceptInvitationMutation } from 'data/organization-members/organization-invitation-accept-mutation'
 import { useOrganizationInvitationTokenQuery } from 'data/organization-members/organization-invitation-token-query'
 import { useProfile } from 'lib/profile'
-import { ResponseError } from 'types'
-import { Button, Loading, cn } from 'ui'
+import { Button, cn } from 'ui'
+import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
 import { OrganizationInviteError } from './OrganizationInviteError'
 
 export const OrganizationInvite = () => {
   const router = useRouter()
   const { profile } = useProfile()
-  const { slug, token, name } = useParams()
+  const { slug, token } = useParams()
 
-  const { data, error, isSuccess, isError, isLoading } = useOrganizationInvitationTokenQuery(
+  const {
+    data,
+    error,
+    isSuccess: isSuccessInvitation,
+    isError: isErrorInvitation,
+    isLoading: isLoadingInvitation,
+  } = useOrganizationInvitationTokenQuery(
     { slug, token },
     {
       retry: false,
       refetchOnWindowFocus: false,
+      enabled: !!profile,
     }
   )
   const hasError =
-    isError || (isSuccess && (data.token_does_not_exist || data.expired_token || !data.email_match))
-  const isNotSignedInError = error?.message.includes('No authorization token was found')
+    isErrorInvitation ||
+    (isSuccessInvitation && (data.token_does_not_exist || data.expired_token || !data.email_match))
+  const inviteIsNoLongerValid =
+    error?.code === 401 && error?.message.includes('Failed to retrieve organization')
 
-  const organizationName = isSuccess ? data?.organization_name : 'an organization'
+  const organizationName = isSuccessInvitation ? data?.organization_name : 'An organization'
   const loginRedirectLink = `/sign-in?returnTo=${encodeURIComponent(`/join?token=${token}&slug=${slug}`)}`
 
   const { mutate: joinOrganization, isLoading: isJoining } =
@@ -47,57 +56,89 @@ export const OrganizationInvite = () => {
   }
 
   return (
-    <Loading active={profile !== undefined && isLoading}>
-      <div className="flex flex-col gap-2 px-6 py-8">
-        <p className="text-sm text-foreground">You have been invited to join </p>
-        <p className="text-3xl text-foreground">{organizationName}</p>
-        {isSuccess && slug && (
-          <p className="text-xs text-foreground-lighter">{`organization slug: ${slug}`}</p>
-        )}
-      </div>
-
-      <div className={cn('border-t border-muted', hasError ? 'bg-alternative' : 'bg-transparent')}>
-        {profile === undefined && (
-          <div className="flex flex-col gap-3 py-4">
-            <p className="text-xs text-foreground-lighter">
-              You will need to sign in to accept this invitation
+    <div
+      className={cn(
+        'mx-auto overflow-hidden rounded-md border',
+        'border-muted bg-alternative text-center shadow',
+        'md:w-[400px]'
+      )}
+    >
+      {isLoadingInvitation ? (
+        <div className="p-5">
+          <GenericSkeletonLoader />
+        </div>
+      ) : inviteIsNoLongerValid ? (
+        <>
+          <Admonition
+            type="default"
+            title="Invalid invitation"
+            description="This organization invite is no longer valid as it has either been accepted or declined"
+            className="mb-0 border-0 rounded-none text-left"
+          />
+          <div className="p-4 border-muted border-t">
+            <Button type="default" asChild>
+              <Link href="/">Back to dashboard</Link>
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col gap-y-1 px-6 py-6">
+            <p className="text-sm text-foreground-light">You have been invited to join </p>
+            <p className={cn('text-foreground', !!profile ? 'text-2xl' : 'text-3xl')}>
+              {organizationName}
             </p>
-            <div className="flex justify-center gap-3">
-              <Button asChild type="default">
-                <Link href={loginRedirectLink}>Sign in</Link>
-              </Button>
-              <Button asChild type="default">
-                <Link href={loginRedirectLink}>Create an account</Link>
-              </Button>
-            </div>
+            {isSuccessInvitation && (
+              <p className="text-xs text-foreground-lighter">{`Organization slug: ${slug}`}</p>
+            )}
           </div>
-        )}
-        <div className={cn('flex flex-col gap-4', !isLoading && !hasError && 'px-6 py-4')}>
-          {hasError && !isNotSignedInError && (
-            <OrganizationInviteError
-              data={data}
-              error={error as unknown as ResponseError}
-              isError={isError}
-            />
-          )}
-          {isSuccess && !hasError && (
-            <div className="flex flex-row items-center justify-center gap-3">
-              <Button type="default" disabled={isJoining} asChild>
-                <Link href="/projects">Decline</Link>
-              </Button>
-              <Button
-                type="primary"
-                loading={isJoining}
-                disabled={isJoining}
-                onClick={handleJoinOrganization}
-                icon={<CheckSquare />}
-              >
-                Join organization
-              </Button>
+          <div
+            className={cn('border-t border-muted', hasError ? 'bg-alternative' : 'bg-transparent')}
+          >
+            {profile === undefined && (
+              <div className="flex flex-col gap-y-4 p-4">
+                <p className="text-sm text-foreground">
+                  Sign in or create an account first to view this invitation
+                </p>
+                <div className="flex justify-center gap-3">
+                  <Button asChild type="default">
+                    <Link href={loginRedirectLink}>Sign in</Link>
+                  </Button>
+                  <Button asChild type="default">
+                    <Link href={loginRedirectLink}>Create an account</Link>
+                  </Button>
+                </div>
+              </div>
+            )}
+            <div
+              className={cn(
+                'flex flex-col gap-4',
+                !isLoadingInvitation && !hasError && 'px-6 py-4'
+              )}
+            >
+              {!!profile && hasError && (
+                <OrganizationInviteError data={data} error={error} isError={isErrorInvitation} />
+              )}
+              {isSuccessInvitation && !hasError && (
+                <div className="flex flex-row items-center justify-center gap-3">
+                  <Button type="default" disabled={isJoining} asChild>
+                    <Link href="/projects">Decline</Link>
+                  </Button>
+                  <Button
+                    type="primary"
+                    loading={isJoining}
+                    disabled={isJoining}
+                    onClick={handleJoinOrganization}
+                    icon={<CheckSquare />}
+                  >
+                    Join organization
+                  </Button>
+                </div>
+              )}
             </div>
-          )}
-        </div>
-      </div>
-    </Loading>
+          </div>
+        </>
+      )}
+    </div>
   )
 }
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
index 32d5bc01de2ed..0e4907cd7fd48 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
@@ -9,7 +9,7 @@ import { cn } from 'ui'
 
 interface OrganizationInviteError {
   data?: OrganizationInviteByToken
-  error?: ResponseError
+  error?: ResponseError | null
   isError: boolean
 }
 
diff --git a/apps/studio/components/ui/ActionCard.tsx b/apps/studio/components/ui/ActionCard.tsx
index 549e51a2ad706..401112986a1d2 100644
--- a/apps/studio/components/ui/ActionCard.tsx
+++ b/apps/studio/components/ui/ActionCard.tsx
@@ -29,8 +29,10 @@ export const ActionCard = (card: {
         >
           {card.icon}
         </div>
-        <div className="flex flex-col gap-0 w-full">
-          <h3 className="text-sm text-foreground mb-0">{card.title}</h3>
+        <div className="flex-grow flex flex-col gap-0 min-w-0">
+          <h3 title={card.title} className="text-sm text-foreground mb-0 truncate max-w-full">
+            {card.title}
+          </h3>
           {typeof card.description === 'string' ? (
             <pre className="text-xs text-foreground-light font-sans">{card.description}</pre>
           ) : (
diff --git a/apps/studio/pages/join.tsx b/apps/studio/pages/join.tsx
index 58f63aa217ca0..75823e77d9d4f 100644
--- a/apps/studio/pages/join.tsx
+++ b/apps/studio/pages/join.tsx
@@ -1,39 +1,48 @@
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 
 import { OrganizationInvite } from 'components/interfaces/OrganizationInvite/OrganizationInvite'
+import { BASE_PATH } from 'lib/constants'
+import { useTheme } from 'next-themes'
+import { useEffect, useMemo, useState } from 'react'
 import { NextPageWithLayout } from 'types'
 import { cn } from 'ui'
 
 const JoinOrganizationPage: NextPageWithLayout = () => {
-  const router = useRouter()
+  const { resolvedTheme } = useTheme()
+  const isDarkMode = resolvedTheme?.includes('dark')
+
+  const [mounted, setMounted] = useState(false)
+
+  const imgUrl = useMemo(
+    () =>
+      isDarkMode ? `${BASE_PATH}/img/supabase-dark.svg` : `${BASE_PATH}/img/supabase-light.svg`,
+    [isDarkMode]
+  )
+
+  useEffect(() => setMounted(true), [])
 
   return (
-    <div
-      className={cn(
-        'flex h-full min-h-screen bg-studio',
-        'w-full flex-col place-items-center',
-        'items-center justify-center gap-8 px-5'
-      )}
-    >
+    <>
       <Link href="/projects" className="flex items-center justify-center gap-4">
-        <img
-          src={`${router.basePath}/img/supabase-logo.svg`}
-          alt="Supabase"
-          className="block h-[24px] cursor-pointer rounded"
-        />
-      </Link>
-      <div
-        className={cn(
-          'mx-auto overflow-hidden rounded-md border',
-          'border-muted bg-alternative text-center shadow',
-          'md:w-[400px]'
+        {mounted && (
+          <img src={imgUrl} alt="Supabase" className="block h-[24px] cursor-pointer rounded" />
         )}
-      >
-        <OrganizationInvite />
-      </div>
-    </div>
+      </Link>
+      <OrganizationInvite />
+    </>
   )
 }
 
+JoinOrganizationPage.getLayout = (page) => (
+  <div
+    className={cn(
+      'flex h-full min-h-screen bg-studio',
+      'w-full flex-col place-items-center',
+      'items-center justify-center gap-8 px-5'
+    )}
+  >
+    {page}
+  </div>
+)
+
 export default JoinOrganizationPage
diff --git a/apps/studio/public/img/getting-started/declarative-schemas.png b/apps/studio/public/img/getting-started/declarative-schemas.png
new file mode 100644
index 0000000000000..431873fb90ae3
Binary files /dev/null and b/apps/studio/public/img/getting-started/declarative-schemas.png differ
diff --git a/apps/studio/public/img/getting-started/sample.png b/apps/studio/public/img/getting-started/sample.png
new file mode 100644
index 0000000000000..ff22f119687c3
Binary files /dev/null and b/apps/studio/public/img/getting-started/sample.png differ
diff --git a/packages/ui/src/components/shadcn/ui/toggle.tsx b/packages/ui/src/components/shadcn/ui/toggle.tsx
index a74a089e6c34f..c60fd746f1c06 100644
--- a/packages/ui/src/components/shadcn/ui/toggle.tsx
+++ b/packages/ui/src/components/shadcn/ui/toggle.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { cn } from '../../../lib/utils/cn'
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:bg-surface-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto text-foreground transition-all',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-foreground-light data-[state=on]:bg-accent data-[state=on]:bg-surface-300 data-[state=on]:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto transition-all',
   {
     variants: {
       variant: {