diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2ea2eeb79f..bac7ccf34e 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -10,6 +10,8 @@
 
     export let isOpen = false;
     export let showSideNavigation = false;
+    export let showHeader = true;
+    export let showFooter = true;
 
     let y: number;
 
@@ -59,16 +61,18 @@
     {#if $activeHeaderAlert?.show}
         <svelte:component this={$activeHeaderAlert.component} />
     {/if}
-    <header class="main-header u-padding-inline-end-0">
-        <button
-            class:u-hide={!showSideNavigation}
-            class="icon-button is-not-desktop"
-            aria-label="Open Menu"
-            on:click={toggleMenu}>
-            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
-        </button>
-        <slot name="header" />
-    </header>
+    {#if showHeader}
+        <header class="main-header u-padding-inline-end-0">
+            <button
+                class:u-hide={!showSideNavigation}
+                class="icon-button is-not-desktop"
+                aria-label="Open Menu"
+                on:click={toggleMenu}>
+                <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
+            </button>
+            <slot name="header" />
+        </header>
+    {/if}
     {#if showSideNavigation}
         <nav class="main-side">
             <slot name="side" />
@@ -80,7 +84,9 @@
         {/if}
 
         <slot />
-        <slot name="footer" />
+        {#if showFooter}
+            <slot name="footer" />
+        {/if}
     </section>
 </main>
 
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index c0ba2b3436..e892268aea 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -319,7 +319,9 @@
         !$page?.params.organization &&
         !$page.url.pathname.includes('/console/account') &&
         !$page.url.pathname.includes('/console/card') &&
-        !$page.url.pathname.includes('/console/onboarding')}>
+        !$page.url.pathname.includes('/console/onboarding')}
+    showHeader={!$page.url.pathname.includes('/console/onboarding')}
+    showFooter={!$page.url.pathname.includes('/console/onboarding')}>
     <Header slot="header" />
     <SideNavigation slot="side" bind:isOpen />
     <slot />
diff --git a/src/routes/(console)/onboarding/+layout.svelte b/src/routes/(console)/onboarding/+layout.svelte
deleted file mode 100644
index 3fad2e9ed2..0000000000
--- a/src/routes/(console)/onboarding/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<svelte:head>
-    <title>Onboarding - Appwrite</title>
-</svelte:head>
-
-<slot />
diff --git a/src/routes/(console)/onboarding/+layout.ts b/src/routes/(console)/onboarding/+layout.ts
deleted file mode 100644
index e0a2cb5e52..0000000000
--- a/src/routes/(console)/onboarding/+layout.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Header from './header.svelte';
-import type { LayoutLoad } from './$types';
-
-export const load: LayoutLoad = async () => {
-    return {
-        header: Header
-    };
-};
diff --git a/src/routes/(console)/onboarding/+page.svelte b/src/routes/(console)/onboarding/+page.svelte
index e714c1a5a8..79e60240a7 100644
--- a/src/routes/(console)/onboarding/+page.svelte
+++ b/src/routes/(console)/onboarding/+page.svelte
@@ -107,7 +107,7 @@
 
 <Container overlapCover size="large">
     <Card>
-        <Heading size="4" tag="h2">Create a new organization</Heading>
+        <Heading size="4" tag="h2">Create a new organization!</Heading>
         <Form onSubmit={handleSubmit}>
             <FormList gap={16}>
                 <InputText
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
new file mode 100644
index 0000000000..ab02fcacac
--- /dev/null
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+    import { Card, Layout, Typography, Input, Tag, Icon, Button } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
+    import { CustomId } from '$lib/components/index.js';
+    import type { RegionList } from '$lib/sdk/billing';
+    import { onMount } from 'svelte';
+    import { isCloud } from '$lib/system';
+    import { sdk } from '$lib/stores/sdk';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { Flag, ID, Region } from '@appwrite.io/console';
+    import Loading from './loading.svelte';
+    import { BillingPlan } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+
+    let showCustomId = false;
+    let isLoading = false;
+    let id: string;
+    let startAnimation = false;
+    let projectName = '';
+
+    let regions: RegionList;
+    onMount(async () => {
+        if (isCloud) {
+            regions = await sdk.forConsole.billing.listRegions();
+        }
+    });
+
+    function getFlagUrl(countryCode: string) {
+        if (!isValueOfStringEnum(Flag, countryCode)) return '';
+        return sdk.forProject.avatars.getFlag(countryCode, 22, 15, 100)?.toString();
+    }
+
+    async function createProject() {
+        isLoading = true;
+        //create new org
+        let org = await sdk.forConsole.billing.createOrganization(
+            ID.unique(),
+            'Personal Projects',
+            BillingPlan.FREE,
+            null,
+            null
+        );
+
+        const teamId = org.$id;
+        try {
+            const project = await sdk.forConsole.projects.create(
+                id ?? ID.unique(),
+                projectName,
+                teamId,
+                Region.Default
+            );
+            trackEvent(Submit.ProjectCreate, {
+                customId: !!id,
+                teamId
+            });
+
+            startAnimation = true;
+
+            setTimeout(() => {
+                goto(`${base}/project-${project.$id}`);
+            }, 3000);
+        } catch (e) {
+            // error = e.message;
+            trackError(e, Submit.ProjectCreate);
+            // disabled = false;
+        }
+    }
+</script>
+
+<div
+    class="page-container u-flex-vertical u-cross-child-center u-cross-center u-margin-block-start-96">
+    {#if isLoading}
+        <button
+            on:click={() => {
+                startAnimation = !startAnimation;
+            }}>toggle</button>
+        <Loading {startAnimation} />
+    {:else}
+        <img
+            src="/console/images/appwrite-logo-light.svg"
+            width="120"
+            height="22"
+            class="u-only-light"
+            alt="Appwrite Logo" />
+        <img
+            src="/console/images/appwrite-logo-dark.svg"
+            width="120"
+            height="22"
+            class="u-only-dark"
+            alt="Appwrite Logo" />
+        <Card.Base variant="primary"
+            ><Layout.Stack direction="column" gap="xxl">
+                <Typography.Title size="l">Create your project</Typography.Title>
+                <form>
+                    <Layout.Stack direction="column" gap="xl">
+                        <Layout.Stack direction="column" gap="s">
+                            <Input.Text
+                                label="Name"
+                                placeholder="Project name"
+                                bind:value={projectName} />
+                            {#if !showCustomId}
+                                <div>
+                                    <Tag
+                                        size="s"
+                                        on:click={() => {
+                                            showCustomId = true;
+                                        }}><Icon icon={IconPencil} /> Project ID</Tag>
+                                </div>
+                            {/if}
+                            <CustomId
+                                bind:show={showCustomId}
+                                name="Project"
+                                isProject
+                                bind:id
+                                fullWidth={true} />
+                        </Layout.Stack>
+                        {#if regions}
+                            <Input.Select
+                                placeholder="Select a region"
+                                options={regions.regions
+                                    .filter((region) => region.$id !== 'default')
+                                    .sort((regionA, regionB) => {
+                                        if (regionA.disabled && !regionB.disabled) {
+                                            return 1;
+                                        }
+                                        return regionA.name > regionB.name ? 1 : -1;
+                                    })
+                                    .map((region) => {
+                                        return {
+                                            label: region.name,
+                                            value: region.$id,
+                                            leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
+                                            disabled: region.disabled
+                                        };
+                                    })}
+                                label="Region" />
+                        {/if}
+                        <div class="u-flex u-main-end">
+                            <Button.Button
+                                type="button"
+                                variant="primary"
+                                size="m"
+                                on:click={createProject}>
+                                Create</Button.Button>
+                        </div>
+                    </Layout.Stack>
+                </form>
+            </Layout.Stack></Card.Base>
+    {/if}
+</div>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    .page-container {
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
+        min-height: 100vh;
+        gap: 4.5rem;
+        color: var(--color-fgcolor-neutral-primary, #2d2d31);
+
+        @media #{$break2open} {
+            width: 700px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte
new file mode 100644
index 0000000000..d11e9ad010
--- /dev/null
+++ b/src/routes/(console)/onboarding/create-project/loading.svelte
@@ -0,0 +1,393 @@
+<script>
+    import { Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+
+    export let startAnimation = false;
+</script>
+
+<div class="grid-container" class:start-animation={startAnimation}>
+    <div class="static-loader">
+        <Spinner />
+        <Typography.Title size="l">Creating your project</Typography.Title>
+        <span id="subtitle">Setting up 20 authentication methods...</span>
+    </div>
+    <div class="title-container">
+        <Typography.Title size="l">Welcome to Appwrite</Typography.Title>
+    </div>
+    <div class="grid">
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 1; " />
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 2; " />
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 3; " />
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 4; " />
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 5; " />
+        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 6; " />
+        <div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 7; " />
+        <div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 8; " />
+
+        <div class="border-bottom" style="grid-row-start: 1;" />
+        <div class="border-bottom" style="grid-row-start: 2;" />
+        <div class="border-bottom" style="grid-row-start: 3;" />
+        <div class="border-bottom" style="grid-row-start: 4;" />
+
+        <div class="vertical-fade-top" style="grid-row-start: 1; " />
+        <div class="vertical-fade-bottom" style="grid-row-start: 5; " />
+        <div class="horizontal-fade-left" style="grid-row: 1 / 6; grid-column-start: 1;" />
+        <div class="horizontal-fade-right" style="grid-row: 1 / 6; " />
+
+        <div class="icon icon1">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon1.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon2">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon2.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon3">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon3.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon4">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon4.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon5">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon5.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon6">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon7">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon8">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+
+        <div class="appwrite">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/appwrite.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .grid-container {
+        max-width: 100vw;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: var(--color-fgcolor-neutral-primary, #2d2d31);
+
+        --animation-type: ease-in-out;
+        --icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
+        --icon-move-to-center-animation-duration: 0.8s; // duration of icons merging together
+        --icons-fade-out-animation-duration: 0.25s; //duration of icons disappearing animation
+        --welcome-to-appwrite-animation-duration: 0.8s; //duration of fading in the welcome to appwrite text
+
+        --icon-move-to-center-delay: calc(
+            var(--icon-colorize-animation-duration) + 0.5s
+        ); //delay before the icons merging together is started
+        --icons-fade-out-delay: calc(
+            var(--icon-move-to-center-delay) + 0.4s
+        ); // delay before icons start disappearing
+        --final-icon-fade-out-delay: calc(
+            var(--icons-fade-out-delay) + 0.4s
+        ); //delay before the last icon start disappearing before the appwrite logo shows up
+        --appwrite-icon-fade-in-delay: calc(
+            var(--final-icon-fade-out-delay) - 0.1s
+        ); //delay before the appwrite logo appears
+        --welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 0.3s);
+
+        --cell-dimension: 65px;
+        --icon-width: 26px;
+        --border-radius-container: 17px;
+        --border-radius-content: 12px;
+
+        @media (min-width: 768px) {
+            --cell-dimension: 120px;
+            --icon-width: 48px;
+            --border-radius-container: 32px;
+            --border-radius-content: 22px;
+        }
+
+        --half-cell-dimension: calc(var(--cell-dimension) * 0.5);
+        --double-cell-dimension: calc(var(--cell-dimension) * 2);
+        --triple-cell-dimension: calc(var(--cell-dimension) * 3);
+        --quadriple-cell-dimension: calc(var(--cell-dimension) * 4);
+        --negative-cell-dimension: calc(var(--cell-dimension) * -1);
+        --negative-double-cell-dimension: calc(var(--cell-dimension) * -2);
+        --negative-triple-cell-dimension: calc(var(--cell-dimension) * -3);
+        --negative-quadriple-cell-dimension: calc(var(--cell-dimension) * -4);
+    }
+    .static-loader {
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        margin-bottom: 50px;
+        transition: opacity 0.5s var(--animation-type);
+    }
+    .start-animation .static-loader {
+        opacity: 0;
+    }
+    .title-container {
+        margin-bottom: -100px;
+        z-index: 1;
+        opacity: 0;
+    }
+    .start-animation .title-container {
+        opacity: 1;
+        transition: opacity var(--welcome-to-appwrite-animation-duration) var(--animation-type)
+            var(--welcome-to-appwrite-delay);
+    }
+    .grid {
+        display: grid;
+        grid-template-columns: var(--half-cell-dimension) repeat(5, var(--cell-dimension)) var(
+                --half-cell-dimension
+            );
+        grid-template-rows: 180px repeat(4, var(--cell-dimension));
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(9, var(--cell-dimension));
+            grid-template-rows: 180px repeat(4, var(--cell-dimension));
+        }
+    }
+
+    .icon {
+        transition: transform var(--icon-move-to-center-animation-duration) var(--animation-type)
+            var(--icon-move-to-center-delay);
+    }
+    .appwrite {
+        opacity: 0;
+        grid-row-start: 3;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 3;
+            grid-column-start: 5;
+        }
+    }
+
+    .border-right {
+        border-right: 1px solid #e4e4e7;
+    }
+    .border-bottom {
+        border-bottom: 1px solid #e4e4e7;
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+
+    .vertical-fade-top {
+        background: linear-gradient(to bottom, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+    .vertical-fade-bottom {
+        background: linear-gradient(to top, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
+    }
+    .horizontal-fade-left {
+        background: linear-gradient(to right, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+    }
+    .horizontal-fade-right {
+        background: linear-gradient(to left, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column-start: 7;
+        @media (min-width: 768px) {
+            grid-column-start: 9;
+        }
+    }
+
+    .icon-container {
+        width: calc(var(--cell-dimension) + 20px);
+        aspect-ratio: 1/1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: -10px;
+        margin-left: -10px;
+        border-radius: var(--border-radius-container);
+        border: 2.5px solid rgba(255, 255, 255, 0.08);
+        box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0.04);
+        opacity: 0.2;
+        transition:
+            opacity var(--icon-colorize-animation-duration) var(--animation-type),
+            box-shadow var(--icon-colorize-animation-duration) var(--animation-type);
+    }
+
+    .icon-content {
+        width: var(--cell-dimension);
+        aspect-ratio: 1/1;
+        border-radius: var(--border-radius-content);
+        border: 0.5px solid #ededf0;
+        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        filter: grayscale(1);
+        transition: filter var(--icon-colorize-animation-duration) var(--animation-type);
+
+        img {
+            width: var(--icon-width);
+        }
+    }
+
+    .start-animation .icon-container {
+        opacity: 1;
+        background: rgba(255, 255, 255, 0.5);
+    }
+
+    .start-animation .icon1 {
+        transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
+    }
+    .start-animation .icon2 {
+        transform: translateY(var(--cell-dimension)) translateX(0);
+    }
+    .start-animation .icon3 {
+        transform: translateY(var(--cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+    }
+    .start-animation .icon4 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--double-cell-dimension));
+    }
+    .start-animation .icon5 {
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
+    }
+    .start-animation .icon6 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--double-cell-dimension));
+    }
+
+    .start-animation .icon7 {
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
+    }
+    .start-animation .icon8 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+    }
+
+    .start-animation .icon:not(.icon8) .icon-container {
+        box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0);
+    }
+    .start-animation .icon:not(.icon8) .icon-content {
+        opacity: 0;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--icons-fade-out-delay);
+    }
+    .start-animation .icon8 .icon-content {
+        opacity: 0;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--final-icon-fade-out-delay);
+    }
+    .start-animation .appwrite {
+        opacity: 1;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--appwrite-icon-fade-in-delay);
+    }
+
+    .start-animation .icon-content {
+        filter: grayscale(0);
+    }
+
+    .icon1 {
+        grid-row-start: 2;
+        grid-column-start: 2;
+
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 3;
+        }
+    }
+
+    .icon2 {
+        grid-row-start: 2;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon3 {
+        grid-row-start: 2;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 7;
+        }
+    }
+
+    .icon4 {
+        grid-row-start: 4;
+        grid-column-start: 2;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 3;
+        }
+    }
+    .icon5 {
+        grid-row-start: 4;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon6 {
+        display: none;
+    }
+
+    .icon7 {
+        display: none;
+    }
+
+    .icon8 {
+        grid-row-start: 4;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 7;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/onboarding/header.svelte b/src/routes/(console)/onboarding/header.svelte
deleted file mode 100644
index 4bf595ce1c..0000000000
--- a/src/routes/(console)/onboarding/header.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { Heading } from '$lib/components';
-    import { Cover } from '$lib/layout';
-</script>
-
-<Cover size="large">
-    <div class="u-flex u-cross-center u-main-center u-width-full-line">
-        <Heading size="1" tag="h1" trimmed={false}>Welcome to Appwrite</Heading>
-    </div>
-</Cover>
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
index 3ca94e1956..1965449bf9 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
@@ -47,7 +47,7 @@
             if ($organizationList?.total > 1) {
                 await goto(`${base}/account/organizations`);
             } else {
-                await goto(`${base}/onboarding`);
+                await goto(`${base}/onboarding/create-project`);
             }
             await invalidate(Dependencies.ACCOUNT);
             await invalidate(Dependencies.ORGANIZATION);
diff --git a/src/routes/(console)/project-[project]/databases/create.svelte b/src/routes/(console)/project-[project]/databases/create.svelte
index 80b1bad00c..4dc4aa85e6 100644
--- a/src/routes/(console)/project-[project]/databases/create.svelte
+++ b/src/routes/(console)/project-[project]/databases/create.svelte
@@ -60,7 +60,7 @@
             cronExpression(policy);
 
             return sdk.forProject.backups.createPolicy(
-                policy.id,
+                ID.unique(),
                 ['databases'],
                 policy.retained,
                 policy.schedule,
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index 801dec03c3..a8837be156 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, Modal, PaginationWithLimit } from '$lib/components';
+    import { Modal, PaginationWithLimit } from '$lib/components';
     import { Container } from '$lib/layout';
     import ContainerHeader from './containerHeader.svelte';
     import BackupPolicy from './policy.svelte';
@@ -244,10 +244,6 @@
     onSubmit={createPolicies}
     bind:show={$showCreatePolicy}
     bind:error={policyCreateError}>
-    <Alert type="info">
-        Backups do not currently support backing up relationships between data
-    </Alert>
-
     <CreatePolicy bind:totalPolicies isShowing={$showCreatePolicy} isFromBackupsTab />
 
     <svelte:fragment slot="footer">
@@ -262,9 +258,7 @@
         changes or rollback safeguards.
         <b>Depending on the size of your data, this may take a while.</b>
     </p>
-    <Alert type="info"
-        >Backups do not currently support backing up relationships between data.
-    </Alert>
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => ($showCreateBackup = false)}>Cancel</Button>
         <Button submit>Create</Button>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
index 247ee2902e..a84cc32540 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
@@ -48,8 +48,11 @@
             Are you sure you want to delete <b>{$database.name}</b>?
         </p>
 
-        <p class="text" data-private>
-            <b>Once deleted, this database cannot be restored. This action is irreversible.</b>
+        <p class="text">
+            <b>
+                Once deleted, this database and its backups cannot be restored. This action is
+                irreversible.
+            </b>
         </p>
 
         <div class="input-check-box-friction">
diff --git a/src/routes/(console)/project-[project]/databases/table.svelte b/src/routes/(console)/project-[project]/databases/table.svelte
index 036059ffc4..1fc2a95a20 100644
--- a/src/routes/(console)/project-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/table.svelte
@@ -173,10 +173,11 @@
             {selected.length > 1 ? 'databases' : 'database'}?
         </p>
 
-        <p class="text" data-private>
-            <b
-                >Once deleted, {selected.length > 1 ? 'these databases' : 'this database'} cannot be
-                restored. This action is irreversible.</b>
+        <p class="text">
+            <b>
+                Once deleted, {selected.length > 1 ? 'these databases' : 'this database'} and its backups
+                cannot be restored. This action is irreversible.
+            </b>
         </p>
 
         <div class="input-check-box-friction">
diff --git a/src/routes/(console)/project-[project]/updateVariables.svelte b/src/routes/(console)/project-[project]/updateVariables.svelte
index d15029230d..f456454084 100644
--- a/src/routes/(console)/project-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[project]/updateVariables.svelte
@@ -196,9 +196,9 @@
         </p>
     {/if}
     <svelte:fragment slot="aside">
-        <div class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16">
+        <div class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16 u-flex-wrap">
             <ul class="buttons-list">
-                <li class="buttons-list-item">
+                <li class="buttons-list-item padding-start">
                     <Button text on:click={() => (showEditorModal = true)}>
                         <span class="icon-code" />
                         <span class="text">Editor</span>
@@ -240,7 +240,7 @@
                 {/if}
                 <Table noMargin noStyles>
                     <TableHeader>
-                        <TableCellHead width={180}>Key</TableCellHead>
+                        <TableCellHead width={100}>Key</TableCellHead>
                         <TableCellHead width={180}>Value</TableCellHead>
                         <TableCellHead width={40} />
                     </TableHeader>
@@ -375,3 +375,9 @@
         {variableList}
         bind:show={showVariablesUpload} />
 {/if}
+
+<style>
+    .padding-start {
+        margin-left: -1rem;
+    }
+</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 7b9cc7c700..e4c076bfcb 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -13,6 +13,6 @@ export const load: PageLoad = async ({ parent, url }) => {
             redirect(303, `${base}/organization-${teamId}${url.search}`);
         }
     } else {
-        redirect(303, `${base}/onboarding${url.search}`);
+        redirect(303, `${base}/onboarding/create-project${url.search}`);
     }
 };
