diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
index 09335b4923..7f39843445 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
@@ -98,7 +98,7 @@
                 <div class="u-flex u-gap-16">
                     <div class="u-cross-child-center u-line-height-1-5">
                         <h6 class="u-bold">{$platform.name}</h6>
-                        <p>{$platform.hostname}</p>
+                        <p>{$platform.hostname || $platform.key}</p>
                     </div>
                 </div>
             </Box>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index ac89f191a5..59e98a08b8 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -91,11 +91,11 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     });
 </script>
 
-<Wizard title="Add Android platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createAndroidPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            {#if !isPlatformCreated}
+<Wizard title="Add Android platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+    <Layout.Stack gap="xxl">
+        <!-- Step One -->
+        {#if !isPlatformCreated}
+            <Form onSubmit={createAndroidPlatform}>
                 <Fieldset legend="Details">
                     <Layout.Stack gap="l" alignItems="flex-end">
                         <Layout.Stack gap="s">
@@ -136,59 +136,59 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
                         </Button>
                     </Layout.Stack>
                 </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconAndroid} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
-                            </Layout.Stack>
+            </Form>
+        {:else}
+            <Layout.Stack gap="xxl">
+                <Card padding="s" radius="s">
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        gap="xs">
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <Icon size="m" icon={IconAndroid} />
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                {$createPlatform.name} ({$createPlatform.key})
+                            </Typography.Text>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
+                    </Layout.Stack>
+                </Card>
+            </Layout.Stack>
+        {/if}
 
-            <!-- Step Two -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or Android
-                            Studio.
-                        </Typography.Text>
+        <!-- Step Two -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or Android Studio.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
-                                size="s"
-                                code="data/repository/AppwriteRepository.kt" /> and update the configuration
-                            settings.</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode
+                            size="s"
+                            code="data/repository/AppwriteRepository.kt" /> and update the configuration
+                        settings.</Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="kotlin" lineNumbers code={updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="kotlin" lineNumbers code={updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or emulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
 
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or emulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 20a0f1c25b..8f342e1a2a 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -102,116 +102,120 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     });
 </script>
 
-<Wizard title="Add Apple platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createApplePlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Grid>
-
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder="My Apple App"
-                                required
-                                bind:value={$createPlatform.name} />
+<Wizard title="Add Apple platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createApplePlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
+                </Layout.Grid>
 
-                            <!-- Tooltips on InputText don't work as of now -->
-                            <InputText
-                                id="hostname"
-                                label="Bundle ID"
-                                placeholder="com.company.appname"
-                                required
-                                bind:value={$createPlatform.key}>
-                                <Tooltip slot="info" maxWidth="15rem">
-                                    <Icon icon={IconInfo} size="s" />
-                                    <Typography.Caption variant="400" slot="tooltip">
-                                        You can find your Bundle Identifier in the General tab for
-                                        your app's primary target in Xcode.
-                                    </Typography.Caption>
-                                </Tooltip>
-                            </InputText>
-                        </Layout.Stack>
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
+                                <InputText
+                                    id="name"
+                                    label="Name"
+                                    placeholder="My Apple App"
+                                    required
+                                    bind:value={$createPlatform.name} />
 
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                !$createPlatform.key ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconApple} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                <InputText
+                                    id="hostname"
+                                    label="Bundle ID"
+                                    placeholder="com.company.appname"
+                                    required
+                                    bind:value={$createPlatform.key}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            You can find your Bundle Identifier in the General tab
+                                            for your app's primary target in Xcode.
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
                             </Layout.Stack>
+
+                            <Button
+                                fullWidthMobile
+                                size="s"
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    !$createPlatform.key ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconApple} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.key})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Form>
 
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or XCode.
-                        </Typography.Text>
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or XCode.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and
-                            update the configuration settings.</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and update
+                        the configuration settings.</Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="plaintext" lineNumbers code={updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="plaintext" lineNumbers code={updateConfigCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 8d0aa74df9..ab916c8ac3 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -161,133 +161,137 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
     });
 </script>
 
-<Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createFlutterPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Grid>
-
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder={placeholder[platform].name}
-                                required
-                                bind:value={$createPlatform.name} />
+<Wizard title="Add Flutter platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createFlutterPlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
+                </Layout.Grid>
 
