diff --git a/package.json b/package.json
index 6d8fc0523..36c33c6fd 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21672e6e9..deb24fb6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@eeed8db}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1a93110d12e6db2cd24e6c4800a06613645859b6':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1a93110d12e6db2cd24e6c4800a06613645859b6}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aaddf2cd3c8d192642abb60a2704c2067724977c':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aaddf2cd3c8d192642abb60a2704c2067724977c}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4086,11 +4086,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@eeed8db': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1a93110d12e6db2cd24e6c4800a06613645859b6(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aaddf2cd3c8d192642abb60a2704c2067724977c(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4103,9 +4103,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@aaddf2c(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1a93110(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aaddf2cd3c8d192642abb60a2704c2067724977c(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1a93110d12e6db2cd24e6c4800a06613645859b6(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index c29986938..8f44d287f 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -8,7 +8,8 @@
         Typography,
         Badge,
         Spinner,
-        ProgressCircle
+        ProgressCircle,
+        Button
     } from '@appwrite.io/pink-svelte';
     import { addPlatform, continuePlatform } from './platforms/+page.svelte';
     import { app } from '$lib/stores/app';
@@ -97,27 +98,42 @@
                                             openPlatformWizard(0, platformMap.get('Web'));
                                         }}
                                         padding="s"
-                                        ><Layout.Stack gap="xl"
+                                        ><Layout.Stack
+                                            gap={platformMap.has('Web') ? 'm' : 'xl'}
+                                            height="100%"
+                                            justifyContent="space-between"
                                             ><div class="card-top-image web-image-light"></div>
                                             <div class="card-top-image web-image-dark"></div>
-                                            {#if !platformMap.has('Web')}
-                                                <Badge
-                                                    size="s"
-                                                    variant="secondary"
-                                                    content="In progress">
-                                                    <div slot="start">
-                                                        <ProgressCircle size="s" progress={33} />
-                                                    </div>
-                                                </Badge>
+                                            {#if platformMap.has('Web')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 4px 0 0">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
                                             {/if}
                                             <Layout.Stack
                                                 direction="row"
                                                 alignItems="center"
                                                 justifyContent="space-between">
                                                 <Typography.Title size="s">Web</Typography.Title>
-                                                <div class="arrow-icon">
-                                                    <Icon icon={IconArrowRight} size="s" />
-                                                </div>
+                                                {#if platformMap.has('Web')}<Button.Button size="xs"
+                                                        >Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}
                                             </Layout.Stack>
                                         </Layout.Stack></Card.Button>
                                     <Card.Button
@@ -125,20 +141,45 @@
                                             openPlatformWizard(4, platformMap.get('React Native'));
                                         }}
                                         padding="s"
-                                        ><Layout.Stack gap="xl"
-                                            ><div class="card-top-image reactnative-image-light">
+                                        ><Layout.Stack
+                                            gap={platformMap.has('React Native') ? 'm' : 'xl'}
+                                            height="100%"
+                                            justifyContent="space-between">
+                                            <div class="card-top-image reactnative-image-light">
                                             </div>
                                             <div class="card-top-image reactnative-image-dark">
                                             </div>
+                                            {#if platformMap.has('React Native')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 4px 0 0">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
                                             <Layout.Stack
                                                 direction="row"
                                                 alignItems="center"
                                                 justifyContent="space-between">
                                                 <Typography.Title size="s"
                                                     >React Native</Typography.Title>
-                                                <div class="arrow-icon">
-                                                    <Icon icon={IconArrowRight} size="s" />
-                                                </div>
+                                                {#if platformMap.has('React Native')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}
                                             </Layout.Stack>
                                         </Layout.Stack></Card.Button>
                                 </Layout.Stack>
@@ -150,21 +191,46 @@
                                             openPlatformWizard(3, platformMap.get('Apple'));
                                         }}
                                         padding="s">
-                                        <Layout.Stack gap="xxl">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Apple') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
                                             <img
                                                 class="platform-image"
                                                 src={$app.themeInUse === 'dark'
                                                     ? PlatformIosImgSourceDark
                                                     : PlatformIosImgSource}
                                                 alt="" />