diff --git a/static/images/onboarding/appwrite.svg b/static/images/onboarding/appwrite.svg
new file mode 100644
index 0000000000..130ff34452
--- /dev/null
+++ b/static/images/onboarding/appwrite.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#FD366E"/>
+    <path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#FD366E"/>
+</svg>
diff --git a/static/images/onboarding/icon1.svg b/static/images/onboarding/icon1.svg
new file mode 100644
index 0000000000..bc2ae791c9
--- /dev/null
+++ b/static/images/onboarding/icon1.svg
@@ -0,0 +1,120 @@
+<svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_6759_39933)">
+        <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M21.8188 25.3225C24.61 23.8758 26.5142 20.9846 26.5142 17.6538C26.5142 12.8745 22.5935 9 17.7571 9C12.9207 9 9 12.8745 9 17.6538C9 20.9661 10.8831 23.8438 13.6491 25.2984C13.3113 25.4172 12.9775 25.551 12.6486 25.6996C11.0471 26.4233 9.59192 27.484 8.36619 28.8212C7.14046 30.1583 6.16815 31.7458 5.50479 33.4929C4.84143 35.24 4.5 37.1125 4.5 39.0035H17.7H30.9C30.9 37.1125 30.5586 35.24 29.8952 33.4929C29.2318 31.7458 28.2595 30.1583 27.0338 28.8212C25.8081 27.484 24.3529 26.4233 22.7514 25.6996C22.4445 25.561 22.1335 25.4352 21.8188 25.3225Z"
+                fill="url(#paint0_linear_6759_39933)" />
+    </g>
+    <g filter="url(#filter1_bi_6759_39933)">
+        <mask id="path-2-inside-1_6759_39933" fill="white">
+            <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M34.7932 25.3005C37.271 23.7262 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6567 23.7519 25.1539 25.3225C25.0467 25.3675 24.94 25.414 24.8338 25.462C23.1959 26.2021 21.7076 27.2869 20.4541 28.6544C19.2005 30.022 18.2061 31.6455 17.5276 33.4323C16.8492 35.2191 16.5 37.1342 16.5 39.0682L30 39.0682H43.5C43.5 37.1342 43.1508 35.2191 42.4724 33.4323C41.7939 31.6455 40.7995 30.022 39.5459 28.6544C38.2924 27.2869 36.8041 26.2021 35.1662 25.462C35.0425 25.4061 34.9182 25.3522 34.7932 25.3005Z" />
+        </mask>
+        <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M34.7932 25.3005C37.271 23.7262 38.9122 20.9777 38.9122 17.8505C38.9122 12.9625 34.9024 9 29.9561 9C25.0098 9 21 12.9625 21 17.8505C21 20.9924 22.6567 23.7519 25.1539 25.3225C25.0467 25.3675 24.94 25.414 24.8338 25.462C23.1959 26.2021 21.7076 27.2869 20.4541 28.6544C19.2005 30.022 18.2061 31.6455 17.5276 33.4323C16.8492 35.2191 16.5 37.1342 16.5 39.0682L30 39.0682H43.5C43.5 37.1342 43.1508 35.2191 42.4724 33.4323C41.7939 31.6455 40.7995 30.022 39.5459 28.6544C38.2924 27.2869 36.8041 26.2021 35.1662 25.462C35.0425 25.4061 34.9182 25.3522 34.7932 25.3005Z"
+                fill="url(#paint1_linear_6759_39933)"
+                fill-opacity="0.64" />
+        <path
+                d="M34.7932 25.3005L34.686 25.1316L34.3613 25.338L34.7167 25.4852L34.7932 25.3005ZM25.1539 25.3225L25.2313 25.5069L25.5861 25.3581L25.2604 25.1532L25.1539 25.3225ZM24.8338 25.462L24.7514 25.2797L24.8338 25.462ZM20.4541 28.6544L20.3066 28.5193L20.4541 28.6544ZM17.5276 33.4323L17.3406 33.3613H17.3406L17.5276 33.4323ZM16.5 39.0682H16.3V39.2682H16.5L16.5 39.0682ZM30 39.0682L30 38.8682L30 39.0682ZM43.5 39.0682V39.2682H43.7V39.0682H43.5ZM42.4724 33.4323L42.2854 33.5033L42.4724 33.4323ZM39.5459 28.6544L39.6934 28.5193L39.5459 28.6544ZM35.1662 25.462L35.2486 25.2797H35.2486L35.1662 25.462ZM38.7122 17.8505C38.7122 20.9058 37.109 23.5921 34.686 25.1316L34.9005 25.4693C37.4329 23.8602 39.1122 21.0497 39.1122 17.8505H38.7122ZM29.9561 9.2C34.7942 9.2 38.7122 13.0752 38.7122 17.8505H39.1122C39.1122 12.8498 35.0106 8.8 29.9561 8.8V9.2ZM21.2 17.8505C21.2 13.0752 25.118 9.2 29.9561 9.2V8.8C24.9016 8.8 20.8 12.8498 20.8 17.8505H21.2ZM25.2604 25.1532C22.8183 23.6173 21.2 20.9201 21.2 17.8505H20.8C20.8 21.0647 22.4951 23.8865 25.0474 25.4918L25.2604 25.1532ZM25.0765 25.1381C24.9677 25.1838 24.8593 25.231 24.7514 25.2797L24.9161 25.6442C25.0207 25.597 25.1258 25.5512 25.2313 25.5069L25.0765 25.1381ZM24.7514 25.2797C23.0881 26.0313 21.5779 27.1324 20.3066 28.5193L20.6015 28.7896C21.8374 27.4413 23.3037 26.3728 24.9161 25.6442L24.7514 25.2797ZM20.3066 28.5193C19.0354 29.9061 18.0278 31.5515 17.3406 33.3613L17.7146 33.5033C18.3843 31.7395 19.3655 30.1379 20.6015 28.7896L20.3066 28.5193ZM17.3406 33.3613C16.6535 35.1711 16.3 37.1102 16.3 39.0682H16.7C16.7 37.1581 17.0449 35.2671 17.7146 33.5033L17.3406 33.3613ZM16.5 39.2682L30 39.2682L30 38.8682L16.5 38.8682L16.5 39.2682ZM30 39.2682H43.5V38.8682H30V39.2682ZM43.7 39.0682C43.7 37.1102 43.3465 35.1711 42.6593 33.3613L42.2854 33.5033C42.9551 35.2671 43.3 37.1581 43.3 39.0682H43.7ZM42.6593 33.3613C41.9722 31.5515 40.9646 29.9061 39.6934 28.5193L39.3985 28.7896C40.6345 30.1379 41.6157 31.7395 42.2854 33.5033L42.6593 33.3613ZM39.6934 28.5193C38.4221 27.1324 36.9119 26.0313 35.2486 25.2797L35.0839 25.6442C36.6963 26.3728 38.1626 27.4413 39.3985 28.7896L39.6934 28.5193ZM35.2486 25.2797C35.123 25.2229 34.9967 25.1683 34.8698 25.1157L34.7167 25.4852C34.8397 25.5362 34.9621 25.5892 35.0839 25.6442L35.2486 25.2797Z"
+                fill="url(#paint2_linear_6759_39933)"
+                mask="url(#path-2-inside-1_6759_39933)" />
+    </g>
+    <defs>
+        <filter
+                id="filter0_b_6759_39933"
+                x="-61.8333"
+                y="-57.3333"
+                width="159.067"
+                height="162.67"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667" />
+            <feComposite
+                    in2="SourceAlpha"
+                    operator="in"
+                    result="effect1_backgroundBlur_6759_39933" />
+            <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_backgroundBlur_6759_39933"
+                    result="shape" />
+        </filter>
+        <filter
+                id="filter1_bi_6759_39933"
+                x="12.2333"
+                y="4.73333"
+                width="35.5333"
+                height="38.6016"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333" />
+            <feComposite
+                    in2="SourceAlpha"
+                    operator="in"
+                    result="effect1_backgroundBlur_6759_39933" />
+            <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_backgroundBlur_6759_39933"
+                    result="shape" />
+            <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha" />
+            <feOffset dy="1.6" />
+            <feGaussianBlur stdDeviation="1.6" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0" />
+            <feBlend
+                    mode="normal"
+                    in2="shape"
+                    result="effect2_innerShadow_6759_39933" />
+        </filter>
+        <linearGradient
+                id="paint0_linear_6759_39933"
+                x1="24.4512"
+                y1="11.25"
+                x2="4.88624"
+                y2="38.9541"
+                gradientUnits="userSpaceOnUse">
+            <stop offset="0.546815" stop-color="#FD366E" />
+            <stop offset="1" stop-color="#FE9567" />
+        </linearGradient>
+        <linearGradient
+                id="paint1_linear_6759_39933"
+                x1="19.7192"
+                y1="9"
+                x2="42.0864"
+                y2="41.9702"
+                gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0" />
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64" />
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+                id="paint2_linear_6759_39933"
+                x1="16.707"
+                y1="26.2015"
+                x2="43.6912"
+                y2="28.5924"
+                gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/static/images/onboarding/icon2.svg b/static/images/onboarding/icon2.svg
new file mode 100644
index 0000000000..94cdfd9c8d
--- /dev/null
+++ b/static/images/onboarding/icon2.svg
@@ -0,0 +1,60 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39938)">
+        <path d="M9.53766 27.0348C9.85153 26.3701 10.0085 26.0378 10.2491 25.7945C10.4619 25.5795 10.7207 25.4155 11.006 25.3149C11.3287 25.2012 11.6962 25.2012 12.4313 25.2012L35.5758 25.2012C36.3108 25.2012 36.6783 25.2012 37.0011 25.3149C37.2864 25.4155 37.5452 25.5795 37.7579 25.7945C37.9986 26.0378 38.1555 26.3701 38.4694 27.0348L42.2472 35.0348C42.9635 36.5517 43.3217 37.3102 43.221 37.9246C43.133 38.4613 42.8303 38.9391 42.3825 39.2478C41.8699 39.6012 41.0311 39.6012 39.3536 39.6012L8.65347 39.6012C6.97591 39.6012 6.13713 39.6012 5.62453 39.2478C5.17675 38.9391 4.87401 38.4613 4.78606 37.9246C4.68538 37.3102 5.04355 36.5517 5.75988 35.0348L9.53766 27.0348Z" fill="url(#paint0_linear_6759_39938)" fill-opacity="0.64"/>
+        <path d="M9.65069 27.0881C9.96853 26.415 10.116 26.1068 10.338 25.8824C10.5374 25.6808 10.7801 25.5271 11.0475 25.4328C11.3452 25.3279 11.6869 25.3262 12.4313 25.3262L35.5758 25.3262C36.3201 25.3262 36.6618 25.3279 36.9595 25.4328C37.227 25.5271 37.4696 25.6808 37.6691 25.8824C37.8911 26.1068 38.0385 26.415 38.3563 27.0881L42.1341 35.0881C42.4933 35.8488 42.7589 36.4116 42.923 36.861C43.0871 37.3104 43.1427 37.6291 43.0976 37.9044C43.0152 38.4075 42.7313 38.8554 42.3116 39.1449C42.0819 39.3032 41.77 39.389 41.2935 39.4325C40.8171 39.476 40.1948 39.4762 39.3536 39.4762L8.65347 39.4762C7.81226 39.4762 7.18995 39.476 6.71351 39.4325C6.23706 39.389 5.92515 39.3032 5.69548 39.1449C5.27569 38.8554 4.99187 38.4075 4.90942 37.9044C4.86431 37.6291 4.91993 37.3104 5.08401 36.861C5.24809 36.4116 5.51371 35.8488 5.87291 35.0881L9.65069 27.0881Z" stroke="url(#paint1_linear_6759_39938)" stroke-width="0.25"/>
+    </g>
+    <g filter="url(#filter1_bi_6759_39938)">
+        <path d="M9.53766 17.4342C9.85153 16.7695 10.0085 16.4372 10.2491 16.1939C10.4619 15.9789 10.7207 15.8149 11.006 15.7143C11.3287 15.6006 11.6962 15.6006 12.4313 15.6006L35.5758 15.6006C36.3108 15.6006 36.6783 15.6006 37.0011 15.7143C37.2864 15.8149 37.5452 15.9789 37.7579 16.1939C37.9986 16.4372 38.1555 16.7695 38.4694 17.4342L42.2472 25.4342C42.9635 26.9511 43.3217 27.7096 43.221 28.324C43.133 28.8607 42.8303 29.3385 42.3825 29.6472C41.8699 30.0006 41.0311 30.0006 39.3536 30.0006L8.65347 30.0006C6.97591 30.0006 6.13713 30.0006 5.62453 29.6472C5.17675 29.3385 4.87401 28.8607 4.78606 28.324C4.68538 27.7096 5.04355 26.9511 5.75988 25.4342L9.53766 17.4342Z" fill="url(#paint2_linear_6759_39938)" fill-opacity="0.64"/>
+        <path d="M9.65069 17.4875C9.96853 16.8145 10.116 16.5062 10.338 16.2819C10.5374 16.0802 10.7801 15.9265 11.0475 15.8322C11.3452 15.7273 11.6869 15.7256 12.4313 15.7256L35.5758 15.7256C36.3201 15.7256 36.6618 15.7273 36.9595 15.8322C37.227 15.9265 37.4696 16.0802 37.6691 16.2819C37.8911 16.5062 38.0385 16.8145 38.3563 17.4875L42.1341 25.4875C42.4933 26.2482 42.7589 26.811 42.923 27.2604C43.0871 27.7098 43.1427 28.0285 43.0976 28.3038C43.0152 28.807 42.7313 29.2549 42.3116 29.5443C42.0819 29.7026 41.77 29.7884 41.2935 29.8319C40.8171 29.8755 40.1948 29.8756 39.3536 29.8756L8.65347 29.8756C7.81226 29.8756 7.18995 29.8755 6.71351 29.8319C6.23706 29.7884 5.92515 29.7026 5.69548 29.5443C5.27569 29.2549 4.99187 28.807 4.90942 28.3038C4.86431 28.0285 4.91993 27.7098 5.08401 27.2604C5.24809 26.811 5.51371 26.2482 5.87291 25.4875L9.65069 17.4875Z" stroke="url(#paint3_linear_6759_39938)" stroke-width="0.25"/>
+    </g>
+    <path d="M9.53766 7.83358C9.85153 7.16892 10.0085 6.83658 10.2491 6.59335C10.4619 6.3783 10.7207 6.21432 11.006 6.11375C11.3287 6 11.6962 6 12.4313 6L35.5758 6C36.3108 6 36.6783 6 37.0011 6.11375C37.2864 6.21432 37.5452 6.3783 37.7579 6.59335C37.9986 6.83658 38.1555 7.16892 38.4694 7.83358L42.2472 15.8336C42.9635 17.3505 43.3217 18.109 43.221 18.7234C43.133 19.2601 42.8303 19.7379 42.3825 20.0466C41.8699 20.4 41.0311 20.4 39.3536 20.4L8.65347 20.4C6.97591 20.4 6.13713 20.4 5.62453 20.0466C5.17675 19.7379 4.87401 19.2601 4.78606 18.7234C4.68538 18.109 5.04355 17.3505 5.75988 15.8336L9.53766 7.83358Z" fill="url(#paint4_linear_6759_39938)"/>
+    <defs>
+        <filter id="filter0_bi_6759_39938" x="-0.563924" y="19.8678" width="49.1349" height="25.0667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.66667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39938"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39938" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="2"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39938"/>
+        </filter>
+        <filter id="filter1_bi_6759_39938" x="-0.563924" y="10.2673" width="49.1349" height="25.0667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.66667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39938"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39938" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="2"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39938"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39938" x1="8.46813" y1="25.2012" x2="9.77702" y2="52.6509" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39938" x1="3.45453" y1="33.2735" x2="41.4573" y2="44.1161" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39938" x1="8.46813" y1="15.6006" x2="10.9451" y2="42.1243" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39938" x1="3.45453" y1="23.6729" x2="41.4573" y2="34.5155" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39938" x1="33.75" y1="6" x2="33.75" y2="20.25" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0.32"/>
+            <stop offset="0.423207" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FD5E6B"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon3.svg b/static/images/onboarding/icon3.svg
new file mode 100644
index 0000000000..9cd0ae6033
--- /dev/null
+++ b/static/images/onboarding/icon3.svg
@@ -0,0 +1,67 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39942)">
+        <rect x="21.5977" y="6" width="36" height="16.8" rx="3.2" transform="rotate(90 21.5977 6)" fill="url(#paint0_linear_6759_39942)" fill-opacity="0.64"/>
+        <rect x="21.4977" y="6.1" width="35.8" height="16.6" rx="3.1" transform="rotate(90 21.4977 6.1)" stroke="url(#paint1_linear_6759_39942)" stroke-width="0.2"/>
+    </g>
+    <g filter="url(#filter1_b_6759_39942)">
+        <path d="M36.0547 9.60059C38.1039 9.60059 39.1285 9.60059 39.8628 10.0171C40.5074 10.3827 41.0052 10.9606 41.2711 11.6523C41.574 12.4404 41.422 13.4536 41.1181 15.4801L39.0541 29.2401C38.822 30.7871 38.706 31.5607 38.3288 32.1421C37.9964 32.6545 37.5243 33.0611 36.9682 33.3138C36.3373 33.6006 35.5551 33.6006 33.9907 33.6006L20.3453 33.6006C18.2961 33.6006 17.2715 33.6006 16.5372 33.1841C15.8926 32.8185 15.3948 32.2405 15.1289 31.5488C14.826 30.7608 14.978 29.7476 15.2819 27.7211L17.3459 13.9611C17.578 12.414 17.694 11.6405 18.0712 11.0591C18.4036 10.5466 18.8757 10.1401 19.4318 9.88734C20.0627 9.60058 20.8449 9.60059 22.4093 9.60059L36.0547 9.60059Z" fill="url(#paint2_linear_6759_39942)"/>
+    </g>
+    <g filter="url(#filter2_bi_6759_39942)">
+        <path d="M37.3904 15.6006C39.3982 15.6006 40.4021 15.6006 41.1291 16.0064C41.7675 16.3627 42.2646 16.9269 42.5377 17.6051C42.8488 18.3774 42.7224 19.3733 42.4697 21.3651L40.419 37.5251C40.2179 39.1099 40.1174 39.9023 39.7434 40.4993C39.4139 41.0253 38.9386 41.4441 38.3753 41.7048C37.7359 42.0006 36.9372 42.0006 35.3397 42.0006L9.92757 42.0006C7.91979 42.0006 6.9159 42.0006 6.18886 41.5948C5.55048 41.2384 5.05337 40.6743 4.78023 39.9961C4.46916 39.2238 4.59555 38.2279 4.8483 36.236L6.89896 20.076C7.10006 18.4913 7.20061 17.6989 7.57457 17.1019C7.90405 16.5759 8.37939 16.1571 8.94268 15.8964C9.58202 15.6006 10.3808 15.6006 11.9782 15.6006L37.3904 15.6006Z" fill="url(#paint3_linear_6759_39942)" fill-opacity="0.64"/>
+        <path d="M37.3904 15.7006C38.396 15.7006 39.1439 15.7007 39.7315 15.7509C40.3181 15.8011 40.7346 15.9007 41.0804 16.0937C41.6988 16.4389 42.1804 16.9855 42.445 17.6424C42.5929 18.0097 42.6393 18.4355 42.6152 19.0237C42.5911 19.6129 42.4971 20.3549 42.3705 21.3525L40.3198 37.5125C40.2191 38.3065 40.1441 38.8963 40.0481 39.3624C39.9523 39.8274 39.8368 40.1618 39.6586 40.4462C39.3395 40.9558 38.879 41.3615 38.3333 41.614C38.0287 41.7549 37.6824 41.8274 37.2091 41.8639C36.7346 41.9005 36.14 41.9006 35.3397 41.9006L9.92757 41.9006C8.92193 41.9006 8.17403 41.9005 7.58646 41.8502C6.9999 41.8 6.58332 41.7004 6.2376 41.5074C5.61917 41.1623 5.13759 40.6157 4.87299 39.9587C4.72507 39.5915 4.6787 39.1657 4.70275 38.5775C4.72684 37.9882 4.82091 37.2463 4.94751 36.2486L6.99816 20.0886C7.09891 19.2947 7.17382 18.7049 7.26989 18.2387C7.36569 17.7738 7.48118 17.4394 7.65931 17.155C7.9785 16.6454 8.43898 16.2397 8.98468 15.9872C9.28922 15.8462 9.63554 15.7738 10.1088 15.7373C10.5834 15.7007 11.178 15.7006 11.9782 15.7006L37.3904 15.7006Z" stroke="url(#paint4_linear_6759_39942)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39942" x="0.530941" y="1.73333" width="25.3334" height="44.5333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39942"/>
+        </filter>
+        <filter id="filter1_b_6759_39942" x="-51.3693" y="-56.7327" width="159.139" height="156.667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+        </filter>
+        <filter id="filter2_bi_6759_39942" x="0.330013" y="11.3339" width="46.6578" height="34.9334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39942"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39942" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39942"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39942" x1="13.7977" y1="-12.6023" x2="17.6558" y2="33.3511" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39942" x1="21.4662" y1="15.4177" x2="56.1143" y2="22.8941" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39942" x1="39" y1="12" x2="39.9322" y2="31.9025" gradientUnits="userSpaceOnUse">
+            <stop offset="0.276688" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39942" x1="43.2012" y1="18.7483" x2="-40.3378" y2="125.181" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39942" x1="21.2914" y1="15.5042" x2="19.491" y2="41.9734" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon4.svg b/static/images/onboarding/icon4.svg
new file mode 100644
index 0000000000..22bcc9dff2
--- /dev/null
+++ b/static/images/onboarding/icon4.svg
@@ -0,0 +1,42 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_6759_39946)">
+        <path d="M30.4636 24.7027V8.88128C30.4636 7.09574 30.4636 6.20296 30.1017 5.76084C29.7872 5.37666 29.3122 5.16024 28.816 5.17502C28.2449 5.19204 27.5712 5.77785 26.2238 6.94949L8.02918 22.7709C6.43125 24.1604 5.63229 24.8552 5.55493 25.4596C5.48791 25.9832 5.6835 26.5062 6.07767 26.8574C6.53264 27.2627 7.59143 27.2627 9.70901 27.2627H27.9036C28.7997 27.2627 29.2477 27.2627 29.59 27.0883C29.8911 26.9349 30.1358 26.6901 30.2892 26.3891C30.4636 26.0468 30.4636 25.5988 30.4636 24.7027Z" fill="url(#paint0_linear_6759_39946)"/>
+    </g>
+    <g filter="url(#filter1_bi_6759_39946)">
+        <path d="M19.6648 23.8227V39.4757C19.6648 41.3073 19.6648 42.2231 20.0334 42.6675C20.3536 43.0534 20.8362 43.2668 21.3371 43.2442C21.9139 43.2181 22.5915 42.602 23.9468 41.3699L41.1651 25.7169L41.1651 25.7169C42.6876 24.3328 43.4489 23.6408 43.5162 23.0413C43.5746 22.5216 43.3753 22.0063 42.9826 21.661C42.5295 21.2627 41.5007 21.2627 39.4431 21.2627H39.4431H22.2248C21.3287 21.2627 20.8807 21.2627 20.5384 21.4371C20.2374 21.5905 19.9926 21.8353 19.8392 22.1363C19.6648 22.4786 19.6648 22.9266 19.6648 23.8227Z" fill="url(#paint1_linear_6759_39946)" fill-opacity="0.64"/>
+        <path d="M41.0979 25.6429L41.0979 25.6429L41.1034 25.6379L41.1034 25.6379C41.8633 24.9471 42.4285 24.433 42.8129 24.017C43.2011 23.597 43.3871 23.295 43.4169 23.0301C43.4716 22.5429 43.2848 22.0598 42.9166 21.7361C42.7164 21.5601 42.3756 21.4618 41.8059 21.4121C41.2402 21.3628 40.4739 21.3627 39.4431 21.3627H39.4431H22.2248C21.7751 21.3627 21.4438 21.3628 21.1821 21.3842C20.9214 21.4055 20.7385 21.4474 20.5838 21.5262C20.3016 21.67 20.0721 21.8995 19.9283 22.1817C19.8495 22.3364 19.8076 22.5193 19.7863 22.78C19.7649 23.0417 19.7648 23.373 19.7648 23.8227V39.4757C19.7648 40.3935 19.7649 41.075 19.8105 41.5829C19.8563 42.0934 19.9468 42.4065 20.1104 42.6036C20.4106 42.9654 20.863 43.1655 21.3326 43.1443C21.5885 43.1327 21.8811 42.9891 22.2896 42.6796C22.6961 42.3717 23.2004 41.9133 23.8796 41.2959L41.0979 25.6429Z" stroke="url(#paint2_linear_6759_39946)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_b_6759_39946" x="-60.7913" y="-61.159" width="157.588" height="154.755" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39946"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39946" result="shape"/>
+        </filter>
+        <filter id="filter1_bi_6759_39946" x="15.3981" y="16.996" width="32.3948" height="30.5165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39946"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39946" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39946"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39946" x1="16.9636" y1="13.6133" x2="25.7196" y2="31.3365" gradientUnits="userSpaceOnUse">
+            <stop offset="0.36137" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39946" x1="22.8125" y1="45.2627" x2="39.099" y2="15.8542" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39946" x1="19.5684" y1="31.8089" x2="45.8378" y2="28.8991" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon5.svg b/static/images/onboarding/icon5.svg
new file mode 100644
index 0000000000..0338e63f6c
--- /dev/null
+++ b/static/images/onboarding/icon5.svg
@@ -0,0 +1,37 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6221 30.3364V25.9154H6.43643C5.55277 25.9154 4.83643 25.199 4.83643 24.3154V7.93643C4.83643 7.05277 5.55277 6.33643 6.43643 6.33643H30.2364C31.1201 6.33643 31.8364 7.05277 31.8364 7.93643V24.3154C31.8364 25.199 31.1201 25.9154 30.2364 25.9154H16.4079L10.6221 30.3364Z" fill="url(#paint0_linear_6759_39954)"/>
+    <g filter="url(#filter0_bi_6759_39954)">
+        <mask id="path-2-inside-1_6759_39954" fill="white">
+            <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z"/>
+        </mask>
+        <path d="M38.0507 42.3364V37.9154H42.2364C43.1201 37.9154 43.8364 37.199 43.8364 36.3154V19.9364C43.8364 19.0528 43.1201 18.3364 42.2364 18.3364H18.4364C17.5528 18.3364 16.8364 19.0528 16.8364 19.9364V36.3154C16.8364 37.199 17.5528 37.9154 18.4364 37.9154H32.265L38.0507 42.3364Z" fill="url(#paint1_linear_6759_39954)" fill-opacity="0.64"/>
+        <path d="M38.0507 37.9154V37.7154H37.8507V37.9154H38.0507ZM38.0507 42.3364L37.9293 42.4953C37.9897 42.5415 38.0712 42.5494 38.1394 42.5157C38.2076 42.482 38.2507 42.4125 38.2507 42.3364H38.0507ZM32.265 37.9154L32.3864 37.7565L32.3327 37.7154H32.265V37.9154ZM37.8507 37.9154V42.3364H38.2507V37.9154H37.8507ZM38.1721 42.1775L32.3864 37.7565L32.1436 38.0743L37.9293 42.4953L38.1721 42.1775ZM32.265 37.7154H18.4364V38.1154H32.265V37.7154ZM17.0364 36.3154V19.9364H16.6364V36.3154H17.0364ZM18.4364 18.5364H42.2364V18.1364H18.4364V18.5364ZM43.6364 19.9364V36.3154H44.0364V19.9364H43.6364ZM42.2364 37.7154H38.0507V38.1154H42.2364V37.7154ZM43.6364 36.3154C43.6364 37.0886 43.0096 37.7154 42.2364 37.7154V38.1154C43.2305 38.1154 44.0364 37.3095 44.0364 36.3154H43.6364ZM42.2364 18.5364C43.0096 18.5364 43.6364 19.1632 43.6364 19.9364H44.0364C44.0364 18.9423 43.2305 18.1364 42.2364 18.1364V18.5364ZM17.0364 19.9364C17.0364 19.1632 17.6632 18.5364 18.4364 18.5364V18.1364C17.4423 18.1364 16.6364 18.9423 16.6364 19.9364H17.0364ZM18.4364 37.7154C17.6632 37.7154 17.0364 37.0886 17.0364 36.3154H16.6364C16.6364 37.3095 17.4423 38.1154 18.4364 38.1154V37.7154Z" fill="url(#paint2_linear_6759_39954)" mask="url(#path-2-inside-1_6759_39954)"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39954" x="12.5724" y="14.0724" width="35.528" height="32.528" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.132"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39954"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39954" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39954"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39954" x1="28.8364" y1="6.33643" x2="11.0508" y2="30.65" gradientUnits="userSpaceOnUse">
+            <stop offset="0.561728" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39954" x1="14.9079" y1="14.547" x2="46.6185" y2="39.7229" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.5" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39954" x1="16.8364" y1="25.9154" x2="52.1528" y2="32.4512" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/static/images/onboarding/icon6.svg b/static/images/onboarding/icon6.svg
new file mode 100644
index 0000000000..164d519428
--- /dev/null
+++ b/static/images/onboarding/icon6.svg
@@ -0,0 +1,67 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bi_6759_39950)">
+        <rect x="8.13757" y="25.5376" width="14.4" height="15.6" rx="1.6" fill="url(#paint0_linear_6759_39950)" fill-opacity="0.64"/>
+        <rect x="8.23757" y="25.6376" width="14.2" height="15.4" rx="1.5" stroke="url(#paint1_linear_6759_39950)" stroke-width="0.2"/>
+    </g>
+    <g filter="url(#filter1_b_6759_39950)">
+        <rect x="17.7352" y="15.9399" width="14.4" height="25.2" rx="1.6" fill="url(#paint2_linear_6759_39950)"/>
+    </g>
+    <g filter="url(#filter2_bi_6759_39950)">
+        <rect x="27.3387" y="7.5376" width="14.4" height="33.6" rx="1.6" fill="url(#paint3_linear_6759_39950)" fill-opacity="0.64"/>
+        <rect x="27.4387" y="7.6376" width="14.2" height="33.4" rx="1.5" stroke="url(#paint4_linear_6759_39950)" stroke-width="0.2"/>
+    </g>
+    <defs>
+        <filter id="filter0_bi_6759_39950" x="3.87091" y="21.2709" width="22.9334" height="24.1333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39950"/>
+        </filter>
+        <filter id="filter1_b_6759_39950" x="-48.5981" y="-50.3934" width="147.067" height="157.867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="33.1667"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+        </filter>
+        <filter id="filter2_bi_6759_39950" x="23.0721" y="3.27093" width="22.9334" height="42.1333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.13333"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6759_39950"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6759_39950" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1.6"/>
+            <feGaussianBlur stdDeviation="1.6"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_6759_39950"/>
+        </filter>
+        <linearGradient id="paint0_linear_6759_39950" x1="-3.2636" y1="18.3364" x2="21.3376" y2="42.9376" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_6759_39950" x1="8.08499" y1="34.2826" x2="22.4653" y2="35.6193" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_6759_39950" x1="22.6864" y1="20.5864" x2="34.6864" y2="40.8364" gradientUnits="userSpaceOnUse">
+            <stop offset="0.358154" stop-color="#FD366E"/>
+            <stop offset="1" stop-color="#FE9567"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_6759_39950" x1="20.7364" y1="-5.66358" x2="83.7346" y2="3.60378" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FD366E" stop-opacity="0"/>
+            <stop offset="0.484375" stop-color="#FD366E" stop-opacity="0.64"/>
+            <stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_6759_39950" x1="27.2862" y1="26.373" x2="41.7638" y2="26.9978" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.08"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>