-                            <!-- Tooltips on InputText don't work as of now -->
-                            {#if platform === PlatformType.Flutterweb}
-                                <InputText
-                                    id="hostname"
-                                    label={hostname[platform]}
-                                    placeholder={placeholder[platform].hostname}
-                                    required
-                                    bind:value={$createPlatform.hostname}>
-                                    <Tooltip slot="info" maxWidth="15rem">
-                                        <Icon icon={IconInfo} size="s" />
-                                        <Typography.Caption variant="400" slot="tooltip">
-                                            {placeholder[platform].tooltip}
-                                        </Typography.Caption>
-                                    </Tooltip>
-                                </InputText>
-                            {:else}
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
                                 <InputText
-                                    id="key"
-                                    label={hostname[platform]}
-                                    placeholder={placeholder[platform].hostname}
+                                    id="name"
+                                    label="Name"
+                                    placeholder={placeholder[platform].name}
                                     required
-                                    bind:value={$createPlatform.key}>
-                                    <Tooltip slot="info" maxWidth="15rem">
-                                        <Icon icon={IconInfo} size="s" />
-                                        <Typography.Caption variant="400" slot="tooltip">
-                                            {placeholder[platform].tooltip}
-                                        </Typography.Caption>
-                                    </Tooltip>
-                                </InputText>
-                            {/if}
-                        </Layout.Stack>
+                                    bind:value={$createPlatform.name} />
 
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                (!$createPlatform.key && !$createPlatform.hostname) ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconFlutter} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                {#if platform === PlatformType.Flutterweb}
+                                    <InputText
+                                        id="hostname"
+                                        label={hostname[platform]}
+                                        placeholder={placeholder[platform].hostname}
+                                        required
+                                        bind:value={$createPlatform.hostname}>
+                                        <Tooltip slot="info" maxWidth="15rem">
+                                            <Icon icon={IconInfo} size="s" />
+                                            <Typography.Caption variant="400" slot="tooltip">
+                                                {placeholder[platform].tooltip}
+                                            </Typography.Caption>
+                                        </Tooltip>
+                                    </InputText>
+                                {:else}
+                                    <InputText
+                                        id="key"
+                                        label={hostname[platform]}
+                                        placeholder={placeholder[platform].hostname}
+                                        required
+                                        bind:value={$createPlatform.key}>
+                                        <Tooltip slot="info" maxWidth="15rem">
+                                            <Icon icon={IconInfo} size="s" />
+                                            <Typography.Caption variant="400" slot="tooltip">
+                                                {placeholder[platform].tooltip}
+                                            </Typography.Caption>
+                                        </Tooltip>
+                                    </InputText>
+                                {/if}
                             </Layout.Stack>
+
+                            <Button
+                                fullWidthMobile
+                                size="s"
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    (!$createPlatform.key && !$createPlatform.hostname) ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconFlutter} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.hostname ||
+                                            $createPlatform.key})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Form>
 
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal, Android Studio
-                            or VSCode.
-                        </Typography.Text>
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal, Android Studio or
+                        VSCode.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
-                                size="s"
-                                code="lib/constants/appwrite.dart" /> and update the configuration settings.</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.dart" />
+                        and update the configuration settings.</Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="dart" lineNumbers code={updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="dart" lineNumbers code={updateConfigCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index d8b01e0eb4..50d8904f6b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -129,116 +129,119 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
     });
 </script>
 
-<Wizard title="Add React Native platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createReactNativePlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Stack gap="l" direction="row">
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Stack>
-
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder={placeholder[platform].name}
-                                required
-                                bind:value={$createPlatform.name} />
+<Wizard title="Add React Native platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createReactNativePlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Stack gap="l" direction="row">
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
+                </Layout.Stack>
 
-                            <!-- Tooltips on InputText don't work as of now -->
-                            <InputText
-                                id="hostname"
-                                label={hostname[platform]}
-                                placeholder={placeholder[platform].hostname}
-                                required
-                                bind:value={$createPlatform.key}>
-                                <Tooltip slot="info" maxWidth="15rem">
-                                    <Icon icon={IconInfo} size="s" />
-                                    <Typography.Caption variant="400" slot="tooltip">
-                                        {placeholder[platform].tooltip}
-                                    </Typography.Caption>
-                                </Tooltip>
-                            </InputText>
-                        </Layout.Stack>
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
+                                <InputText
+                                    id="name"
+                                    label="Name"
+                                    placeholder={placeholder[platform].name}
+                                    required
+                                    bind:value={$createPlatform.name} />
 
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                !$createPlatform.key ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconReact} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                <InputText
+                                    id="hostname"
+                                    label={hostname[platform]}
+                                    placeholder={placeholder[platform].hostname}
+                                    required
+                                    bind:value={$createPlatform.key}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            {placeholder[platform].tooltip}
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
                             </Layout.Stack>