+                                            {#if platformMap.has('Apple')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 4px 0 0">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
                                             <Layout.Stack
                                                 direction="row"
                                                 alignItems="center"
                                                 justifyContent="space-between">
                                                 <Typography.Title size="s">Apple</Typography.Title>
-                                                <div class="arrow-icon">
-                                                    <Icon icon={IconArrowRight} size="s" />
-                                                </div></Layout.Stack>
+                                                {#if platformMap.has('Apple')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
                                         </Layout.Stack>
                                     </Card.Button>
                                     <Card.Button
@@ -172,22 +238,47 @@
                                             openPlatformWizard(2, platformMap.get('Android'));
                                         }}
                                         padding="s">
-                                        <Layout.Stack gap="xxl">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Android') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
                                             <img
                                                 class="platform-image"
                                                 src={$app.themeInUse === 'dark'
                                                     ? PlatformAndroidImgSourceDark
                                                     : PlatformAndroidImgSource}
                                                 alt="" />
+                                            {#if platformMap.has('Android')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 4px 0 0">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
                                             <Layout.Stack
                                                 direction="row"
                                                 alignItems="center"
                                                 justifyContent="space-between">
                                                 <Typography.Title size="s"
                                                     >Android</Typography.Title>
-                                                <div class="arrow-icon">
-                                                    <Icon icon={IconArrowRight} size="s" />
-                                                </div></Layout.Stack>
+                                                {#if platformMap.has('Android')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
                                         </Layout.Stack>
                                     </Card.Button>
                                     <Card.Button
@@ -195,22 +286,47 @@
                                             openPlatformWizard(1, platformMap.get('Flutter'));
                                         }}
                                         padding="s">
-                                        <Layout.Stack gap="xxl">
+                                        <Layout.Stack
+                                            gap={platformMap.has('Flutter') ? 's' : 'xxl'}
+                                            height="100%"
+                                            justifyContent="space-between">
                                             <img
                                                 class="platform-image"
                                                 src={$app.themeInUse === 'dark'
                                                     ? PlatformFlutterImgSourceDark
                                                     : PlatformFlutterImgSource}
                                                 alt="" />
+                                            {#if platformMap.has('Flutter')}
+                                                <Layout.Stack alignItems="flex-start">
+                                                    <Badge
+                                                        size="s"
+                                                        variant="secondary"
+                                                        content="In progress">
+                                                        <div
+                                                            slot="start"
+                                                            style:margin="-4px 4px 0 0">
+                                                            <ProgressCircle
+                                                                size="xs"
+                                                                showAnimation={false}
+                                                                backgroundStrokeColor="--progress-background-color"
+                                                                progress={33} />
+                                                        </div>
+                                                    </Badge>
+                                                </Layout.Stack>
+                                            {/if}
                                             <Layout.Stack
                                                 direction="row"
                                                 alignItems="center"
                                                 justifyContent="space-between">
                                                 <Typography.Title size="s"
                                                     >Flutter</Typography.Title>
-                                                <div class="arrow-icon">
-                                                    <Icon icon={IconArrowRight} size="s" />
-                                                </div></Layout.Stack>
+                                                {#if platformMap.has('Flutter')}<Button.Button
+                                                        size="xs">Continue</Button.Button
+                                                    >{:else}
+                                                    <div class="arrow-icon">
+                                                        <Icon icon={IconArrowRight} size="s" />
+                                                    </div>
+                                                {/if}</Layout.Stack>
                                         </Layout.Stack>
                                     </Card.Button>
                                 </Layout.Stack>
@@ -403,6 +519,7 @@
     @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     :global(.theme-light) {
+        --progress-background-color: var(--neutral-200);
         .web-image-dark,
         .reactnative-image-dark {
             display: none;
@@ -410,6 +527,7 @@
     }
 
     :global(.theme-dark) {
+        --progress-background-color: var(--neutral-600);
         .web-image-light,
         .reactnative-image-light {
             display: none;