diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/FrameworkSelector.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/FrameworkSelector.tsx
new file mode 100644
index 0000000000000..5be91506db440
--- /dev/null
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/FrameworkSelector.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import {
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+  cn,
+} from 'ui'
+import { Box, Check, ChevronDown } from 'lucide-react'
+import { ConnectionType } from 'components/interfaces/Connect/Connect.constants'
+import { ConnectionIcon } from 'components/interfaces/Connect/ConnectionIcon'
+
+interface FrameworkSelectorProps {
+  value: string
+  onChange: (value: string) => void
+  items: ConnectionType[]
+  className?: string
+}
+
+export const FrameworkSelector = ({
+  value,
+  onChange,
+  items,
+  className,
+}: FrameworkSelectorProps) => {
+  const [open, setOpen] = useState(false)
+
+  const selectedItem = items.find((item) => item.key === value)
+
+  function handleSelect(key: string) {
+    onChange(key)
+    setOpen(false)
+  }
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+      <div className={cn('flex', className)}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            size="tiny"
+            type="default"
+            className="gap-0 rounded-l-none"
+            iconRight={<ChevronDown strokeWidth={1.5} />}
+          >
+            <div className="flex items-center gap-2">
+              {selectedItem?.icon ? <ConnectionIcon icon={selectedItem.icon} /> : <Box size={12} />}
+              {selectedItem?.label}
+            </div>
+          </Button>
+        </PopoverTrigger_Shadcn_>
+      </div>
+      <PopoverContent_Shadcn_ className="p-0 max-w-48" side="bottom" align="start">
+        <Command_Shadcn_>
+          <CommandInput_Shadcn_ placeholder="Search..." />
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              {items.map((item) => (
+                <CommandItem_Shadcn_
+                  key={item.key}
+                  value={item.key}
+                  onSelect={() => handleSelect(item.key)}
+                  className="flex gap-2 items-center"
+                >
+                  {item.icon ? <ConnectionIcon icon={item.icon} /> : <Box size={12} />}
+                  {item.label}
+                  <Check
+                    size={15}
+                    className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
+                  />
+                </CommandItem_Shadcn_>
+              ))}
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
+        </Command_Shadcn_>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
new file mode 100644
index 0000000000000..7763014676ab1
--- /dev/null
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
@@ -0,0 +1,68 @@
+import Link from 'next/link'
+import { cn, Button, Card, CardContent, CardHeader, CardTitle, Badge } from 'ui'
+import { Row } from 'ui-patterns'
+import { GettingStartedStep } from './GettingStartedSection'
+
+export interface GettingStartedProps {
+  steps: GettingStartedStep[]
+}
+
+export function GettingStarted({ steps }: GettingStartedProps) {
+  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>
+            </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) => {
+                if (action.component) {
+                  return <div key={`${step.key}-action-${i}`}>{action.component}</div>
+                }
+                if (action.href) {
+                  return (
+                    <Button
+                      asChild
+                      key={`${step.key}-action-${i}`}
+                      type={action.variant ?? 'default'}
+                      icon={action.icon}
+                      className="text-foreground-light hover:text-foreground"
+                    >
+                      <Link href={action.href}>{action.label}</Link>
+                    </Button>
+                  )
+                }
+                return (
+                  <Button
+                    key={`${step.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>
+  )
+}
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
new file mode 100644
index 0000000000000..9d91f50447d79
--- /dev/null
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
@@ -0,0 +1,560 @@
+import { useParams } from 'common'
+import { useTablesQuery } from 'data/tables/tables-query'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { GettingStarted } from './GettingStarted'
+import {
+  Code,
+  Database,
+  Table,
+  User,
+  Upload,
+  UserPlus,
+  BarChart3,
+  Shield,
+  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,
+  Button,
+  Card,
+  CardContent,
+  CodeBlock,
+  ToggleGroup,
+  ToggleGroupItem,
+} from 'ui'
+import { BASE_PATH } from 'lib/constants'
+
+export type GettingStartedAction = {
+  label: string
+  href?: string
+  onClick?: () => void
+  variant?: React.ComponentProps<typeof Button>['type']
+  icon?: React.ReactNode
+  component?: React.ReactNode
+}
+
+export type GettingStartedStep = {
+  key: string
+  status: 'complete' | 'incomplete'
+  icon?: React.ReactNode
+  title: string
+  description: string
+  image?: React.ReactNode
+  actions: GettingStartedAction[]
+}
+
+export type GettingStartedState = 'empty' | 'code' | 'no-code' | 'hidden'
+
+export function GettingStartedSection({
+  value,
+  onChange,
+}: {
+  value: GettingStartedState
+  onChange: (v: GettingStartedState) => void
+}) {
+  const { data: project } = useSelectedProjectQuery()
+  const { ref } = useParams()
+  const aiSnap = useAiAssistantStateSnapshot()
+  const router = useRouter()
+
+  // Local state for framework selector preview
+  const [selectedFramework, setSelectedFramework] = useState<string>(FRAMEWORKS[0]?.key ?? 'nextjs')
+  const workflow: 'no-code' | 'code' | null = value === 'code' || value === 'no-code' ? value : null
+
+  const { data: tablesData } = useTablesQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+    schema: 'public',
+  })
+
+  const tablesCount = Math.max(0, tablesData?.length ?? 0)
+  const { data: branchesData } = useBranchesQuery({
+    projectRef: project?.parent_project_ref ?? project?.ref,
+  })
+  const isDefaultProject = project?.parent_project_ref === undefined
+  const hasNonDefaultBranch =
+    (branchesData ?? []).some((b) => !b.is_default) || isDefaultProject === false
+
+  // Helpers
+  const openAiChat = useCallback(
+    (name: string, initialInput: string) => aiSnap.newChat({ name, open: true, initialInput }),
+    [aiSnap]
+  )
+
+  const openConnect = useCallback(() => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          showConnect: true,
+          connectTab: 'frameworks',
+          framework: selectedFramework,
+        },
+      },
+      undefined,
+      { shallow: true }
+    )
+  }, [router, selectedFramework])
+
+  const connectActions: GettingStartedAction[] = useMemo(
+    () => [
+      {
+        label: 'Framework selector',
+        component: (
+          <FrameworkSelector
+            value={selectedFramework}
+            onChange={setSelectedFramework}
+            items={FRAMEWORKS}
+          />
+        ),
+      },
+      {
+        label: 'Connect',
+        variant: 'default',
+        onClick: openConnect,
+      },
+    ],
+    [openConnect, selectedFramework]
+  )
+
+  const codeSteps: GettingStartedStep[] = useMemo(
+    () => [
+      {
+        key: 'install-cli',
+        status: 'incomplete',
+        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.',
+        actions: [
+          {
+            label: 'Install via npm',
+            component: (
+              <CodeBlock className="w-full text-xs p-3 !bg" language="bash">
+                npm install supabase --save-dev
+              </CodeBlock>
+            ),
+          },
+        ],
+      },
+      {
+        key: 'design-db',
+        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.',
+        actions: [
+          {
+            label: 'Create schema file',
+            href: 'https://supabase.com/docs/guides/local-development/declarative-database-schemas',
+            variant: 'default',
+          },
+          {
+            label: 'Generate it',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Design my database',
+                'Help me create a schema file for my database. We will be using Supabase declarative schemas which you can learn about by searching docs for declarative schema.'
+              ),
+          },
+        ],
+      },
+      {
+        key: 'add-data',
+        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.',
+        actions: [
+          {
+            label: 'Create a seed file',
+            href: 'https://supabase.com/docs/guides/local-development/seeding-your-database',
+            variant: 'default',
+          },
+          {
+            label: 'Generate data',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Generate seed data',
+                'Generate SQL INSERT statements for realistic seed data that I can run via the Supabase CLI.'
+              ),
+          },
+        ],
+      },
+      {
+        key: 'add-rls-policies',
+        status: 'incomplete',
+        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.",
+        actions: [
+          {
+            label: 'Create a migration file',
+            href: `/project/${ref}/auth/policies`,
+            variant: 'default',
+          },
+          {
+            label: 'Create policies for me',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Generate RLS policies',
+                'Generate RLS policies for my existing tables in the public schema and guide me through the process of adding them as migration files to my codebase '
+              ),
+          },
+        ],
+      },
+      {
+        key: 'setup-auth',
+        status: 'incomplete',
+        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.",
+        actions: [
+          { label: 'Configure', href: `/project/${ref}/auth/providers`, variant: 'default' },
+        ],
+      },
+      {
+        key: 'connect-app',
+        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.',
+        actions: connectActions,
+      },
+      {
+        key: 'signup-first-user',
+        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.',
+        actions: [
+          {
+            label: 'Read docs',
+            href: 'https://supabase.com/docs/guides/auth',
+            variant: 'default',
+          },
+        ],
+      },
+      {
+        key: 'upload-file',
+        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.',
+        actions: [
+          { label: 'Buckets', href: `/project/${ref}/storage/buckets`, variant: 'default' },
+        ],
+      },
+      {
+        key: 'create-edge-function',
+        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.',
+        actions: [
+          {
+            label: 'Create a function',
+            href: `/project/${ref}/functions/new`,
+            variant: 'default',
+          },
+          { label: 'View functions', href: `/project/${ref}/functions`, variant: 'default' },
+        ],
+      },
+      {
+        key: 'monitor-progress',
+        status: 'incomplete',
+        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.",
+        actions: [{ label: 'Reports', href: `/project/${ref}/reports`, variant: 'default' }],
+      },
+      {
+        key: 'create-first-branch',
+        status: hasNonDefaultBranch ? 'complete' : 'incomplete',
+        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.',
+        actions: [
+          {
+            label: 'Connect to GitHub',
+            href: `/project/${ref}/settings/integrations`,
+            variant: 'default',
+          },
+        ],
+      },
+    ],
+    [tablesCount, ref, openAiChat, connectActions, hasNonDefaultBranch]
+  )
+
+  const noCodeSteps: GettingStartedStep[] = useMemo(
+    () => [
+      {
+        key: 'design-db',
+        status: tablesCount > 0 ? 'complete' : 'incomplete',
+        title: 'Create your first table',
+        icon: <Database strokeWidth={1} className="text-foreground-muted" size={16} />,
+        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.",
+        actions: [
+          { label: 'Create a table', href: `/project/${ref}/editor`, variant: 'default' },
+          {
+            label: 'Do it for me',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Design my database',
+                'I want to design my database schema. Please propose tables, relationships, and SQL to create them for my app. Ask clarifying questions if needed.'
+              ),
+          },
+        ],
+      },
+      {
+        key: 'add-data',
+        status: 'incomplete',
+        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.",
+        actions: [
+          { label: 'Add data', href: `/project/${ref}/editor`, variant: 'default' },
+          {
+            label: 'Do it for me',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Generate sample data',
+                'Generate SQL INSERT statements to add realistic sample data to my existing tables. Use safe defaults and avoid overwriting data.'
+              ),
+          },
+        ],
+      },
+      {
+        key: 'add-rls-policies',
+        status: 'incomplete',
+        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.",
+        actions: [
+          {
+            label: 'Create a policy',
+            href: `/project/${ref}/auth/policies`,
+            variant: 'default',
+          },
+          {
+            label: 'Do it for me',
+            variant: 'default',
+            icon: <AiIconAnimation size={14} />,
+            onClick: () =>
+              openAiChat(
+                'Generate RLS policies',
+                'Generate RLS policies for my existing tables in the public schema. '
+              ),
+          },
+        ],
+      },
+      {
+        key: 'setup-auth',
+        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.",
+        actions: [
+          {
+            label: 'Configure auth',
+            href: `/project/${ref}/auth/providers`,
+            variant: 'default',
+          },
+        ],
+      },
+      {
+        key: 'connect-app',
+        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.",
+        actions: connectActions,
+      },
+      {
+        key: 'signup-first-user',
+        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.',
+        actions: [
+          {
+            label: 'Read docs',
+            href: 'https://supabase.com/docs/guides/auth',
+            variant: 'default',
+          },
+        ],
+      },
+      {
+        key: 'upload-file',
+        status: 'incomplete',
+        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.",
+        actions: [
+          { label: 'Buckets', href: `/project/${ref}/storage/buckets`, variant: 'default' },
+        ],
+      },
+      {
+        key: 'create-edge-function',
+        status: 'incomplete',
+        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.",
+        actions: [
+          {
+            label: 'Create a function',
+            href: `/project/${ref}/functions/new`,
+            variant: 'default',
+          },
+        ],
+      },
+      {
+        key: 'monitor-progress',
+        status: 'incomplete',
+        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.",
+        actions: [
+          { label: 'Create a report', href: `/project/${ref}/reports`, variant: 'default' },
+        ],
+      },
+      {
+        key: 'create-first-branch',
+        status: hasNonDefaultBranch ? 'complete' : 'incomplete',
+        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.',
+        actions: [
+          { label: 'Create a branch', href: `/project/${ref}/branches`, variant: 'default' },
+        ],
+      },
+    ],
+    [tablesCount, ref, openAiChat, connectActions, hasNonDefaultBranch]
+  )
+
+  const steps = workflow === 'code' ? codeSteps : workflow === 'no-code' ? noCodeSteps : []
+
+  return (
+    <section className="w-full">
+      <div className="flex justify-between items-center mb-6">
+        <h3 className="heading-section">Getting started</h3>
+        <div className="flex items-center gap-2">
+          <ToggleGroup
+            type="single"
+            value={workflow ?? undefined}
+            onValueChange={(v) => v && onChange(v as 'no-code' | 'code')}
+          >
+            <ToggleGroupItem
+              value="no-code"
+              aria-label="No-code workflow"
+              className="w-[26px] h-[26px] p-0"
+            >
+              <Table2 size={16} strokeWidth={1.5} className="text-foreground" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="code"
+              aria-label="Code workflow"
+              className="w-[26px] h-[26px] p-0"
+            >
+              <Code size={16} strokeWidth={1.5} className="text-foreground" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+          <Button size="tiny" type="outline" onClick={() => onChange('hidden')}>
+            Dismiss
+          </Button>
+        </div>
+      </div>
+
+      {steps.length === 0 ? (
+        <Card className="bg-background/25 border-dashed relative">
+          <div className="absolute -inset-16 z-0 opacity-50">
+            <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"
+            />
+            <img
+              src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
+              alt="Supabase Grafana"
+              className="w-full h-full object-cover object-right dark:hidden"
+            />
+            <div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
+          </div>
+          <CardContent className="relative z-10 p-8 md:p-12 grid lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="heading-subSection mb-0 heading-meta text-foreground-light mb-4">
+                Choose a preferred workflow
+              </h2>
+              <p className="text-foreground">
+                With Supabase, you have the flexibility to adopt a workflow that works for you. You
+                can do everything via the dashboard, or manage your entire project within your own
+                codebase.
+              </p>
+            </div>
+            <div className="flex items-stretch gap-4">
+              <Button
+                size="medium"
+                type="outline"
+                onClick={() => onChange('no-code')}
+                className="block gap-2 h-auto p-4 md:p-8 max-w-80 text-left justify-start bg-background "
+              >
+                <Table2 size={20} strokeWidth={1.5} className="text-brand" />
+                <div className="mt-4">
+                  <div>No-code</div>
+                  <div className="text-foreground-light w-full whitespace-normal">
+                    Ideal for prototyping or getting your project up and running
+                  </div>
+                </div>
+              </Button>
+              <Button
+                size="medium"
+                type="outline"
+                onClick={() => onChange('code')}
+                className="bg-background block gap-2 h-auto p-4 md:p-8 max-w-80 text-left justify-start"
+              >
+                <Code size={20} strokeWidth={1.5} className="text-brand" />
+                <div className="mt-4">
+                  <div>Code</div>
+                  <div className="text-foreground-light whitespace-normal">
+                    Ideal for teams that want full control of their project
+                  </div>
+                </div>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <GettingStarted steps={steps} />
+      )}
+    </section>
+  )
+}
diff --git a/apps/studio/components/interfaces/HomeNew/Home.tsx b/apps/studio/components/interfaces/HomeNew/Home.tsx
index d2cc0c2908719..fc8e75fa97cfc 100644
--- a/apps/studio/components/interfaces/HomeNew/Home.tsx
+++ b/apps/studio/components/interfaces/HomeNew/Home.tsx
@@ -17,6 +17,10 @@ import {
 import { PROJECT_STATUS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { AdvisorSection } from './AdvisorSection'
+import {
+  GettingStartedSection,
+  type GettingStartedState,
+} from './GettingStarted/GettingStartedSection'
 
 export const HomeV2 = () => {
   const { ref, enableBranching } = useParams()
@@ -49,7 +53,7 @@ export const HomeV2 = () => {
     ['getting-started', 'usage', 'advisor', 'custom-report']
   )
 
-  const [gettingStartedState] = useLocalStorage<'empty' | 'code' | 'no-code' | 'hidden'>(
+  const [gettingStartedState, setGettingStartedState] = useLocalStorage<GettingStartedState>(
     `home-getting-started-${project?.ref || 'default'}`,
     'empty'
   )
@@ -102,6 +106,16 @@ export const HomeV2 = () => {
                 strategy={verticalListSortingStrategy}
               >
                 {sectionOrder.map((id) => {
+                  if (id === 'getting-started') {
+                    return gettingStartedState === 'hidden' ? null : (
+                      <SortableSection key={id} id={id}>
+                        <GettingStartedSection
+                          value={gettingStartedState}
+                          onChange={setGettingStartedState}
+                        />
+                      </SortableSection>
+                    )
+                  }
                   if (id === 'advisor') {
                     return (
                       <SortableSection key={id} id={id}>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
index 2490a348133c8..9f2e2c492d5b7 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
@@ -33,30 +33,34 @@ const cronJobColumns = [
     minWidth: 200,
     value: (row: CronJobRun) => (
       <div className="flex items-center gap-1.5">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="text-xs cursor-pointer truncate max-w-[300px]">
-              {row.return_message}
-            </span>
-          </TooltipTrigger>
-          <TooltipContent
-            side="bottom"
-            align="start"
-            className="min-w-[200px] max-w-[300px] text-wrap p-0"
-          >
-            <p className="text-xs font-mono px-2 py-1 border-b bg-surface-100">Message</p>
-            <CodeBlock
-              hideLineNumbers
-              language="sql"
-              value={row.return_message.trim()}
-              className={cn(
-                'py-0 px-3.5 max-w-full prose dark:prose-dark border-0 rounded-t-none',
-                '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap min-h-11',
-                '[&>code]:text-xs'
-              )}
-            />
-          </TooltipContent>
-        </Tooltip>
+        {row.return_message ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-xs cursor-pointer truncate max-w-[300px]">
+                {row.return_message}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent
+              side="bottom"
+              align="start"
+              className="min-w-[200px] max-w-[300px] text-wrap p-0"
+            >
+              <p className="text-xs font-mono px-2 py-1 border-b bg-surface-100">Message</p>
+              <CodeBlock
+                hideLineNumbers
+                language="sql"
+                value={row.return_message.trim()}
+                className={cn(
+                  'py-0 px-3.5 max-w-full prose dark:prose-dark border-0 rounded-t-none',
+                  '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap min-h-11',
+                  '[&>code]:text-xs'
+                )}
+              />
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span>-</span>
+        )}
       </div>
     ),
   },
@@ -78,7 +82,9 @@ const cronJobColumns = [
     name: 'End Time',
     minWidth: 120,
     value: (row: CronJobRun) => (
-      <div className="text-xs">{row.status === 'succeeded' ? formatDate(row.end_time) : '-'}</div>
+      <div className="flex items-center text-xs">
+        {row.end_time ? formatDate(row.end_time) : '-'}
+      </div>
     ),
   },
 
@@ -89,7 +95,7 @@ const cronJobColumns = [
     value: (row: CronJobRun) => (
       <div className="flex items-center">
         <span className="text-xs">
-          {row.status === 'succeeded' ? calculateDuration(row.start_time, row.end_time) : ''}
+          {row.start_time && row.end_time ? calculateDuration(row.start_time, row.end_time) : ''}
         </span>
       </div>
     ),
@@ -119,16 +125,19 @@ const columns = cronJobColumns.map((col) => {
       const value = col.value(props.row)
 
       if (['start_time', 'end_time'].includes(col.id)) {
-        const formattedValue = dayjs((props.row as any)[(col as any).id]).valueOf()
-        return (
-          <div className="flex items-center">
-            <TimestampInfo
-              utcTimestamp={formattedValue}
-              labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
-              className="text-xs"
-            />
-          </div>
-        )
+        const rawValue = (props.row as any)[(col as any).id]
+        if (rawValue) {
+          const formattedValue = dayjs(rawValue).valueOf()
+          return (
+            <div className="flex items-center">
+              <TimestampInfo
+                utcTimestamp={formattedValue}
+                labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
+                className="text-xs"
+              />
+            </div>
+          )
+        }
       }
 
       return value
diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
index d7fb6aee2af0f..1556bb1a0faa7 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
@@ -20,9 +20,9 @@ export type CronJobRun = {
   command: string
   // statuses https://github.com/citusdata/pg_cron/blob/f5d111117ddc0f4d83a1bad34d61b857681b6720/include/job_metadata.h#L20
   status: 'starting' | 'running' | 'sending' | 'connecting' | 'succeeded' | 'failed'
-  return_message: string
+  return_message: string | null
   start_time: string
-  end_time: string
+  end_time: string | null
 }
 
 export const CRON_JOB_RUNS_PAGE_SIZE = 30