+
+                            <Button
+                                fullWidthMobile
+                                size="s"
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    !$createPlatform.key ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconReact} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.key})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+        </Form>
 
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
-                        </Typography.Text>
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or VSCode.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
-                                size="s"
-                                code="lib/constants/appwrite.js" /> and update the configuration settings.</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.js" /> and
+                        update the configuration settings.</Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="javascript" lineNumbers code={updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="javascript" lineNumbers code={updateConfigCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index bb675c7a9f..87d799d0af 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -199,155 +199,147 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     });
 </script>
 
-<Wizard title="Add web platform" bind:showExitModal>
-    <Form onSubmit={createWebPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            {#if !isPlatformCreated || isChangingFramework}
-                <Fieldset legend="Type">
-                    <Layout.Stack>
-                        <div class="frameworks">
-                            {#each frameworks as framework}
-                                <Card.Selector
-                                    bind:group={selectedFrameworkKey}
-                                    name="framework"
-                                    id={framework.key}
-                                    value={framework.key}
-                                    title={framework.label}
-                                    icon={framework.icon}
-                                    imageRadius="s" />
-                            {/each}
-                        </div>
+<Wizard title="Add web platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+    <Layout.Stack gap="xxl">
+        <!-- Step One -->
+        {#if !isPlatformCreated || isChangingFramework}
+            <Form onSubmit={createWebPlatform}>
+                <Layout.Stack>
+                    <Fieldset legend="Type">
+                        <Layout.Stack>
+                            <div class="frameworks">
+                                {#each frameworks as framework}
+                                    <Card.Selector
+                                        bind:group={selectedFrameworkKey}
+                                        name="framework"
+                                        id={framework.key}
+                                        value={framework.key}
+                                        title={framework.label}
+                                        icon={framework.icon}
+                                        imageRadius="s" />
+                                {/each}
+                            </div>
+                            <Layout.Stack direction="row" justifyContent="flex-end">
+                                {#if isChangingFramework}
+                                    <Button
+                                        disabled={!selectedFramework}
+                                        on:click={() => (isChangingFramework = false)}>
+                                        Save</Button>
+                                {/if}
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Fieldset>
+                    {#if !isChangingFramework}
+                        <Fieldset legend="Details">
+                            <InputText
+                                id="hostname"
+                                label="Hostname"
+                                placeholder="localhost"
+                                error={hostnameError && 'Please enter a valid hostname'}
+                                bind:value={hostname}>
+                                <Tooltip slot="info">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <span slot="tooltip">
+                                        The hostname that your website will use to interact with the
+                                        Appwrite APIs in production or development environments. No
+                                        protocol or port number required.
+                                    </span>
+                                </Tooltip>
+                            </InputText></Fieldset>
                         <Layout.Stack direction="row" justifyContent="flex-end">
-                            {#if isChangingFramework}
-                                <Button
-                                    disabled={!selectedFramework}
-                                    on:click={() => (isChangingFramework = false)}>
-                                    Save</Button>
-                            {/if}
+                            <Button submit disabled={!selectedFramework}>Create platform</Button>
                         </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Form>
+        {:else}
+            <Card.Base padding="s"
+                ><Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Layout.Stack gap="xxs" direction="row">
+                        <Icon icon={selectedFramework.smallIcon} />
+                        <Typography.Text variant="m-500">{selectedFramework.label}</Typography.Text>
                     </Layout.Stack>
-                </Fieldset>
-                {#if !isChangingFramework}
-                    <Fieldset legend="Details">
-                        <InputText
-                            id="hostname"
-                            label="Hostname"
-                            placeholder="localhost"
-                            error={hostnameError && 'Please enter a valid hostname'}
-                            bind:value={hostname}>
-                            <Tooltip slot="info">
-                                <Icon icon={IconInfo} size="s" />
-                                <span slot="tooltip">
-                                    The hostname that your website will use to interact with the
-                                    Appwrite APIs in production or development environments. No
-                                    protocol or port number required.
-                                </span>
-                            </Tooltip>
-                        </InputText></Fieldset>
-                    <Layout.Stack direction="row" justifyContent="flex-end"
-                        ><Button submit disabled={!selectedFramework}>Create platform</Button
-                        ></Layout.Stack>
-                {/if}
-            {:else}
-                <Card.Base padding="s"
-                    ><Layout.Stack
-                        direction="row"
-                        justifyContent="space-between"
-                        alignItems="center">
-                        <Layout.Stack gap="xxs" direction="row">
-                            <Icon icon={selectedFramework.smallIcon} />
-                            <Typography.Text variant="m-500"
-                                >{selectedFramework.label}</Typography.Text>
-                        </Layout.Stack>
-                        <Button
-                            size="s"
-                            secondary
-                            on:click={() => {
-                                isChangingFramework = true;
-                            }}>Change</Button>
-                    </Layout.Stack></Card.Base>
-            {/if}
+                    <Button
+                        size="s"
+                        secondary
+                        on:click={() => {
+                            isChangingFramework = true;
+                        }}>Change</Button>
+                </Layout.Stack></Card.Base>
+        {/if}
 
-            <!-- Step Three -->
-            {#if isPlatformCreated && !isChangingFramework}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
-                        </Typography.Text>
+        <!-- Step Three -->
+        {#if isPlatformCreated && !isChangingFramework}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or VSCode.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code
-                                lang="bash"
-                                lineNumbers
-                                code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for-${selectedFramework.key}`} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code
+                            lang="bash"
+                            lineNumbers
+                            code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for-${selectedFramework.key}`} />
+                    </div>
 
-                        {#if selectedFramework.key === 'angular'}
-                            <Typography.Text variant="m-500"
-                                >2. Change <InlineCode
-                                    size="s"
-                                    code="src/environments/environment.ts" />
-                                to reflect the values below:</Typography.Text>
-                        {:else}
-                            <Typography.Text variant="m-500"
-                                >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
-                                    size="s"
-                                    code=".env" /> and update the values.</Typography.Text>
-                        {/if}
+                    {#if selectedFramework.key === 'angular'}
+                        <Typography.Text variant="m-500"
+                            >2. Change <InlineCode
+                                size="s"
+                                code="src/environments/environment.ts" />
+                            to reflect the values below:</Typography.Text>
+                    {:else}
+                        <Typography.Text variant="m-500"
+                            >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
+                                size="s"
+                                code=".env" /> and update the values.</Typography.Text>
+                    {/if}
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code
-                                lang="bash"
-                                lineNumbers
-                                code={selectedFramework.updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={selectedFramework.updateConfigCode} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >3. Install project dependencies</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >3. Install project dependencies</Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={'npm install'} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={'npm install'} />
+                    </div>
 
-                        <Typography.Text variant="m-500"
-                            >4. Run the app, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
-                        </div>
-                    </Layout.Stack>
-                </Fieldset>
-                <Card.Base padding="s"
-                    ><Layout.Stack direction="row" justifyContent="space-between"
-                        ><Layout.Stack direction="row" alignItems="center">
-                            <Icon
-                                icon={IconInfo}
-                                color="--fgcolor-neutral-tertiary" /><Typography.Text
-                                variant="m-500"
-                                color="--fgcolor-neutral-primary">
-                                Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
-                            ></Layout.Stack>
-                        <Button
-                            external
-                            secondary
-                            href={`http://localhost:${selectedFramework.portNumber}`}
-                            ><Layout.Stack direction="row" gap="xs"
-                                >Open <Icon
-                                    icon={IconExternalLink}
-                                    color="--fgcolor-neutral-tertiary" /></Layout.Stack
-                            ></Button
-                        ></Layout.Stack
-                    ></Card.Base>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                    <Typography.Text variant="m-500"
+                        >4. Run the app, then click the <InlineCode size="s" code="Send a ping" /> button
+                        to verify the setup.</Typography.Text>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
+                    </div>
+                </Layout.Stack>
+            </Fieldset>
+            <Card.Base padding="s"
+                ><Layout.Stack direction="row" justifyContent="space-between"
+                    ><Layout.Stack direction="row" alignItems="center">
+                        <Icon icon={IconInfo} color="--fgcolor-neutral-tertiary" /><Typography.Text
+                            variant="m-500"
+                            color="--fgcolor-neutral-primary">
+                            Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
+                        ></Layout.Stack>
+                    <Button
+                        external
+                        secondary
+                        href={`http://localhost:${selectedFramework.portNumber}`}
+                        ><Layout.Stack direction="row" gap="xs"
+                            >Open <Icon
+                                icon={IconExternalLink}
+                                color="--fgcolor-neutral-tertiary" /></Layout.Stack
+                        ></Button
+                    ></Layout.Stack
+                ></Card.Base>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card.Base>
             <Layout.Stack gap="xxl">