diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte b/src/routes/(console)/project-[project]/overview/platforms/(components)/ConnectionLine.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
rename to src/routes/(console)/project-[project]/overview/platforms/(components)/ConnectionLine.svelte
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte b/src/routes/(console)/project-[project]/overview/platforms/(components)/OnboardingPlatformCard.svelte
similarity index 78%
rename from src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
rename to src/routes/(console)/project-[project]/overview/platforms/(components)/OnboardingPlatformCard.svelte
index 126a08b6e2..27e5349614 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/(components)/OnboardingPlatformCard.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
     import type { ComponentType } from 'svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let icon: ComponentType;
     export let iconSize: number | undefined = undefined;
     export let iconColor: string | undefined = undefined;
+
+    let usableIconColor = `--icon-color, ${iconColor}`;
 </script>
 
 <div class="outer-card">
-    <div
-        class="inner-card"
-        style="
-            --icon-color: {iconColor || 'inherit'};
-            --icon-size: {iconSize ? `${iconSize}rem` : 'inherit'};
-        ">
-        <svelte:component this={icon} />
+    <div class="inner-card" style="--icon-size: {iconSize ? `${iconSize}rem` : 'inherit'};">
+        <!-- custom size; the icon has a cap at 24px -->
+        <Icon {icon} color={usableIconColor} />
     </div>
 </div>
 
@@ -43,10 +42,10 @@
         border: 0.54px solid #ededf0;
         box-shadow: 0 6.736px 6.736px 0 rgba(0, 0, 0, 0.05);
 
-        & :global(svg) {
+        // targeting `i` or `svg` doesn't seem to help.
+        & :global(*) {
             width: var(--icon-size);
             height: var(--icon-size);
-            color: var(--icon-color);
         }
     }
 
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 928d56810d..d40f8c8968 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import ConnectionLine from './components/ConnectionLine.svelte';
-    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from './(components)/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './(components)/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
 
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 011435d210..0d89c54bb6 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import ConnectionLine from './components/ConnectionLine.svelte';
-    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from './(components)/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './(components)/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import { app } from '$lib/stores/app';
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index adbd189a98..b6c56023e7 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import ConnectionLine from './components/ConnectionLine.svelte';
-    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from './(components)/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './(components)/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import { LabelCard } from '$lib/components';
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 325b6b3c5d..774937099d 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import ConnectionLine from './components/ConnectionLine.svelte';
-    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from './(components)/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './(components)/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import { LabelCard } from '$lib/components';