diff --git a/src/routes/(console)/(migration-wizard)/resource-form.svelte b/src/routes/(console)/(migration-wizard)/resource-form.svelte
index c0b09b5a2e..d438e4fd85 100644
--- a/src/routes/(console)/(migration-wizard)/resource-form.svelte
+++ b/src/routes/(console)/(migration-wizard)/resource-form.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Alert, Box, EyebrowHeading } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { deepMap } from '$lib/helpers/object';
+    import type { WritableValue } from '$lib/helpers/types';
+    import { Alert, Divider, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import {
         createMigrationFormStore,
@@ -10,18 +10,20 @@
         providerResources,
         resourcesToMigrationForm
     } from '$lib/stores/migration';
+    import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import type { Models } from '@appwrite.io/console';
     import type { sdk } from '$lib/stores/sdk';
-    import type { WritableValue } from '$lib/helpers/types';
+    import ImportReport from '$routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte';
 
+    export let errorInResources: boolean | undefined = undefined;
     export let formData: ReturnType<typeof createMigrationFormStore>;
     export let provider: ReturnType<typeof createMigrationProviderStore>;
     export let projectSdk: ReturnType<typeof sdk.forProject>;
 
     type ValueOf<T> = T[keyof T];
     type FormData = WritableValue<typeof formData>;
-    // TL;DR of this type: It gets a object with two levels (in this case FormData)
+    // TL;DR of this type: It gets an object with two levels (in this case FormData)
     // And returns a join of the keys with a dot between them.
     // e.g. If FormData was { users: { root: boolean, teams: boolean } }
     // The type would be 'users.root' | 'users.teams'
@@ -83,6 +85,7 @@
     let error = false;
     onMount(async () => {
         isOpen = true;
+        deselectAll();
         try {
             switch ($provider.provider) {
                 case 'appwrite':
@@ -130,279 +133,146 @@
         isOpen = false;
     });
 
-    $: resources = providerResources[$provider.provider];
+    $: errorInResources = error;
     $: wizard.setNextDisabled(!report);
+    $: resources = providerResources[$provider.provider];
 </script>
 
-<Box radius="s">
-    <div class="u-flex u-flex-vertical u-gap-16">
-        <EyebrowHeading class="eyebrow" tag="h3" size={3}>Good to know</EyebrowHeading>
-        <div class="u-flex u-gap-16">
-            <div class="circled">
-                <i class="icon-cog"></i>
-            </div>
-            <div>
-                <p class="u-bold">Project settings are not imported</p>
-                <p>You will need to set service and project settings manually</p>
-            </div>
-        </div>
-        <div class="u-flex u-gap-16">
-            <div class="circled">
-                <i class="icon-trending-up"></i>
-            </div>
-            <div>
-                <p class="u-bold">Keep your organization plan's limits in mind</p>
-                <p>
-                    Make sure to have enough storage in your organization plan when importing files.
-                </p>
-            </div>
-        </div>
-        {#if $provider.provider === 'firebase'}
-            <div class="u-flex u-gap-16">
-                <div class="circled">
-                    <i class="icon-exclamation u-color-text-warning"></i>
-                </div>
-                <div>
-                    <p class="u-bold">Possible charges by Firebase</p>
-                    <p>
-                        Appwrite does not impose charges for importing data, but please note that
-                        Firebase may have its own pricing for this service
-                    </p>
-                </div>
-            </div>
-        {:else}
-            <div class="u-flex u-gap-16">
-                <div class="circled">
-                    <i class="icon-currency-dollar"></i>
-                </div>
-                <div>
-                    <p class="u-bold">Transfer is free of charge</p>
-                    <p>You won't be charged for Appwrite bandwidth usage for importing data</p>
-                </div>
-            </div>
-        {/if}
-    </div>
-</Box>
-
-{#if report && !isVersionAtLeast(version, '1.4.0') && $provider.provider === 'appwrite'}
-    <div class="u-margin-block-start-24">
-        <Alert
-            type="warning"
-            isStandalone
-            buttons={[
-                {
-                    slot: 'Learn more',
-                    onClick() {
-                        wizard.updateStep((p) => p - 1);
-                    }
-                }
-            ]}>
+<Layout.Stack gap="l">
+    {#if report && !isVersionAtLeast(version, '1.4.0') && $provider.provider === 'appwrite'}
+        <Alert.Inline status="warning">
             <svelte:fragment slot="title">Functions not available for import</svelte:fragment>
             To migrate your functions, update the version of the Appwrite instance you're importing from
             to a version newer than 1.4
-        </Alert>
-    </div>
-{/if}
+        </Alert.Inline>
+    {/if}
 
-{#if error}
-    <div class="u-margin-block-start-24">
-        <Alert
-            type="error"
-            isStandalone
-            buttons={[
-                {
-                    slot: 'Edit credentials',
-                    onClick() {
-                        wizard.updateStep((p) => p - 1);
-                    }
-                }
-            ]}>
-            <svelte:fragment slot="title">Request failed</svelte:fragment>
+    {#if error}
+        <Alert.Inline status="error" title="Request failed">
             Please check if your credentials are filled in correctly in the previous step
-        </Alert>
-    </div>
-{/if}
-
-<ul class="buttons-list u-margin-block-start-32 u-main-end">
-    <li class="buttons-list-item">
-        <Button text on:click={deselectAll}>Deselect all</Button>
-    </li>
+        </Alert.Inline>
+    {/if}
 
-    <li class="buttons-list-item">
-        <Button text on:click={selectAll}>Select all</Button>
-    </li>
-</ul>
+    <Layout.Stack gap="l">
+        <Layout.Stack direction="row">
+            <Button
+                compact
+                on:click={(event) => {
+                    event.preventDefault();
+                    deselectAll();
+                }}>Deselect all</Button>
+            <Button
+                compact
+                on:click={(event) => {
+                    event.preventDefault();
+                    selectAll();
+                }}>Select all</Button>
+        </Layout.Stack>
+        <Divider />
+    </Layout.Stack>
 
-<ul class="u-flex u-flex-vertical u-margin-block-start-16">
     {#if resources?.includes('user')}
-        <li class="checkbox-field">
-            <input
-                type="checkbox"
-                bind:checked={$formData.users.root}
-                on:change={handleInputChange('users.root')} />
-            <div class="u-flex u-gap-4 u-cross-center">
-                <span class="u-bold">Users</span>
-
-                {#if $provider.provider !== 'firebase'}
-                    {#if report?.user !== undefined}
-                        <span class="inline-tag">{report.user}</span>
-                    {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4"></span>
-                    {/if}
-                {/if}
+        <Layout.Stack>
+            <ImportReport
+                label="Users"
+                checked={$formData.users.root}
+                handleChange={handleInputChange('users.root')}
+                description="Import all users"
+                reportValue={report?.user}
+                isLoading={!error} />
+
+            <!-- TODO: no padding, change a component instead -->
+            <div style:padding-left="2rem">
+                <ImportReport
+                    label="Include teams"
+                    checked={$formData.users.teams}
+                    handleChange={handleInputChange('users.teams')}
+                    description="Import all teams and the team memberships of your users" />
             </div>
-            <div></div>
-            <span>Import all users</span>
-
-            {#if resources?.includes('team')}
-                <ul>
-                    <li class="checkbox-field">
-                        <input
-                            type="checkbox"
-                            bind:checked={$formData.users.teams}
-                            on:change={handleInputChange('users.teams')} />
-                        <div class="u-flex u-gap-4 u-cross-center">
-                            <span class="u-bold">Include teams</span>
-                            {#if $provider.provider === 'firebase'}
-                                {#if report?.team !== undefined}
-                                    <span class="inline-tag">{report.team}</span>
-                                {:else if !error}
-                                    <span class="loader is-small u-margin-inline-start-4"></span>
-                                {/if}
-                            {/if}
-                        </div>
-                        <div></div>
-                        <span>Import all teams and the team memberships of your users</span>
-                    </li>
-                </ul>
-            {/if}
-        </li>
+        </Layout.Stack>
     {/if}
 
     {#if resources?.includes('database')}
-        <li class="checkbox-field">
-            <input
-                type="checkbox"
-                bind:checked={$formData.databases.root}
-                on:change={handleInputChange('databases.root')} />
-            <div class="u-flex u-gap-4 u-cross-center">
-                <span class="u-bold">Databases</span>
-                {#if $provider.provider !== 'firebase'}
-                    {#if report?.database !== undefined}
-                        <span class="inline-tag">{report.database}</span>
-                    {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4"></span>
-                    {/if}
-                {/if}
+        <Layout.Stack>
+            <ImportReport
+                label="Databases"
+                checked={$formData.databases.root}
+                handleChange={handleInputChange('databases.root')}
+                description="Import all databases, including collections, indexes and attributes"
+                reportValue={report?.database}
+                isLoading={!error} />
+
+            <div style:padding-left="2rem">
+                <ImportReport
+                    label="Include documents"
+                    checked={$formData.databases.documents}
+                    handleChange={handleInputChange('databases.documents')}
+                    description="Import all functions and their active deployment"
+                    reportValue={report?.document}
+                    isLoading={!error} />
             </div>
-            <div></div>
-            <span>Import all databases, including collections, indexes and attributes</span>
-
-            {#if resources?.includes('document')}
-                <ul>
-                    <li class="checkbox-field">
-                        <input
-                            type="checkbox"
-                            bind:checked={$formData.databases.documents}
-                            on:change={handleInputChange('databases.documents')} />
-                        <div class="u-flex u-gap-4 u-cross-center">
-                            <span class="u-bold">Include documents</span>
-                            {#if $provider.provider !== 'firebase'}
-                                {#if report?.document !== undefined}
-                                    <span class="inline-tag">{report.document}</span>
-                                {:else if !error}
-                                    <span class="loader is-small u-margin-inline-start-4"></span>
-                                {/if}
-                            {/if}
-                        </div>
-                        <div></div>
-                        <span>Import all of your documents</span>
-                    </li>
-                </ul>
-            {/if}
-        </li>
+        </Layout.Stack>
     {/if}
 
     {#if resources?.includes('function') && isVersionAtLeast(version, '1.4.0')}
-        <li class="checkbox-field">
-            <input
-                type="checkbox"
-                bind:checked={$formData.functions.root}
-                on:change={handleInputChange('functions.root')} />
-            <div class="u-flex u-gap-4 u-cross-center">
-                <span class="u-bold">Functions</span>
-                {#if $provider.provider !== 'firebase'}
-                    {#if report?.function !== undefined}
-                        <span class="inline-tag">{report.function}</span>
-                    {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4"></span>
-                    {/if}
-                {/if}
-            </div>
-            <div></div>
-            <span>Import all functions and their active deployment</span>
-            <ul>
-                {#if resources?.includes('environment-variable')}
-                    <li class="checkbox-field">
-                        <input
-                            type="checkbox"
-                            bind:checked={$formData.functions.env}
-                            on:change={handleInputChange('functions.env')} />
-                        <div class="u-flex u-gap-4">
-                            <span class="u-bold">Include environment variables</span>
-                        </div>
-                        <div></div>
-                        <span>Import all environment variables</span>
-                    </li>
-                {/if}
-                {#if resources?.includes('deployment')}
-                    <li class="checkbox-field">
-                        <input
-                            type="checkbox"
-                            bind:checked={$formData.functions.inactive}
-                            on:change={handleInputChange('functions.inactive')} />
-                        <div class="u-flex u-gap-4">
-                            <span class="u-bold">Include inactive deployments</span>
-                        </div>
-                        <div></div>
-                        <span>Import all deployments that are not currently active</span>
-                    </li>
-                {/if}
-            </ul>
-        </li>
+        <Layout.Stack>
+            <ImportReport
+                label="Functions"
+                checked={$formData.functions.root}
+                handleChange={handleInputChange('functions.root')}
+                description="Import all functions and their active deployment"
+                reportValue={report?.function}
+                isLoading={!error} />
+
+            {#if resources?.includes('environment-variable') || resources?.includes('deployment')}
+                <div style:padding-left="2rem">
+                    <Layout.Stack gap="s">
+                        {#if resources?.includes('environment-variable')}
+                            <ImportReport
+                                label="Include environment variables"
+                                checked={$formData.functions.env}
+                                description="Import all environment variables"
+                                handleChange={handleInputChange('functions.env')} />
+                        {/if}
+
+                        {#if resources?.includes('deployment')}
+                            <ImportReport
+                                label="Include inactive deployments"
+                                checked={$formData.functions.inactive}
+                                handleChange={handleInputChange('functions.inactive')}
+                                description="Import all deployments that are not currently active" />
+                        {/if}
+                    </Layout.Stack>
+                </div>
+            {/if}
+        </Layout.Stack>
     {/if}
 
     {#if resources?.includes('bucket') && resources?.includes('file')}
-        <li class="checkbox-field">
-            <input
-                type="checkbox"
-                bind:checked={$formData.storage.root}
-                on:change={handleInputChange('storage.root')} />
-            <div class="u-flex u-gap-4 u-cross-center">
-                <span class="u-bold">Storage</span>
-                {#if $provider.provider !== 'firebase'}
-                    {#if report?.size !== undefined}
-                        <span class="inline-tag">{`${report.size.toFixed(2)}MB`}</span>
-                    {:else if !error}
-                        <span class="loader is-small u-margin-inline-start-4"></span>
+        {@const storageSize = report?.size >= 0 ? `${report?.size.toFixed(2)}MB` : undefined}
+        <Layout.Stack gap="none">
+            <ImportReport
+                label="Storage"
+                checked={$formData.storage.root}
+                handleChange={handleInputChange('storage.root')}
+                reportValue={storageSize}
+                isLoading={!error} />
+
+            <div style:padding-left="2rem">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                    Import all buckets
+                    {#if $provider.provider !== 'firebase' && report?.bucket}
+                        <Tag size="xs" selected>{report.bucket}</Tag>
                     {/if}
-                {/if}
+                    and files
+                    {#if $provider.provider !== 'firebase' && report?.file}
+                        <Tag size="xs" selected>{report.file}</Tag>
+                    {/if}
+                </Typography.Text>
             </div>
-            <div></div>
-
-            <p>
-                Import all buckets
-                {#if $provider.provider !== 'firebase' && report?.bucket}
-                    <span class="inline-tag">{report.bucket}</span>
-                {/if}
-                and files
-                {#if $provider.provider !== 'firebase' && report?.file}
-                    <span class="inline-tag">{report.file}</span>
-                {/if}
-            </p>
-        </li>
+        </Layout.Stack>
     {/if}
-</ul>
+</Layout.Stack>
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/credentials.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/credentials.svelte
new file mode 100644
index 0000000000..fb61190f49
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/credentials.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+    import { provider } from '.';
+    import { Button, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
+
+    export let formSubmitted = false;
+
+    $: disableButton = (() => {
+        if (!$provider) return true;
+
+        switch ($provider.provider) {
+            case 'appwrite':
+                return !$provider.endpoint || !$provider.projectID || !$provider.apiKey;
+
+            case 'firebase':
+                return !$provider.serviceAccount;
+
+            case 'supabase':
+                return (
+                    !$provider.host ||
+                    !$provider.port ||
+                    !$provider.password ||
+                    !$provider.endpoint ||
+                    !$provider.apiKey
+                );
+
+            case 'nhost':
+                return (
+                    !$provider.region ||
+                    !$provider.subdomain ||
+                    !$provider.password ||
+                    !$provider.adminSecret
+                );
+
+            default:
+                return true;
+        }
+    })();
+</script>
+
+<Layout.Stack gap="xl">
+    {#if $provider.provider === 'appwrite'}
+        <Layout.Stack gap="l">
+            <InputText
+                id="endpoint"
+                label="Endpoint"
+                required
+                placeholder="Enter endpoint"
+                bind:value={$provider.endpoint} />
+            <InputText
+                id="project-id"
+                label="Project ID"
+                required
+                placeholder="Enter project ID"
+                bind:value={$provider.projectID} />
+            <InputPassword
+                id="api-key"
+                label="API Key"
+                required
+                placeholder="Enter API Key"
+                bind:value={$provider.apiKey} />
+        </Layout.Stack>
+    {:else if $provider.provider === 'firebase'}
+        <Layout.Stack gap="l">
+            <InputTextarea
+                id="credentials"
+                label="Service Account JSON credentials"
+                required
+                bind:value={$provider.serviceAccount}
+                placeholder="Enter Service Account JSON credentials" />
+        </Layout.Stack>
+    {:else if $provider.provider === 'supabase'}
+        <Layout.Stack gap="l">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
+                >Postgres credentials</Typography.Text>
+
+            <InputText
+                id="host"
+                label="Host"
+                required
+                placeholder="Enter host"
+                bind:value={$provider.host} />
+
+            <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
+
+            <InputText
+                id="username"
+                label="Username"
+                placeholder="postgres"
+                bind:value={$provider.username} />
+
+            <InputPassword
+                id="password"
+                label="Password"
+                required
+                placeholder="Enter password"
+                bind:value={$provider.password} />
+
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
+                >Supabase credentials</Typography.Text>
+
+            <InputText
+                id="endpoint"
+                label="Endpoint"
+                required
+                placeholder="Enter endpoint"
+                bind:value={$provider.endpoint} />
+
+            <InputPassword
+                id="api-key"
+                label="API Key"
+                required
+                placeholder="Enter API Key"
+                bind:value={$provider.apiKey} />
+        </Layout.Stack>
+    {:else if $provider.provider === 'nhost'}
+        <Layout.Stack gap="l">
+            <InputText
+                id="region"
+                label="Region"
+                required
+                placeholder="Enter region"
+                bind:value={$provider.region} />
+            <InputText
+                id="subdomain"
+                label="Subdomain"
+                required
+                placeholder="Enter subdomain"
+                bind:value={$provider.subdomain} />
+            <InputText
+                id="database"
+                label="Database"
+                placeholder={$provider.subdomain
+                    ? `Default: ${$provider.subdomain}`
+                    : 'Enter database'}
+                bind:value={$provider.database} />
+            <InputText
+                id="username"
+                label="Username"
+                placeholder="postgres"
+                bind:value={$provider.username} />
+            <InputPassword
+                id="password"
+                label="Password"
+                required
+                placeholder="Enter password"
+                bind:value={$provider.password} />
+            <InputPassword
+                id="adminSecret"
+                label="Admin secret"
+                required
+                placeholder="Enter admin secret"
+                bind:value={$provider.adminSecret} />
+        </Layout.Stack>
+    {/if}
+
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        <Button.Button
+            size="s"
+            disabled={disableButton}
+            on:click={() => {
+                formSubmitted = true;
+            }}>Next</Button.Button>
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte
new file mode 100644
index 0000000000..a7c0b4cc37
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Layout, Selector, Tag, Spinner, Typography } from '@appwrite.io/pink-svelte';
+
+    export let label: string;
+    export let checked: boolean;
+    export let isLoading: boolean = false;
+    export let handleChange: (event: Event) => void;
+    export let description: string | undefined = undefined;
+    export let reportValue: string | number | undefined = undefined;
+</script>
+
+<Layout.Stack>
+    <Layout.Stack direction="row" gap="xs" alignItems="flex-start">
+        <Layout.Stack gap="none">
+            <Layout.Stack direction="row" gap="xs" alignItems="flex-start">
+                <Selector.Checkbox {label} bind:checked on:change={handleChange} />
+
+                {#if reportValue !== undefined}
+                    <Tag size="xs" selected>{reportValue}</Tag>
+                {:else if isLoading}
+                    <Spinner size="s" />
+                {/if}
+            </Layout.Stack>
+
+            {#if description}
+                <div style:padding-left="2rem">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Typography.Text>
+                </div>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
index badd138cfd..e69de29bb2 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
@@ -1,141 +0,0 @@
-<script lang="ts">
-    import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import type { Provider } from '$lib/stores/migration';
-    import { provider } from '.';
-
-    const providers: Record<Provider, string> = {
-        appwrite: 'Appwrite',
-        firebase: 'Firebase',
-        supabase: 'Supabase',
-        nhost: 'NHost'
-    };
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Source</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select a source platform with the project you want to migrate. <a
-            class="link"
-            href="https://appwrite.io/docs/advanced/migrations"
-            target="_blank"
-            rel="noopener noreferrer">
-            Learn about which platforms are supported</a
-        >.
-    </svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-8">
-        {#each Object.entries(providers) as [key, value]}
-            <label class="u-flex u-cross-center u-cursor-pointer u-gap-8">
-                <input
-                    class="is-small"
-                    type="radio"
-                    name="provider"
-                    bind:group={$provider.provider}
-                    value={key} />
-                <div class="content">
-                    <p>{value}</p>
-                </div>
-            </label>
-        {/each}
-    </div>
-
-    {#if $provider.provider === 'appwrite'}
-        <InputText
-            id="endpoint"
-            label="Endpoint"
-            required
-            placeholder="Enter endpoint"
-            bind:value={$provider.endpoint} />
-        <InputText
-            id="project-id"
-            label="Project ID"
-            required
-            placeholder="Enter project ID"
-            bind:value={$provider.projectID} />
-        <InputPassword
-            id="api-key"
-            label="API Key"
-            required
-            placeholder="Enter API Key"
-            bind:value={$provider.apiKey} />
-    {:else if $provider.provider === 'firebase'}
-        <div class="u-margin-block-start-16">
-            <InputTextarea
-                id="credentials"
-                label="Account credentials"
-                required
-                bind:value={$provider.serviceAccount}
-                placeholder="Enter account credentials" />
-        </div>
-    {:else if $provider.provider === 'supabase'}
-        <p class="body-text-1 u-bold">Postgres credentials</p>
-
-        <InputText
-            id="host"
-            label="Host"
-            required
-            placeholder="Enter host"
-            bind:value={$provider.host} />
-        <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
-        <InputText
-            id="username"
-            label="Username"
-            placeholder="postgres"
-            bind:value={$provider.username} />
-        <InputPassword
-            id="password"
-            label="Password"
-            required
-            placeholder="Enter password"
-            bind:value={$provider.password} />
-        <p class="body-text-1 u-bold">Supabase credentials</p>
-
-        <InputText
-            id="endpoint"
-            label="Endpoint"
-            required
-            placeholder="Enter endpoint"
-            bind:value={$provider.endpoint} />
-        <InputPassword
-            id="api-key"
-            label="API Key"
-            required
-            placeholder="Enter API Key"
-            bind:value={$provider.apiKey} />
-    {:else if $provider.provider === 'nhost'}
-        <InputText
-            id="region"
-            label="Region"
-            required
-            placeholder="Enter region"
-            bind:value={$provider.region} />
-        <InputText
-            id="subdomain"
-            label="Subdomain"
-            required
-            placeholder="Enter subdomain"
-            bind:value={$provider.subdomain} />
-        <InputText
-            id="database"
-            label="Database"
-            placeholder={$provider.subdomain ? `Default: ${$provider.subdomain}` : 'Enter database'}
-            bind:value={$provider.database} />
-        <InputText
-            id="username"
-            label="Username"
-            placeholder="postgres"
-            bind:value={$provider.username} />
-        <InputPassword
-            id="password"
-            label="Password"
-            required
-            placeholder="Enter password"
-            bind:value={$provider.password} />
-        <InputPassword
-            id="adminSecret"
-            label="Admin secret"
-            required
-            placeholder="Enter admin secret"
-            bind:value={$provider.adminSecret} />
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
index 7267920879..e69de29bb2 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/state';
-    import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte';
-    import { formData, provider } from '.';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Resources</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select the resources you need to migrate to Appwrite. Some resources can be migrated, but
-        with limitations. <a
-            class="link"
-            href="https://appwrite.io/docs/advanced/migrations"
-            target="_blank"
-            rel="noopener noreferrer">
-            Learn about which resources are supported</a
-        >.
-    </svelte:fragment>
-    <ResourceForm
-        {formData}
-        {provider}
-        projectSdk={sdk.forProject(page.params.region, page.params.project)} />
-</WizardStep>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
index 38c8f84a31..46aeae3ed7 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/wizard.svelte
@@ -1,18 +1,35 @@
 <script lang="ts">
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Wizard from '$lib/layout/wizardWithSteps.svelte';
+    import { Wizard } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
     import { onDestroy } from 'svelte';
     import { formData, provider, resetImportStores } from '.';
-    import Step1 from './step1.svelte';
-    import Step2 from './step2.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { migrationFormToResources } from '$lib/stores/migration';
+    import { migrationFormToResources, type Provider } from '$lib/stores/migration';
     import { started } from '../stores';
     import { showMigrationBox } from '$lib/components/migrationBox.svelte';
     import { addNotification } from '$lib/stores/notifications';
+    import {
+        Button,
+        Card,
+        Divider,
+        Fieldset,
+        Icon,
+        Layout,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { EyebrowHeading } from '$lib/components';
+    import Credentials from './credentials.svelte';
+    import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte';
+    import {
+        IconCog,
+        IconCurrencyDollar,
+        IconExclamation,
+        IconTrendingUp
+    } from '@appwrite.io/pink-icons-svelte';
+    import { capitalize } from '$lib/helpers/string';
     import { page } from '$app/state';
 
     const onExit = () => {
@@ -93,15 +110,153 @@
 
     onDestroy(onExit);
 
-    const steps: WizardStepsType = new Map();
-    steps.set(1, {
-        label: 'Source',
-        component: Step1
-    });
-    steps.set(2, {
-        label: 'Resources',
-        component: Step2
-    });
+    const providers: Record<Provider, string> = {
+        appwrite: 'Appwrite self-hosted',
+        firebase: 'Firebase',
+        supabase: 'Supabase',
+        nhost: 'NHost'
+    };
+
+    let showResources = false;
+    let showExitModal = false;
+    let errorInResources = false;
+    $: isFinalsButtonEnabled =
+        !errorInResources &&
+        showResources &&
+        Object.values($formData).some((category) =>
+            Object.values(category).some((value) => value === true)
+        );
 </script>
 
-<Wizard title="Create Migration" {steps} on:exit={onExit} on:finish={onFinish} />
+<Wizard title="Create migration" bind:showExitModal confirmExit {onExit}>
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Source">
+                <Layout.Stack gap="xl">
+                    {#if !showResources}
+                        <Typography.Text variant="m-400">
+                            Select a source platform with the project you want to migrate.
+                            <Link href="https://appwrite.io/docs/advanced/migrations" external>
+                                Learn more.
+                            </Link>
+                        </Typography.Text>
+
+                        <Layout.Grid rowGap="l" columns={3} columnsS={2} columnsXS={1}>
+                            {#each Object.entries(providers) as [key, platform]}
+                                <Card.Selector
+                                    bind:group={$provider.provider}
+                                    name={key}
+                                    id={key}
+                                    value={key}
+                                    title={platform}
+                                    imageRadius="s"
+                                    disabled={showResources} />
+                            {/each}
+                        </Layout.Grid>
+
+                        <Divider />
+
+                        <Credentials bind:formSubmitted={showResources} />
+                    {:else}
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Typography.Text variant="m-500">
+                                {capitalize($provider.provider)}
+                            </Typography.Text>
+
+                            <Button.Button
+                                size="s"
+                                variant="secondary"
+                                on:click={() => (showResources = !showResources)}>
+                                Update
+                            </Button.Button>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+
+            {#if showResources}
+                <Fieldset legend="Resources">
+                    <Layout.Stack gap="xl">
+                        <ResourceForm
+                            {formData}
+                            {provider}
+                            bind:errorInResources
+                            projectSdk={sdk.forProject(page.params.region, page.params.project)} />
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+
+    <svelte:fragment slot="aside">
+        <Card.Base variant="primary" radius="s" padding="m">
+            <Layout.Stack gap="l">
+                <EyebrowHeading class="eyebrow" tag="h3" size={3}>Good to know</EyebrowHeading>
+
+                <!-- tip 1 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    <span style:padding-block="2px">
+                        <Icon icon={IconCog} size="s" />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600"
+                            >Project settings are not imported</Typography.Text>
+                        You will need to set service and project settings manually.
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <!-- tip 2 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    <span style:padding-block="2px">
+                        <Icon icon={IconTrendingUp} size="s" />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600"
+                            >Keep your organization plan's limits in mind</Typography.Text>
+                        Make sure to have enough storage in your organization plan when importing files.
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <!-- tip 3 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    {@const isFirebase = $provider.provider === 'firebase'}
+                    <span style:padding-block="3px">
+                        <Icon
+                            icon={isFirebase ? IconExclamation : IconCurrencyDollar}
+                            size="s"
+                            color={isFirebase ? '--fgcolor-warning' : undefined} />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600">
+                            {isFirebase
+                                ? 'Possible charges by Firebase'
+                                : 'Transfer is free of charge'}
+                        </Typography.Text>
+
+                        {#if isFirebase}
+                            Appwrite does not impose charges for importing data, but please note
+                            that Firebase may have its own pricing for this service
+                        {:else}
+                            You won't be charged for Appwrite bandwidth usage for importing data
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button.Button
+            variant="secondary"
+            on:click={() => {
+                showExitModal = true;
+            }}>Cancel</Button.Button>
+
+        <Button.Button variant="primary" disabled={!isFinalsButtonEnabled} on:click={onFinish}
+            >Create</Button.Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
index 87490b4f71..b404c4b3d5 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte
@@ -33,21 +33,9 @@
     import { page } from '$app/state';
 
     export let data;
-    let migration: Models.Migration = null;
     let showExport = false;
     let showMigration = false;
-
-    const getStatus = (status: string) => {
-        if (status === 'failed') {
-            return 'failed';
-        } else if (status === 'completed') {
-            return 'complete';
-        } else if (status === 'processing') {
-            return 'processing';
-        }
-
-        return 'pending';
-    };
+    let migration: Models.Migration = null;
 
     onMount(() => {
         return realtime
@@ -134,8 +122,25 @@
     };
 
     function showDetails(m: Models.Migration) {
-        showMigration = true;
         migration = m;
+        showMigration = true;
+    }
+
+    function getTypedStatus(entry: Models.Migration) {
+        // migration > pending, processing, failed, completed
+        // status component = waiting, ready, processing, pending, failed, complete
+        switch (entry.status) {
+            case 'completed':
+                return 'complete';
+            case 'processing':
+                return 'processing';
+            case 'failed':
+                return 'failed';
+            case 'pending':
+                return 'pending';
+            default:
+                return 'waiting';
+        }
     }
 </script>
 
@@ -165,7 +170,7 @@
                     </svelte:fragment>
                     {#each data.migrations as entry}
                         <Table.Row.Base {root}>
-                            {@const status = getStatus(entry.status)}
+                            {@const status = getTypedStatus(entry)}
                             <Table.Cell {root}>
                                 {#if isSameDay(new Date(), new Date(entry.$createdAt))}
                                     Today
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
index d26f392098..1add18f031 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
-    import { Alert, Modal, Tab } from '$lib/components';
-    import Tabs from '$lib/components/tabs.svelte';
     import { total } from '$lib/helpers/array';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { parseIfString } from '$lib/helpers/object';
+    import { Modal, Tab } from '$lib/components';
+    import Tabs from '$lib/components/tabs.svelte';
     import { formatNum } from '$lib/helpers/string';
     import type { Models } from '@appwrite.io/console';
+    import { parseIfString } from '$lib/helpers/object';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import { ResourcesFriendly } from '$lib/stores/migration';
-    import { Card, Layout, Typography, Code } from '@appwrite.io/pink-svelte';
+    import { IconCheck, IconClock, IconExclamation } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Alert,
+        Card,
+        Layout,
+        Typography,
+        Code,
+        Spinner,
+        Tag,
+        Icon
+    } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
 
     export let migration: Models.Migration = null;
     export let show = false;
@@ -44,6 +55,7 @@
     };
 
     let tab = 'details' as 'details' | 'logs';
+    let logs = JSON.stringify(migration, null, 2);
 </script>
 
 <Modal
@@ -56,7 +68,7 @@
     </Tabs>
 
     {#if tab === 'logs'}
-        <Code code={JSON.stringify(migration, null, 2)} lang="json" hideHeader />
+        <Code code={logs} lang="json" hideHeader />
     {:else if tab === 'details'}
         <Card.Base variant="secondary" padding="s">
             <Layout.Stack>
@@ -76,82 +88,64 @@
         </Card.Base>
 
         {#if Object.values(statusCounters).some(hasError)}
-            <Alert
-                type="error"
-                buttons={[
-                    {
-                        slot: 'View logs',
-                        onClick() {
-                            tab = 'logs';
-                        }
-                    }
-                ]}>
+            <Alert.Inline status="error">
                 There was an error migrating some of the project's entities.
-            </Alert>
+                <Button slot="actions" extraCompact on:click={() => (tab = 'logs')}
+                    >View logs</Button>
+            </Alert.Inline>
         {/if}
 
         {#if Object.keys(statusCounters).length}
-            <div class="box">
-                {#each Object.keys(statusCounters) as entity}
-                    {@const entityCounter = statusCounters[entity]}
-                    <div class="u-flex u-cross-center u-gap-16">
-                        <div class="icon-wrapper">
-                            {#if hasError(entityCounter)}
-                                <i class="icon-exclamation"></i>
-                            {:else if isLoading(entityCounter)}
-                                <div class="u-flex">
-                                    <span class="loader"></span>
-                                </div>
-                            {:else if hasSucceeded(entityCounter)}
-                                <i class="icon-check"></i>
-                            {:else}
-                                <i class="icon-clock"></i>
-                            {/if}
-                        </div>
-
-                        <div>
-                            <span class="u-capitalize"
-                                >{total(Object.values(entityCounter)) > 1
-                                    ? ResourcesFriendly[entity].plural
-                                    : ResourcesFriendly[entity].singular}</span>
-                            <span class="inline-tag">{totalItems(entityCounter)}</span>
-                        </div>
-                    </div>
-                {/each}
-            </div>
+            <Card.Base padding="s" variant="secondary">
+                <Layout.Stack gap="l">
+                    {#each Object.keys(statusCounters) as entity}
+                        {@const entityCounter = statusCounters[entity]}
+                        <Layout.Stack
+                            direction="row"
+                            gap="l"
+                            alignItems="center"
+                            alignContent="center">
+                            <div class="icon-wrapper">
+                                {#if hasError(entityCounter)}
+                                    <Icon icon={IconExclamation} color="--bgcolor-warning" />
+                                {:else if isLoading(entityCounter)}
+                                    <Spinner size="s" />
+                                {:else if hasSucceeded(entityCounter)}
+                                    <Icon icon={IconCheck} />
+                                {:else}
+                                    <Icon icon={IconClock} />
+                                {/if}
+                            </div>
+
+                            <div>
+                                <span class="u-capitalize"
+                                    >{total(Object.values(entityCounter)) > 1
+                                        ? ResourcesFriendly[entity].plural
+                                        : ResourcesFriendly[entity].singular}</span>
+
+                                <Tag size="xs" selected>{totalItems(entityCounter)}</Tag>
+                            </div>
+                        </Layout.Stack>
+                    {/each}
+                </Layout.Stack>
+            </Card.Base>
         {/if}
     {/if}
 </Modal>
 
 <style lang="scss">
-    .box {
-        padding: 0;
-
-        > div {
-            padding: 1.25rem;
-
-            &:not(:last-child) {
-                border-bottom: 1px solid hsl(var(--border));
-            }
-        }
-    }
-
     .icon-wrapper {
         position: relative;
 
         width: 1.5rem;
         height: 1.5rem;
 
-        > * {
-            position: absolute;
+        > :global(*) {
             top: 50%;
             left: 50%;
+            position: absolute;
 
             transform: translate(-50%, -50%);
         }
     }
-
-    .icon-exclamation {
-        color: hsl(var(--color-danger-100));
-    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
index 0f46583243..bbb1ebda72 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/exportModal.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { Alert, Box, Modal } from '$lib/components';
-    import { Button, InputText, InputTextarea } from '$lib/elements/forms';
+    import { project } from '../../store';
+    import { Box, Modal } from '$lib/components';
     import { getFormData } from '$lib/helpers/form';
     import { feedback, feedbackData } from '$lib/stores/feedback';
-    import { organization } from '$lib/stores/organization';
+    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Button, InputText, InputTextarea } from '$lib/elements/forms';
+
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
-    import { project } from '../../store';
+    import { organization } from '$lib/stores/organization';
 
     export let show = false;
-    let submitted = false;
+
+    let endpointUrl = '';
+    let redirecting = false;
 
     const isValidEndpoint = (endpoint: string) => {
         try {
@@ -47,7 +51,7 @@
 
     const onSubmit = async (e: SubmitEvent) => {
         e.preventDefault();
-        submitted = true;
+        redirecting = true;
 
         const formData = getFormData<{ endpoint: string; feedback: string }>(e);
 
@@ -114,56 +118,58 @@
         const dest = `${removeTrailingSlash(endpoint)}/?migrate=${encodeURIComponent(
             JSON.stringify(migrationData)
         )}`;
+
+        redirecting = false;
         window.location.href = dest;
     };
-
-    function handleInvalid(event: Event) {
-        const input = event.target as HTMLInputElement;
-        const value = input.value;
-
-        if (!isValidEndpoint(value)) {
-            input.setCustomValidity('Please enter a valid endpoint');
-        } else {
-            input.setCustomValidity('');
-        }
-        input.reportValidity();
-    }
 </script>
 
 <Modal title="Export to self-hosted instance" bind:show {onSubmit}>
-    <Alert isStandalone>
-        <svelte:fragment slot="title">API key creation</svelte:fragment>
-        By initiating the transfer, an API key will be automatically generated in the background, which
-        you can delete after completion
-    </Alert>
-
-    <InputText
-        label="Endpoint self-hosted instance"
-        required
-        id="endpoint"
-        placeholder="https://[YOUR_APPWRITE_HOSTNAME]"
-        autofocus
-        on:input={(e) => {
-            if (!submitted) return;
-            handleInvalid(e);
-        }} />
-
-    <Box>
-        <p class="u-bold">Share your feedback: why our self-hosted solution works better for you</p>
-        <p class="u-margin-block-start-8">
-            We appreciate your continued support and we understand that our self-hosted solution
-            might better fit your needs. To help us improve our Cloud solution, please share why it
-            works better for you. Your feedback is important to us and we'll use it to make our
-            services better.
-        </p>
-        <div class="u-margin-block-start-24">
-            <InputTextarea id="feedback" label="Your feedback" placeholder="Type here..." />
-        </div>
-    </Box>
-
-    <div class="u-flex u-gap-16 u-cross-center" slot="footer">
-        <span> You will be redirected to your self-hosted instance </span>
-
-        <Button submit>Continue</Button>
-    </div>
+    <Layout.Stack gap="l">
+        <Alert.Inline status="info">
+            <svelte:fragment slot="title">API key creation</svelte:fragment>
+            By initiating the transfer, an API key will be automatically generated in the background,
+            which you can delete after completion
+        </Alert.Inline>
+
+        <InputText
+            required
+            id="endpoint"
+            autofocus
+            bind:value={endpointUrl}
+            label="Endpoint self-hosted instance"
+            placeholder="https://<YOUR_APPWRITE_HOSTNAME>" />
+
+        <Box>
+            <Layout.Stack gap="xl">
+                <Typography.Text variant="m-600">
+                    Share your feedback: why our self-hosted solution works better for you
+                </Typography.Text>
+
+                We appreciate your continued support and we understand that our self-hosted solution
+                might better fit your needs. To help us improve our Cloud solution, please share why
+                it works better for you. Your feedback is important to us and we'll use it to make
+                our services better.
+
+                <InputTextarea id="feedback" label="Your feedback" placeholder="Type here..." />
+            </Layout.Stack>
+        </Box>
+    </Layout.Stack>
+
+    <Layout.Stack
+        direction="row"
+        gap="l"
+        alignItems="center"
+        justifyContent="flex-end"
+        slot="footer">
+        You will be redirected to your self-hosted instance
+
+        <Button
+            submit
+            forceShowLoader
+            submissionLoader={redirecting}
+            disabled={!isValidEndpoint(endpointUrl)}>
+            Continue
+        </Button>
+    </Layout.Stack>
 </Modal>