diff --git a/package-lock.json b/package-lock.json
index 8d3ccccef..6f31fe939 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-61",
-                "@aw-labs/ui": "0.0.0-61",
+                "@aw-labs/icons": "0.0.0-63",
+                "@aw-labs/ui": "0.0.0-63",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -37,7 +37,7 @@
                 "prettier": "^2.7.1",
                 "prettier-plugin-svelte": "^2.8.0",
                 "sass": "^1.55.0",
-                "svelte": "^3.51.0",
+                "svelte": "^3.52.0",
                 "svelte-check": "^2.9.2",
                 "svelte-jester": "^2.3.2",
                 "svelte-preprocess": "^4.10.7",
@@ -79,14 +79,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
+            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-63.tgz",
+            "integrity": "sha512-+lNFpbMBT/AU2sVefN6gmBJE06Z1L93iqpr6B4Xl8T5YxDwrAeoxjTB5I50vVhughN/JkYxTJd+rMOCSOfh/DQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -6989,9 +6989,9 @@
             }
         },
         "node_modules/svelte": {
-            "version": "3.51.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.51.0.tgz",
-            "integrity": "sha512-PBITYIrsNOuW+Dtds00gSY68raNZQn7i59Dg/fjgf6WwyawPKeBwle692coO7ILZqSO+UJe9899aDn9sMdeOHA==",
+            "version": "3.52.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+            "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==",
             "dev": true,
             "engines": {
                 "node": ">= 8"
@@ -7789,14 +7789,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
+            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-63.tgz",
+            "integrity": "sha512-+lNFpbMBT/AU2sVefN6gmBJE06Z1L93iqpr6B4Xl8T5YxDwrAeoxjTB5I50vVhughN/JkYxTJd+rMOCSOfh/DQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -12991,9 +12991,9 @@
             "dev": true
         },
         "svelte": {
-            "version": "3.51.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.51.0.tgz",
-            "integrity": "sha512-PBITYIrsNOuW+Dtds00gSY68raNZQn7i59Dg/fjgf6WwyawPKeBwle692coO7ILZqSO+UJe9899aDn9sMdeOHA==",
+            "version": "3.52.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+            "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==",
             "dev": true
         },
         "svelte-check": {
diff --git a/package.json b/package.json
index 073636ab4..1a46b84ec 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-61",
-        "@aw-labs/ui": "0.0.0-61",
+        "@aw-labs/icons": "0.0.0-63",
+        "@aw-labs/ui": "0.0.0-63",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
@@ -47,7 +47,7 @@
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.8.0",
         "sass": "^1.55.0",
-        "svelte": "^3.51.0",
+        "svelte": "^3.52.0",
         "svelte-check": "^2.9.2",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 6f1257529..1644926ec 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -4,49 +4,66 @@
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
     import 'prismjs/components/prism-json';
+    import 'prismjs/components/prism-bash';
+    import 'prismjs/components/prism-yaml';
+    import 'prismjs/components/prism-swift';
     import 'prismjs/plugins/autoloader/prism-autoloader';
+    import 'prismjs/plugins/custom-class/prism-custom-class';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
     import { afterUpdate } from 'svelte';
     import { Copy } from '.';
 
     export let label: string = null;
+    export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json';
-    export let showLineNumbers = false;
-    export let showCopy = false;
+    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
+    export let withLineNumbers = false;
+    export let withCopy = false;
+
+    Prism.plugins.customClass.prefix('prism-');
 
     afterUpdate(async () => {
         Prism.highlightAll();
     });
 </script>
 
-<div class="code">
-    <div class="controls">
+<section class="box u-overflow-hidden common-section">
+    <div
+        class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
-            <Pill>{label}</Pill>
+            <Pill>
+                {#if labelIcon}
+                    <span class={`icon-${labelIcon}`} aria-hidden="true" />
+                {/if}
+                {label}
+            </Pill>
         {/if}
-        {#if showCopy}
+        {#if withCopy}
             <Copy value={code}>
-                <span class="icon-duplicate" aria-hidden="true" style="cursor: pointer;" />
+                <button class="button is-small is-text is-only-icon" aria-label="copy code">
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </button>
             </Copy>
         {/if}
     </div>
-    <pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
+
+    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
             >{code}</code></pre>
-</div>
+</section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
-    div.code {
-        position: relative;
+    .box {
+        --p-box-background-color: var(--color-neutral-300) !important;
 
-        div.controls {
-            position: absolute;
-            right: 0.5rem;
-            top: 0.5rem;
-            z-index: 1;
+        body.theme-light & {
+            --p-box-background-color: var(--color-neutral-5) !important;
+        }
+
+        .controls {
+            z-index: 2;
         }
     }
 
@@ -56,6 +73,10 @@
             color: #fcfcff;
             text-shadow: none;
             font-family: 'Source Code Pro';
+
+            &.line-numbers {
+                padding-left: 2.5em;
+            }
             body.theme-light & {
                 color: #373b4d;
             }
@@ -77,49 +98,48 @@
 
     :not(pre) > code[class*='language-'],
     pre[class*='language-'] {
-        background: #1b1b28;
-        body.theme-light & {
-            background: #fcfcff;
-        }
+        background: hsl(var(--p-box-background-color));
+        padding: 0;
+        margin: 0;
     }
-    .token {
-        &.comment,
-        &.prolog,
-        &.doctype,
-        &.cdata {
+    .prism-token {
+        &.prism-comment,
+        &.prism-prolog,
+        &.prism-doctype,
+        &.prism-cdata {
             color: #868ea3;
         }
 
-        &.punctuation {
+        &.prism-punctuation {
             color: #fcfcff;
 
             body.theme-light & {
                 color: #373b4d;
             }
         }
-        &.property,
-        &.tag,
-        &.boolean,
-        &.number,
-        &.constant,
-        &.symbol,
-        &.deleted,
-        &.selector,
-        &.attr-name,
-        &.string,
-        &.char,
-        &.builtin,
-        &.inserted {
+        &.prism-property,
+        &.prism-tag,
+        &.prism-boolean,
+        &.prism-number,
+        &.prism-constant,
+        &.prism-symbol,
+        &.prism-deleted,
+        &.prism-selector,
+        &.prism-attr-name,
+        &.prism-string,
+        &.prism-char,
+        &.prism-builtin,
+        &.prism-inserted {
             color: #fdc584;
             body.theme-light & {
                 color: #e49545;
             }
         }
-        &.operator,
-        &.entity,
-        &.url,
-        .language-css &.string,
-        .style &.string {
+        &.prism-operator,
+        &.prism-entity,
+        &.prism-url,
+        .language-css &.prism-string,
+        .style &.prism-string {
             color: #fcfcff;
             background: none;
             body.theme-light & {
@@ -127,29 +147,29 @@
             }
         }
 
-        &.atrule,
-        &.attr-value,
-        &.keyword {
+        &.prism-atrule,
+        &.prism-attr-value,
+        &.prism-keyword {
             color: #cbb1fc;
             body.theme-light & {
                 color: #6a6af7;
             }
         }
-        &.function {
+        &.prism-function {
             color: #ffa1ce;
             body.theme-light & {
                 color: #f02e7f;
             }
         }
-        &.class-name {
+        &.prism-class-name {
             color: #a1c4ff;
             body.theme-light & {
                 color: #62aed2;
             }
         }
-        &.regex,
-        &.important,
-        &.variable {
+        &.prism-regex,
+        &.prism-important,
+        &.prism-variable {
             color: #a1c4ff;
             body.theme-light & {
                 color: #62aed2;
diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
index 47d8326f5..4286cdb6e 100644
--- a/src/lib/components/json.svelte
+++ b/src/lib/components/json.svelte
@@ -4,4 +4,4 @@
     export let code: string;
 </script>
 
-<Code showLineNumbers showCopy language="json" {code} />
+<Code withLineNumbers withCopy language="json" {code} />
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 3caa09654..c06e308f0 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -28,7 +28,7 @@
             {:else}
                 <div class="bullet" class:is-current={current} />
             {/if}
-            <div class="step-item-content">
+            <div class="steps-item-content">
                 <span class="text">{step.text}</span>
                 {#if step?.substeps}
                     <ul class="steps-sub">
diff --git a/src/lib/elements/forms/formList.svelte b/src/lib/elements/forms/formList.svelte
index cdb4bd69b..7a02bc5be 100644
--- a/src/lib/elements/forms/formList.svelte
+++ b/src/lib/elements/forms/formList.svelte
@@ -1,3 +1,7 @@
-<ul class="form-list">
+<script lang="ts">
+    export let isCommonSection = false;
+</script>
+
+<ul class="form-list" class:common-section={isCommonSection}>
     <slot />
 </ul>
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 24579831c..23f83e399 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -2,13 +2,21 @@
     <div class="container">
         <ul class="inline-links is-center">
             <li class="inline-links-item">
-                <a class="link" href="https://github.com/appwrite/appwrite" target="_blank">
+                <a
+                    class="link"
+                    href="https://github.com/appwrite/appwrite"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="icon-github-circled" aria-hidden="true" />
                     <span class="text">GitHub</span>
                 </a>
             </li>
             <li class="inline-links-item">
-                <a class="link" href="https://appwrite.io/discord" target="_blank">
+                <a
+                    class="link"
+                    href="https://appwrite.io/discord"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="icon-discord" aria-hidden="true" />
                     <span class="text">Discord</span>
                 </a>
@@ -17,12 +25,17 @@
                 <a
                     class="link"
                     href="https://github.com/appwrite/appwrite/issues/new"
-                    target="_blank">
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="text">Open an Issue</span>
                 </a>
             </li>
             <li class="inline-links-item">
-                <a class="link" href="https://appwrite.io/docs" target="_blank">
+                <a
+                    class="link"
+                    href="https://appwrite.io/docs"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="text">Docs</span>
                 </a>
             </li>
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index a6d6e9c7b..877283cc1 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -13,7 +13,7 @@
     class="alert-sticky"
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
-    class:is-error={type === 'error'}
+    class:is-danger={type === 'error'}
     class:is-info={type === 'info'}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 53be0048a..ee46327de 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -113,8 +113,8 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if sortedSteps[currentStep - 1][1].optional}
-                        <Button text on:click={() => (isLastStep = true)} submit
+                    {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
+                        <Button text on:click={() => dispatch('finish')}
                             >Skip optional steps</Button>
                     {/if}
                     {#if currentStep === 1}
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 34eafdce0..33c12edca 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,23 +1,63 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { GridItem1 } from '$lib/components';
+    import { DropList, DropListItem, GridItem1 } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { wizard } from '$lib/stores/wizard';
     import { project } from '../../store';
-    import Create from './create.svelte';
-
-    let show = false;
+    import CreateAndroid from './createAndroid.svelte';
+    import CreateApple from './createApple.svelte';
+    import CreateFlutter from './createFlutter.svelte';
+    import CreateWeb from './createWeb.svelte';
+    import { versions } from './wizard/store';
 
+    let showDropdown = false;
     const path = `/console/project-${$page.params.project}/overview/platforms`;
+
+    enum Platform {
+        Web,
+        Flutter,
+        Android,
+        Apple
+    }
+
+    const platforms = {
+        [Platform.Web]: CreateWeb,
+        [Platform.Flutter]: CreateFlutter,
+        [Platform.Android]: CreateAndroid,
+        [Platform.Apple]: CreateApple
+    };
+
+    async function addPlatform(type: Platform) {
+        await versions.load();
+        wizard.start(platforms[type]);
+    }
 </script>
 
 <div class="common-section u-flex u-gap-12">
     <h3 class="heading-level-7">Platforms</h3>
     <span class="u-margin-inline-start-auto">
-        <Button on:click={() => (show = true)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add Platform</span>
-        </Button>
+        <DropList
+            bind:show={showDropdown}
+            position="bottom"
+            horizontal="right"
+            arrow={true}
+            arrowPosition="start">
+            <Button on:click={() => (showDropdown = !showDropdown)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Add platform</span>
+            </Button>
+            <svelte:fragment slot="list">
+                <DropListItem on:click={() => addPlatform(Platform.Web)}>Web App</DropListItem>
+                <DropListItem on:click={() => addPlatform(Platform.Flutter)}>
+                    Flutter App
+                </DropListItem>
+                <DropListItem on:click={() => addPlatform(Platform.Android)}>
+                    Android App
+                </DropListItem>
+                <DropListItem on:click={() => addPlatform(Platform.Apple)}>Apple App</DropListItem>
+            </svelte:fragment>
+        </DropList>
     </span>
 </div>
 
@@ -25,7 +65,6 @@
     {#each $project.platforms as platform}
         <GridItem1 href={`${path}/${platform.$id}`}>
             <svelte:fragment slot="title">{platform.name}</svelte:fragment>
-
             <div class="grid-item-1-end-start">
                 <p>Last Updated</p>
                 <p>{toLocaleDateTime(platform.$updatedAt)}</p>
@@ -33,5 +72,3 @@
         </GridItem1>
     {/each}
 </div>
-
-<Create bind:show />
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
index d1bb5d3b4..14c384daf 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -19,8 +19,8 @@
                 message: `${$platform.name} has been deleted`
             });
             project.load($project.$id);
-            platform.set(null);
             await goto(`${base}/console/project-${$project.$id}/overview/platforms`);
+            platform.set(null);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/overview/platforms/create.svelte b/src/routes/console/project-[project]/overview/platforms/create.svelte
deleted file mode 100644
index 11c0597f8..000000000
--- a/src/routes/console/project-[project]/overview/platforms/create.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../../.../../store';
-
-    export let show = false;
-
-    let name: string;
-    let hostname: string;
-
-    async function create() {
-        try {
-            await sdkForConsole.projects.createPlatform(
-                $project.$id,
-                'web',
-                name,
-                undefined,
-                undefined,
-                hostname
-            );
-            name = hostname = null;
-            project.load($project.$id);
-            show = false;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    }
-</script>
-
-<Form on:submit={create}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Add Platform</svelte:fragment>
-        <FormList>
-            <InputText id="name" label="Name" bind:value={name} autofocus required />
-            <InputText id="host" label="Hostname" bind:value={hostname} required />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button submit>Register</Button>
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
new file mode 100644
index 000000000..d2bc06936
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/android/step1.svelte';
+    import Step2 from './wizard/android/step2.svelte';
+    import Step3 from './wizard/android/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        createPlatform.reset();
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2,
+        optional: true
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3,
+        optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4,
+        optional: true
+    });
+</script>
+
+<Wizard
+    title="Add an Android Project"
+    steps={stepsComponents}
+    on:finish={create}
+    on:exit={createPlatform.reset}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
new file mode 100644
index 000000000..6a08eff4c
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/apple/step1.svelte';
+    import Step2 from './wizard/apple/step2.svelte';
+    import Step3 from './wizard/apple/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        createPlatform.reset();
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2,
+        optional: true
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3,
+        optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4,
+        optional: true
+    });
+</script>
+
+<Wizard
+    title="Add an Apple Project"
+    steps={stepsComponents}
+    on:finish={create}
+    on:exit={createPlatform.reset}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
new file mode 100644
index 000000000..c243b7bcd
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/flutter/step1.svelte';
+    import Step2 from './wizard/flutter/step2.svelte';
+    import Step3 from './wizard/flutter/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        createPlatform.reset();
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2,
+        optional: true
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3,
+        optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4,
+        optional: true
+    });
+</script>
+
+<Wizard
+    title="Add a Flutter Project"
+    steps={stepsComponents}
+    on:finish={create}
+    on:exit={createPlatform.reset}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
new file mode 100644
index 000000000..1b2aebfe5
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/web/step1.svelte';
+    import Step2 from './wizard/web/step2.svelte';
+    import Step3 from './wizard/web/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        createPlatform.reset();
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2,
+        optional: true
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3,
+        optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4,
+        optional: true
+    });
+</script>
+
+<Wizard
+    title="Add a Web Project"
+    steps={stepsComponents}
+    on:finish={create}
+    on:exit={createPlatform.reset}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
new file mode 100644
index 000000000..28988253a
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    const projectId = $page.params.project;
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const platform = await sdkForConsole.projects.createPlatform(
+            projectId,
+            'android',
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = platform.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Android app</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="My Android App"
+            required
+            bind:value={$createPlatform.name} />
+        <InputText
+            id="hostname"
+            label="Package Name"
+            placeholder="com.company.appname"
+            required
+            bind:value={$createPlatform.hostname} />
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
new file mode 100644
index 000000000..a84c90cc3
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { versions } from '../store';
+
+    const example1 = `repositories {
+    mavenCentral()
+}`;
+    const example2 = `implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <p>First, add this to your root level build.gradle file:</p>
+    <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
+    <p class="common-section">And add this to your project's build.gradle file:</p>
+    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
new file mode 100644
index 000000000..e13329c53
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `const appwrite = new Appwrite();
+
+appwrite
+    .setEndpoint('${endpoint}')
+    .setProject('${project}');`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
new file mode 100644
index 000000000..7478cd44f
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Alert } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormItem, FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    enum Platform {
+        iOS = 'apple-ios',
+        macOS = 'apple-macos',
+        watchOS = 'apple-watchos',
+        tvOS = 'apple-tvos'
+    }
+
+    let platform: Platform = Platform.iOS;
+
+    const projectId = $page.params.project;
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const response = await sdkForConsole.projects.createPlatform(
+            projectId,
+            platform,
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = response.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <Alert type="warning">
+        Note: If you are building your Flutter application for multiple devices, you will have to
+        follow this process for each different device.
+    </Alert>
+
+    <FormList isCommonSection>
+        <FormItem>
+            <p>Choose a platform</p>
+            <div class="u-flex u-gap-16 u-margin-block-start-8">
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.iOS)}
+                    selected={platform === Platform.iOS}>
+                    iOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.macOS)}
+                    selected={platform === Platform.macOS}>
+                    macOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.watchOS)}
+                    selected={platform === Platform.watchOS}>
+                    watchOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.tvOS)}
+                    selected={platform === Platform.tvOS}>
+                    tvOS
+                </Pill>
+            </div>
+        </FormItem>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="My Apple App"
+            required
+            bind:value={$createPlatform.name} />
+        <InputText
+            id="hostname"
+            label="Bundle ID"
+            placeholder="com.company.appname"
+            required
+            bind:value={$createPlatform.hostname} />
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
new file mode 100644
index 000000000..2be3f3c62
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { WizardStep } from '$lib/layout';
+    import { versions } from '../store';
+
+    enum Method {
+        Xcode,
+        Swift
+    }
+
+    let method: Method = Method.Xcode;
+
+    const example1 = `dependencies: [
+    .package(
+        name: "Appwrite",
+        url: "https://github.com/appwrite/sdk-for-swift",
+        .exact("${$versions['client-apple']}")
+    )
+]')`;
+    const example2 = `targets: [
+    .target(
+        name: "[YOUR_TARGET]",
+        dependencies: [
+            "Appwrite"
+        ]
+    )
+]`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <div class="u-flex u-gap-16 u-margin-block-start-8">
+        <Pill button on:click={() => (method = Method.Xcode)} selected={method === Method.Xcode}>
+            Xcode
+        </Pill>
+        <Pill button on:click={() => (method = Method.Swift)} selected={method === Method.Swift}>
+            Swift Packages
+        </Pill>
+    </div>
+    <div class="common-section">
+        {#if method === Method.Xcode}
+            <ol class="numeric-list">
+                <li class="numeric-list-item">
+                    <span class="text">
+                        Select File > Swift Packages > Add Package Dependency
+                    </span>
+                </li>
+                <li class="numeric-list-item">
+                    <span class="text">
+                        Search for the Appwrite SDK with the URL
+                        <a class="link" href="https://github.com/appwrite/sdk-for-apple">
+                            https://github.com/appwrite/sdk-for-apple
+                        </a>
+                    </span>
+                </li>
+                <li class="numeric-list-item">
+                    <span class="text"> Add version rules </span>
+                </li>
+                <li class="numeric-list-item">
+                    <span class="text">
+                        Select next and wait for package resolution to complete
+                    </span>
+                </li>
+                <li class="numeric-list-item">
+                    <span class="text">
+                        Make sure `Appwrite` is selected to add to your target and select finish
+                    </span>
+                </li>
+            </ol>
+        {:else if method === Method.Swift}
+            <p>Add this to your Package.swift file:</p>
+            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
+            <p class="common-section">Then add the dependency to your target:</p>
+            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
+        {/if}
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
new file mode 100644
index 000000000..fe5be13fc
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Alert, Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `import Appwrite
+
+let client = Client()
+    .setEndpoint("${endpoint}")
+    .setProject("${project}")
+    .setSelfSigned(status: true) // For self signed certificates, only use for development`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
+    <p>
+        Before sending any API calls to your new Appwrite project, make sure your device or emulator
+        has network access to your Appwrite project's hostname or IP address.
+    </p>
+    <div class="common-section">
+        <Alert type="info">
+            <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
+            When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
+            you should use the private IP of the device running your Appwrite project as the hostname
+            of the endpoint instead of localhost. You can also use a service like ngrok to proxy the
+            Appwrite server.
+        </Alert>
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
new file mode 100644
index 000000000..ea514878e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Alert } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    enum Platform {
+        Android = 'flutter-android',
+        Ios = 'flutter-ios',
+        Linux = 'flutter-linux',
+        Macos = 'flutter-macos',
+        Windows = 'flutter-windows',
+        Web = 'flutter-web'
+    }
+
+    let platform: Platform = Platform.Android;
+
+    const projectId = $page.params.project;
+    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
+    const placeholder: Record<
+        Platform,
+        {
+            name: string;
+            hostname: string;
+        }
+    > = {
+        [Platform.Android]: {
+            name: 'My Android App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Ios]: {
+            name: 'My iOS App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Linux]: {
+            name: 'My Linux App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Macos]: {
+            name: 'My mac OS App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Web]: {
+            name: 'My Web App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Windows]: {
+            name: 'My Windows App',
+            hostname: 'localhost'
+        }
+    };
+
+    const hostname: Record<Platform, string> = {
+        [Platform.Android]: 'Package Name',
+        [Platform.Ios]: 'Package Name',
+        [Platform.Linux]: 'Package Name',
+        [Platform.Macos]: 'Bundle ID',
+        [Platform.Web]: 'Hostname',
+        [Platform.Windows]: 'Package Name'
+    };
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const response = await sdkForConsole.projects.createPlatform(
+            projectId,
+            platform,
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = response.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        <div class="u-flex u-gap-16 u-margin-block-start-8">
+            <Pill
+                button
+                on:click={() => (platform = Platform.Android)}
+                selected={platform === Platform.Android}>
+                Android
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Ios)}
+                selected={platform === Platform.Ios}>
+                iOS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Linux)}
+                selected={platform === Platform.Linux}>
+                Linux
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Macos)}
+                selected={platform === Platform.Macos}>
+                Mac OS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Windows)}
+                selected={platform === Platform.Windows}>
+                Windows
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Web)}
+                selected={platform === Platform.Web}>
+                Web
+            </Pill>
+        </div>
+    </svelte:fragment>
+    <Alert type="warning">
+        Note: If you are building your Flutter application for multiple devices, you will have to
+        follow this process for each different device.
+    </Alert>
+
+    <FormList isCommonSection>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder={placeholder[platform].name}
+            required
+            bind:value={$createPlatform.name} />
+        <div>
+            <InputText
+                id="hostname"
+                label={hostname[platform]}
+                placeholder={placeholder[platform].hostname}
+                required
+                bind:value={$createPlatform.hostname} />
+            {#if platform === Platform.Web}
+                <div class="u-flex u-gap-16 u-margin-block-start-8">
+                    {#each suggestions as suggestion}
+                        <Pill
+                            button
+                            selected={$createPlatform.hostname === suggestion}
+                            on:click={() => ($createPlatform.hostname = suggestion)}>
+                            {suggestion}
+                        </Pill>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
new file mode 100644
index 000000000..7d7dc3551
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { versions } from '../store';
+
+    const example1 = `dependencies:
+  appwrite: ^${$versions['client-flutter']}`;
+    const example2 = `pub get appwrite`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+
+    <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
+    <Code label="YAML" language="yml" code={example1} withCopy />
+    <p class="common-section">
+        You can also install the SDK using the Dart package manager from your terminal:
+    </p>
+    <Code label="Bash" language="sh" code={example2} withCopy />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
new file mode 100644
index 000000000..6f46f657d
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Alert, Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `import 'package:appwrite/appwrite.dart';
+
+Client client = Client();
+client
+    .setEndpoint('${endpoint}')
+    .setProject('${project}')
+    .setSelfSigned(status: true); // For self signed certificates, only use for development`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
+    <p class="common-section">
+        Before sending any API calls to your new Appwrite project, make sure your device or emulator
+        has network access to your Appwrite project's hostname or IP address.
+    </p>
+    <div class="common-section">
+        <Alert type="info">
+            <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
+            When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
+            you should use the private IP of the device running your Appwrite project as the hostname
+            of the endpoint instead of localhost. You can also use a service like ngrok to proxy the
+            Appwrite server.
+        </Alert>
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
new file mode 100644
index 000000000..c6cbb6d17
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
+    <p>
+        Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
+        give it a go? Why not add a database to your project, or start uploading files? The choice
+        is up to you.
+    </p>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
new file mode 100644
index 000000000..7eb9e8b5e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
@@ -0,0 +1,60 @@
+import { writable } from 'svelte/store';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { cachedStore } from '$lib/helpers/cache';
+import type { Models } from '@aw-labs/appwrite-console';
+
+function createPlatformStore() {
+    const { subscribe, update, set } = writable<Partial<Models.Platform>>({
+        $id: null,
+        name: null,
+        hostname: null,
+        type: null
+    });
+
+    return {
+        subscribe,
+        update,
+        set,
+        reset() {
+            set({
+                $id: null,
+                name: null,
+                hostname: null,
+                type: null
+            });
+        }
+    };
+}
+
+export const createPlatform = createPlatformStore();
+
+export const versions = cachedStore<
+    {
+        server: string;
+        'client-web': string;
+        'client-flutter': string;
+        'client-apple': string;
+        'client-android': string;
+        'console-web': string;
+        'console-cli': string;
+        'server-nodejs': string;
+        'server-deno': string;
+        'server-php': string;
+        'server-python': string;
+        'server-ruby': string;
+        'server-dart': string;
+        'server-kotlin': string;
+        'server-swift': string;
+    },
+    {
+        load: () => Promise<void>;
+    }
+>('versions', function ({ set }) {
+    return {
+        load: async () => {
+            const { endpoint } = sdkForConsole.client.config;
+            const response = await fetch(`${endpoint}/../versions`);
+            set(await response.json());
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
new file mode 100644
index 000000000..b2a807690
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Alert } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    const projectId = $page.params.project;
+    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const platform = await sdkForConsole.projects.createPlatform(
+            projectId,
+            'web',
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = platform.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Web app</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="My Web App"
+            required
+            bind:value={$createPlatform.name} />
+        <div>
+            <InputText
+                id="hostname"
+                label="Hostname"
+                placeholder="localhost"
+                required
+                bind:value={$createPlatform.hostname} />
+            <div class="u-flex u-gap-16 u-margin-block-start-8">
+                {#each suggestions as suggestion}
+                    <Pill
+                        button
+                        selected={$createPlatform.hostname === suggestion}
+                        on:click={() => ($createPlatform.hostname = suggestion)}>
+                        {suggestion}
+                    </Pill>
+                {/each}
+            </div>
+        </div>
+        <Alert type="warning">
+            Tip: Avoid using wildcard hostnames in production to keep your project secure. Check out
+            our documentation for more info.
+        </Alert>
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
new file mode 100644
index 000000000..b5222156f
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { versions } from '../store';
+
+    import { Code } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { WizardStep } from '$lib/layout';
+
+    enum Method {
+        NPM,
+        CDN
+    }
+
+    let method: Method = Method.NPM;
+
+    const example1 = `import { Appwrite } from 'appwrite';`;
+    const example2 = `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}" />`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Choose your preferred method of installation
+        <div class="u-flex u-gap-16 u-margin-block-start-8">
+            <Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
+                NPM
+            </Pill>
+            <Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
+                CDN
+            </Pill>
+        </div>
+    </svelte:fragment>
+    {#if method === Method.NPM}
+        <p>
+            Use <a href="https://npmjs.org" target="_blank" rel="noopener noreferrer" class="link"
+                >NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.
+        </p>
+        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
+        <p class="common-section">
+            When you're using a bundler (like <a
+                href="https://vitejs.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Vite</a>
+            or
+            <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
+                >Rollup</a
+            >), import the Appwrite module when you need it:
+        </p>
+        <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
+    {:else if method === Method.CDN}
+        <p>
+            To install with a CDN (content delivery network) add the following scripts to the bottom
+            of your tag, but before you use any Appwrite services:
+        </p>
+        <Code label="HTML" language="html" code={example2} withCopy />
+    {/if}
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
new file mode 100644
index 000000000..e13329c53
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `const appwrite = new Appwrite();
+
+appwrite
+    .setEndpoint('${endpoint}')
+    .setProject('${project}');`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
index 152ab8451..2271aec85 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
@@ -70,6 +70,7 @@
                     href={downloadFile()}
                     class="file-preview is-with-image"
                     target="_blank"
+                    rel="noopener noreferrer"
                     aria-label="open file in new window">
                     <div class="file-preview-image">
                         <img
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index 374ebc914..a3a3de806 100644
--- a/src/routes/invite/+page.svelte
+++ b/src/routes/invite/+page.svelte
@@ -59,9 +59,14 @@
                         By accepting the invitation, you agree to the <a
                             class="link"
                             href="https://appwrite.io/policy/terms"
-                            target="_blank">Terms and Conditions</a>
+                            target="_blank"
+                            rel="noopener noreferrer">Terms and Conditions</a>
                         and
-                        <a class="link" href="https://appwrite.io/policy/privacy" target="_blank">
+                        <a
+                            class="link"
+                            href="https://appwrite.io/policy/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer">
                             Privacy Policy</a
                         >.</InputChoice>
 
diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
index a23ce8f49..4a02795af 100644
--- a/tests/unit/components/code.test.ts
+++ b/tests/unit/components/code.test.ts
@@ -26,7 +26,7 @@ test('shows line numbers', async () => {
     const { container } = render(Code, {
         code: 'a\nb;\nc;',
         language: 'js',
-        showLineNumbers: true
+        withLineNumbers: true
     });
 
     expect(container.querySelectorAll('.line-numbers').length).toEqual(1);
@@ -39,9 +39,9 @@ test('shows code highlighted javascript', async () => {
         language: 'js'
     });
 
-    expect(container.querySelectorAll('.token.function').length).toEqual(1);
-    expect(container.querySelectorAll('.token.string').length).toEqual(1);
-    expect(container.querySelectorAll('.token.punctuation').length).toEqual(4);
+    expect(container.querySelectorAll('.prism-token.prism-function').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(4);
 });
 
 test('shows code highlighted json', async () => {
@@ -50,17 +50,17 @@ test('shows code highlighted json', async () => {
         language: 'json'
     });
 
-    expect(container.querySelectorAll('.token.property').length).toEqual(1);
-    expect(container.querySelectorAll('.token.operator').length).toEqual(1);
-    expect(container.querySelectorAll('.token.string').length).toEqual(1);
-    expect(container.querySelectorAll('.token.punctuation').length).toEqual(2);
+    expect(container.querySelectorAll('.prism-token.prism-property').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-operator').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(2);
 });
 
 test('copy to clipboard function called on click', async () => {
     const { container } = render(Code, {
         code: 'console.log("test");',
         language: 'js',
-        showCopy: true
+        withCopy: true
     });
 
     Object.assign(window.navigator, {