diff --git a/package-lock.json b/package-lock.json
index 6f31fe939..49a8ff5af 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-63",
-                "@aw-labs/ui": "0.0.0-63",
+                "@aw-labs/icons": "0.0.0-64",
+                "@aw-labs/ui": "0.0.0-64",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -79,14 +79,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-63",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
-            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
+            "version": "0.0.0-64",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-64.tgz",
+            "integrity": "sha512-oSZptwIflTmoaUwotXS5sOQsrYE+aDHVw7/iI+lvC6bGDg1sljKc2/LrevXX2Z3GTG8Wu27aYHVVgVFB5khSPw=="
         },
         "node_modules/@aw-labs/ui": {
-            "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==",
+            "version": "0.0.0-64",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-64.tgz",
+            "integrity": "sha512-s6ntXWKssiUjaberQEZYBFQw7+Ipfn8BOcxJ4DqCMSnvllZvnx9HbPynvKWcSpYgRRUr6wUHrEKBTfKQah1SGA==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7789,14 +7789,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-63",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
-            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
+            "version": "0.0.0-64",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-64.tgz",
+            "integrity": "sha512-oSZptwIflTmoaUwotXS5sOQsrYE+aDHVw7/iI+lvC6bGDg1sljKc2/LrevXX2Z3GTG8Wu27aYHVVgVFB5khSPw=="
         },
         "@aw-labs/ui": {
-            "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==",
+            "version": "0.0.0-64",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-64.tgz",
+            "integrity": "sha512-s6ntXWKssiUjaberQEZYBFQw7+Ipfn8BOcxJ4DqCMSnvllZvnx9HbPynvKWcSpYgRRUr6wUHrEKBTfKQah1SGA==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index ed9d85101..252bbc6e4 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-63",
-        "@aw-labs/ui": "0.0.0-63",
+        "@aw-labs/icons": "0.0.0-64",
+        "@aw-labs/ui": "0.0.0-64",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index 927a47ce3..2b7badcb3 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-    import Avatar from './avatar.svelte';
-    export let avatars = [];
+    import AvatarInitials from './avatarInitials.svelte';
+
+    export let avatars: string[] = [];
     export let total = avatars.length;
     export let size = 40;
 </script>
 
 <ul class="avatars-group">
-    {#each avatars as av, index}
+    {#each avatars as name, index}
         {#if index < 2}
             <li class="avatars-group-item">
-                <Avatar {size} src={av.img} name={av.name} />
+                <AvatarInitials {size} {name} />
             </li>
         {/if}
     {/each}
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
new file mode 100644
index 000000000..1ce7ecfc6
--- /dev/null
+++ b/src/lib/components/avatarInitials.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import Avatar from './avatar.svelte';
+
+    export let name: string;
+    export let size: number;
+
+    $: src = sdkForConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+</script>
+
+<Avatar {name} {size} {src} />
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 1644926ec..f8ac3d894 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -20,6 +20,7 @@
     export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
     export let withLineNumbers = false;
     export let withCopy = false;
+    export let noMargin = false;
 
     Prism.plugins.customClass.prefix('prism-');
 
@@ -28,7 +29,7 @@
     });
 </script>
 
-<section class="box u-overflow-hidden common-section">
+<section class="box u-overflow-hidden " class:common-section={!noMargin}>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
@@ -48,8 +49,9 @@
         {/if}
     </div>
 
-    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
-            >{code}</code></pre>
+    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}>
+        <code>{code}</code>
+    </pre>
 </section>
 
 <style lang="scss" global>
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 6fae6ba26..ca0407035 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -10,7 +10,8 @@
 
 {#if isButton}
     <button
-        on:click
+        on:click|preventDefault
+        type="button"
         class="card u-grid u-cross-center u-width-full-line dashed"
         class:common-section={single}>
         {#if single}
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
new file mode 100644
index 000000000..2ab43504f
--- /dev/null
+++ b/src/lib/components/eventModal.svelte
@@ -0,0 +1,308 @@
+<script lang="ts">
+    import { Button, Form } from '$lib/elements/forms';
+    import { Modal, Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { createEventDispatcher } from 'svelte';
+
+    export let show = false;
+    let selectedService: typeof services[0] = null;
+    let selectedRequest: typeof selectedService['requests'][0] = null;
+    let selectedEvent: string = null;
+    let selectedAttribute: string = null;
+    let helper: string = null;
+    let inputData: string = null;
+    let showInput = false;
+
+    const dispatch = createEventDispatcher();
+
+    function create() {
+        show = false;
+        dispatch('created', copyValue);
+    }
+
+    const events = ['create', 'update', 'delete'];
+
+    const services = [
+        {
+            name: 'buckets',
+            requests: [{ name: 'files', events }],
+            events
+        },
+        {
+            name: 'databases',
+            requests: [
+                { name: 'collections', events },
+                { name: 'documents', events }
+            ],
+            events
+        },
+        {
+            name: 'functions',
+            requests: [
+                { name: 'deployments', events },
+                { name: 'executions', events }
+            ],
+            events
+        },
+        {
+            name: 'teams',
+            requests: [{ name: 'memberships', events }],
+            events
+        },
+        {
+            name: 'users',
+            requests: [
+                { name: 'recovery', events: ['create', 'delete'] },
+                { name: 'sessions', events: ['create', 'delete'] },
+                { name: 'verifications', events: ['create', 'delete'] }
+            ],
+            events,
+            attributes: ['email', 'name', 'password', 'status', 'prefs']
+        }
+    ];
+
+    function createEventString(
+        service: typeof selectedService,
+        request: typeof selectedRequest,
+        event: string,
+        attribute: string
+    ) {
+        const data = new Map();
+        //SERVICE
+        if (service) {
+            data.set('service', { value: service.name, description: 'service' });
+            data.set('serviceId', {
+                value: '*',
+                description: `ID of ${service?.name.slice(0, -1)}`
+            });
+        }
+
+        //REQUEST
+        if (request) {
+            if (request.name === 'documents') {
+                data.set('request', {
+                    value: 'collections',
+                    description: 'request'
+                });
+                data.set('requestId', {
+                    value: '*',
+                    description: `ID of collection`
+                });
+                data.set('secondaryRequest', {
+                    value: 'documents',
+                    description: 'secondary request'
+                });
+                data.set('secondaryRequestId', {
+                    value: '*',
+                    description: `ID of document`
+                });
+            } else {
+                data.set('request', {
+                    value: request.name,
+                    description: `request`
+                });
+                data.set('requestId', {
+                    value: '*',
+                    description: `ID of ${request?.name.slice(0, -1)}`
+                });
+            }
+        }
+
+        //EVENT
+        if ((event && request?.events?.includes(event)) ?? service?.events?.includes(event)) {
+            data.set('event', { value: event, description: 'event' });
+        }
+
+        //ATTRIBUTE
+        if (attribute && !request) {
+            data.set('attribute', { value: attribute, description: 'attribute' });
+        } else if (event && service.name === 'users' && !request) {
+            data.set('attribute', { value: '*', description: `attribute` });
+        }
+        return data;
+    }
+
+    $: eventString = createEventString(
+        selectedService,
+        selectedRequest,
+        selectedEvent,
+        selectedAttribute
+    );
+    $: copyValue =
+        inputData ??
+        Array.from(eventString.values())
+            .map((d) => d.value)
+            .join('.');
+
+    $: if (selectedService) {
+        selectedRequest = null;
+        selectedEvent = null;
+        selectedAttribute = null;
+        helper = null;
+    }
+    $: if (!showInput) {
+        helper = null;
+    }
+
+    $: if (!show) {
+        selectedService = null;
+        selectedRequest = null;
+        selectedEvent = null;
+        selectedAttribute = null;
+        helper = null;
+        inputData = null;
+        showInput = false;
+    }
+
+    //TODO: remove inline style
+</script>
+
+<Form noStyle noMargin on:submit={create}>
+    <Modal bind:show size="big">
+        <svelte:fragment slot="header">Create Event</svelte:fragment>
+
+        <div>
+            <p class="u-text">Choose a service</p>
+            <div class="u-flex u-gap-8 u-margin-block-start-8">
+                {#each services as service}
+                    <Pill
+                        disabled={showInput}
+                        selected={service.name === selectedService?.name}
+                        button
+                        on:click={() => {
+                            selectedService = service;
+                            inputData = null;
+                        }}>{service.name}</Pill>
+                {/each}
+            </div>
+        </div>
+        {#if selectedService}
+            <div>
+                <p class="u-text">Choose a request (optional)</p>
+                <div class="u-flex u-gap-8 u-margin-block-start-8">
+                    {#each selectedService.requests as request}
+                        <Pill
+                            disabled={showInput}
+                            selected={request.name === selectedRequest?.name}
+                            button
+                            on:click={() => {
+                                selectedRequest === request
+                                    ? (selectedRequest = null)
+                                    : (selectedRequest = request);
+                                inputData = null;
+                            }}>{request.name}</Pill>
+                    {/each}
+                </div>
+            </div>
+            <div>
+                <p class="u-text">Choose an event (optional)</p>
+                <div class="u-flex u-gap-8 u-margin-block-start-8">
+                    {#each selectedRequest?.events ?? selectedService?.events as event}
+                        <Pill
+                            disabled={showInput}
+                            selected={selectedEvent === event}
+                            button
+                            on:click={() => {
+                                selectedEvent === event
+                                    ? (selectedEvent = null)
+                                    : (selectedEvent = event);
+                                inputData = null;
+                            }}>{event}</Pill>
+                    {/each}
+                </div>
+            </div>
+            {#if selectedService?.name === 'users' && !selectedRequest?.name}
+                <div>
+                    <p class="u-text">Choose an attribute (optional)</p>
+                    <div class="u-flex u-gap-8 u-margin-block-start-8">
+                        {#each selectedService?.attributes as attribute}
+                            <Pill
+                                disabled={showInput}
+                                selected={selectedAttribute === attribute}
+                                button
+                                on:click={() => {
+                                    selectedAttribute === attribute
+                                        ? (selectedAttribute = null)
+                                        : (selectedAttribute = attribute);
+                                    inputData = null;
+                                }}>{attribute}</Pill>
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+        {/if}
+        {#if showInput}
+            <div class="input-text-wrapper" style="--amount-of-buttons:2">
+                <input type="text" placeholder="Enter custom event" bind:value={inputData} />
+                <div class="options-list">
+                    <button
+                        on:click|preventDefault={() => {
+                            showInput = false;
+                        }}
+                        class="options-list-button"
+                        aria-label="confirm">
+                        <span class="icon-check" aria-hidden="true" />
+                    </button>
+                    <button
+                        on:click|preventDefault={() => {
+                            inputData = null;
+                            showInput = false;
+                        }}
+                        class="options-list-button"
+                        aria-label="cancel">
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                </div>
+            </div>
+        {:else}
+            <div class="input-text-wrapper" style="--amount-of-buttons:2">
+                <div type="text" readonly style="min-height: 2.5rem;">
+                    {#if inputData}
+                        <span>{inputData}</span>
+                    {:else}
+                        {#each Array.from(eventString.values()) as route, i}
+                            <button
+                                class:u-opacity-0-5={helper !== route.description}
+                                on:mouseenter={() => {
+                                    helper = route.description;
+                                }}
+                                on:mouseleave={() => {
+                                    helper = null;
+                                }}>
+                                {route.value}
+                            </button>
+                            <span class="u-opacity-0-5">
+                                {i + 1 < eventString?.size ? '.' : ''}
+                            </span>
+                        {/each}
+                    {/if}
+                </div>
+                <div class="options-list">
+                    <button
+                        on:click|preventDefault={() => {
+                            inputData = copyValue;
+                            showInput = true;
+                        }}
+                        class="options-list-button"
+                        aria-label="edit event">
+                        <span class="icon-pencil" aria-hidden="true" />
+                    </button>
+                    <button
+                        disabled={!copyValue}
+                        class="options-list-button"
+                        aria-label="copy text">
+                        <Copy value={copyValue}>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                        </Copy>
+                    </button>
+                </div>
+                <p style="height: 2rem;">{helper ?? ''}</p>
+            </div>
+        {/if}
+
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (show = false)}>Cancel</Button>
+            <Button disabled={showInput || !copyValue} submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index a354d53da..56df97ac0 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -22,6 +22,7 @@ export { default as CollapsibleItem } from './collapsibleItem.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
+export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
@@ -36,4 +37,6 @@ export { default as Secret } from './secret.svelte';
 export { default as Trim } from './trim.svelte';
 export { default as Tabs } from './tabs.svelte';
 export { default as Tab } from './tab.svelte';
+export { default as EventModal } from './eventModal.svelte';
+export { default as Status } from './status.svelte';
 export { default as Heading } from './heading.svelte';
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 7f42bd48b..edda2b7f7 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -25,24 +25,26 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Form on:submit={create} noMargin>
-    <Modal bind:show on:close={reset}>
-        <svelte:fragment slot="header">Custom permission</svelte:fragment>
+{#if show}
+    <Form noMargin noStyle on:submit={create}>
+        <Modal bind:show on:close={reset}>
+            <svelte:fragment slot="header">Custom permission</svelte:fragment>
 
-        <FormList>
-            <InputText
-                showLabel={false}
-                id="custom-permission"
-                label="Custom permission"
-                placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
-                bind:value />
-            <Helper type="neutral">
-                A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
-            </Helper>
-        </FormList>
+            <FormList>
+                <InputText
+                    showLabel={false}
+                    id="custom-permission"
+                    label="Custom permission"
+                    placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+                    bind:value />
+                <Helper type="neutral">
+                    A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+                </Helper>
+            </FormList>
 
-        <svelte:fragment slot="footer">
-            <Button submit {disabled}>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+            <svelte:fragment slot="footer">
+                <Button submit {disabled}>Create</Button>
+            </svelte:fragment>
+        </Modal>
+    </Form>
+{/if}
diff --git a/src/lib/components/permissions/index.ts b/src/lib/components/permissions/index.ts
index 865f2d75c..01de280d9 100644
--- a/src/lib/components/permissions/index.ts
+++ b/src/lib/components/permissions/index.ts
@@ -1 +1,3 @@
 export { default as Permissions } from './permissions.svelte';
+export { default as Team } from './team.svelte';
+export { default as User } from './user.svelte';
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 81589e410..67d7c7c63 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -22,11 +22,14 @@
     import { difference } from '$lib/helpers/array';
     import { onDestroy, onMount } from 'svelte';
     import { writable, type Unsubscriber } from 'svelte/store';
+    import { Empty } from '../';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
 
     export let withCreate = false;
+    export let withCrud = true;
     export let permissions: string[] = [];
+    export let executeAccess: string[] = [];
 
     let showUser = false;
     let showTeam = false;
@@ -142,74 +145,99 @@
 
         return a.localeCompare(b);
     }
+
+    $: if (executeAccess.length && !permissions.length) {
+        executeAccess.forEach((permission) => {
+            addRole(permission);
+        });
+    }
+    $: if ([...$groups]?.length && !permissions.length) {
+        executeAccess = [...$groups].sort(sortRoles).map(([role]) => role);
+    }
+
+    //TODO: click on Empty components opens the dropdown
 </script>
 
-<Table noMargin noStyles noMobile>
-    <TableHeader>
-        <TableCellHead>Role</TableCellHead>
-        {#if withCreate}
-            <TableCellHead width={70}>Create</TableCellHead>
-        {/if}
-        <TableCellHead width={70}>Read</TableCellHead>
-        <TableCellHead width={70}>Update</TableCellHead>
-        <TableCellHead width={70}>Delete</TableCellHead>
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each [...$groups].sort(sortRoles) as [role, permission]}
-            <TableRow>
-                <TableCellText title="Role">
-                    <Row {role} />
-                </TableCellText>
+{#if [...$groups]?.length}
+    <Table noMargin noStyles noMobile>
+        <TableHeader>
+            <TableCellHead>Role</TableCellHead>
+            {#if withCrud}
                 {#if withCreate}
-                    <TableCell title="Create">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Create"
-                            checked={permission.create}
-                            on:change={() => togglePermission(role, 'create')} />
-                    </TableCell>
+                    <TableCellHead width={70}>Create</TableCellHead>
                 {/if}
-                <TableCell title="Read">
-                    <input
-                        type="checkbox"
-                        class="icon-check"
-                        aria-label="Read"
-                        checked={permission.create}
-                        on:change={() => togglePermission(role, 'read')} />
-                </TableCell>
-                <TableCell title="Update">
-                    <input
-                        type="checkbox"
-                        class="icon-check"
-                        aria-label="Update"
-                        checked={permission.create}
-                        on:change={() => togglePermission(role, 'update')} />
-                </TableCell>
-                <TableCell title="Delete">
-                    <input
-                        type="checkbox"
-                        class="icon-check"
-                        aria-label="Delete"
-                        checked={permission.create}
-                        on:change={() => togglePermission(role, 'delete')} />
-                </TableCell>
-                <TableCellText title="Remove">
-                    <div class="u-flex">
-                        <button
-                            class="button is-text is-only-icon"
-                            type="button"
-                            aria-label="delete"
-                            on:click={() => deleteRole(role)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </div>
-                </TableCellText>
-            </TableRow>
-        {/each}
-    </TableBody>
-</Table>
+                <TableCellHead width={70}>Read</TableCellHead>
+                <TableCellHead width={70}>Update</TableCellHead>
+                <TableCellHead width={70}>Delete</TableCellHead>
+            {/if}
+            <TableCellHead width={40} />
+        </TableHeader>
+        <TableBody>
+            {#each [...$groups].sort(sortRoles) as [role, permission]}
+                <TableRow>
+                    <TableCellText title="Role">
+                        <Row {role} />
+                    </TableCellText>
+
+                    {#if withCrud}
+                        {#if withCreate}
+                            <TableCell title="Create">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={permission.create}
+                                    on:change={() => togglePermission(role, 'create')} />
+                            </TableCell>
+                        {/if}
+                        <TableCell title="Read">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Read"
+                                checked={permission.read}
+                                on:change={() => togglePermission(role, 'read')} />
+                        </TableCell>
+                        <TableCell title="Update">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Update"
+                                checked={permission.update}
+                                on:change={() => togglePermission(role, 'update')} />
+                        </TableCell>
+                        <TableCell title="Delete">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Delete"
+                                checked={permission.delete}
+                                on:change={() => togglePermission(role, 'delete')} />
+                        </TableCell>
+                    {/if}
+
+                    <TableCell title="Remove" width={40}>
+                        <div class="u-flex">
+                            <button
+                                class="button is-text is-only-icon"
+                                type="button"
+                                aria-label="delete"
+                                on:click={() => deleteRole(role)}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    </TableCell>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+{:else}
+    <span class="eyebrow-heading-3 u-sep-block-end">ROLE</span>
+
+    <Empty isButton on:click={() => (showDropdown = !showDropdown)}>
+        Add a role to get started
+    </Empty>
+{/if}
 
 <Actions
     bind:showCustom
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 7aa0ca1ad..8ea527e80 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -3,7 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { Avatar, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, Pagination } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -58,54 +58,54 @@
     }
 </script>
 
-<Form on:submit={create} noMargin>
-    <Modal bind:show on:close={reset} size="big">
-        <svelte:fragment slot="header">Select teams</svelte:fragment>
-        <InputSearch bind:value={search} />
-        {#if results?.teams}
-            <div class="table-wrapper">
-                <table class="table is-table-layout-auto is-remove-outer-styles">
-                    <tbody class="table-tbody">
-                        {#each results.teams as team (team.$id)}
-                            {@const role = `team:${team.$id}`}
-                            {@const exists = $groups.has(role)}
-                            <tr class="table-row">
-                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                    <input
-                                        id={team.$id}
-                                        type="checkbox"
-                                        class="icon-check"
-                                        aria-label="Create"
-                                        checked={exists || selected.has(role)}
-                                        disabled={exists}
-                                        on:change={(event) => onSelection(event, role)} />
-                                </td>
-                                <td class="table-col" data-title="Team">
-                                    <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                        <Avatar
-                                            src={sdkForProject.avatars
-                                                .getInitials(team.name, 64, 64)
-                                                .toString()}
-                                            size={32}
-                                            name={team.name} />
-                                        <div class="u-line-height-1-5">
-                                            <div class="body-text-2">{team.name}</div>
-                                            <div class="u-x-small">{team.$id}</div>
-                                        </div>
-                                    </label>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
+{#if show}
+    <Form noStyle noMargin on:submit={create}>
+        <Modal bind:show on:close={reset} size="big">
+            <svelte:fragment slot="header">Select teams</svelte:fragment>
+            <InputSearch bind:value={search} />
+            {#if results?.teams}
+                <div class="table-wrapper">
+                    <table class="table is-table-layout-auto is-remove-outer-styles">
+                        <tbody class="table-tbody">
+                            {#each results.teams as team (team.$id)}
+                                {@const role = `team:${team.$id}`}
+                                {@const exists = $groups.has(role)}
+                                <tr class="table-row">
+                                    <td
+                                        class="table-col"
+                                        data-title="Enabled"
+                                        style="--p-col-width:40">
+                                        <input
+                                            id={team.$id}
+                                            type="checkbox"
+                                            class="icon-check"
+                                            aria-label="Create"
+                                            checked={exists || selected.has(role)}
+                                            disabled={exists}
+                                            on:change={(event) => onSelection(event, role)} />
+                                    </td>
+                                    <td class="table-col" data-title="Team">
+                                        <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
+                                            <AvatarInitials size={32} name={team.name} />
+                                            <div class="u-line-height-1-5">
+                                                <div class="body-text-2">{team.name}</div>
+                                                <div class="u-x-small">{team.$id}</div>
+                                            </div>
+                                        </label>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {/if}
+            <div class="u-flex u-margin-block-start-32 u-main-space-between">
+                <p class="text">Total results: {results?.total}</p>
+                <Pagination limit={5} bind:offset sum={results?.total} hidePages />
             </div>
-        {/if}
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {results?.total}</p>
-            <Pagination limit={5} bind:offset sum={results?.total} hidePages />
-        </div>
-        <svelte:fragment slot="footer">
-            <Button submit disabled={!hasSelection}>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+            <svelte:fragment slot="footer">
+                <Button submit disabled={!hasSelection}>Create</Button>
+            </svelte:fragment>
+        </Modal>
+    </Form>
+{/if}
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 20741b686..862343d00 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, Form, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { Avatar, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, Pagination } from '..';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Form on:submit={create} noMargin>
+<Form noStyle noMargin on:submit={create}>
     <Modal bind:show on:close={reset} size="big">
         <svelte:fragment slot="header">Select users</svelte:fragment>
         <InputSearch bind:value={search} />
@@ -82,12 +82,7 @@
                                 </td>
                                 <td class="table-col" data-title="User">
                                     <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
-                                        <Avatar
-                                            src={sdkForProject.avatars
-                                                .getInitials(user.name, 64, 64)
-                                                .toString()}
-                                            size={32}
-                                            name={user.name} />
+                                        <AvatarInitials size={32} name={user.name} />
                                         <div class="u-line-height-1-5">
                                             <div class="body-text-2">{user.name}</div>
                                             <div class="u-x-small">{user.$id}</div>
diff --git a/src/lib/components/status.svelte b/src/lib/components/status.svelte
new file mode 100644
index 000000000..19c3a95fb
--- /dev/null
+++ b/src/lib/components/status.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let status:
+        | 'waiting'
+        | 'pending'
+        | 'failed'
+        | 'complete'
+        | 'processing'
+        | 'ready'
+        | 'building'
+        | string = null;
+
+    //TODO: Remove type string once SDK is updated
+</script>
+
+<div
+    class="status"
+    class:is-pending={status === 'pending'}
+    class:is-failed={status === 'failed'}
+    class:is-complete={status === 'completed' || status === 'ready'}
+    class:is-processing={status === 'processing' || status === 'building'}>
+    {#if status}
+        <span class="status-icon" />
+    {/if}
+    <span class="text u-margin-inline-end-16"><slot /></span>
+</div>
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index c06e308f0..cb6cad774 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -6,8 +6,6 @@
     export let currentSub = 0;
     export let isSub = false;
     export let step: { text: string; substeps?: { text: string }[] };
-
-    //TODO: remove inline styling
 </script>
 
 <li
diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index c696b180e..00b0876bb 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -9,7 +9,11 @@
             <span class="text"><slot /></span>
         </a>
     {:else}
-        <button class="tabs-button" on:click|preventDefault class:is-selected={selected}>
+        <button
+            type="button"
+            class="tabs-button"
+            on:click|preventDefault
+            class:is-selected={selected}>
             <span class="text"><slot /></span>
         </button>
     {/if}
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 1dd056919..66d417a30 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -10,7 +10,6 @@
     export let fullWidth = false;
     export let ariaLabel: string = null;
     export let noMargin = false;
-    //TODO: add option to add aria-label to buttons that are only icons
 </script>
 
 {#if href}
diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index ce34663f5..b1ca522eb 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     export let noMargin = false;
+    export let noStyle = false;
 </script>
 
 <!-- svelte-ignore a11y-no-redundant-roles -->
-<form role="form" class="form" class:common-section={!noMargin} on:submit|preventDefault>
+<form role="form" class:form={!noStyle} class:common-section={!noMargin} on:submit|preventDefault>
     <slot />
 </form>
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index addef6a5e..2398a8609 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -11,7 +11,6 @@ export { default as InputNumber } from './inputNumber.svelte';
 export { default as InputSwitch } from './inputSwitch.svelte';
 export { default as InputTags } from './inputTags.svelte';
 export { default as InputFile } from './inputFile.svelte';
-export { default as InputCustomId } from './inputCustomId.svelte';
 export { default as InputDateTime } from './inputDateTime.svelte';
 export { default as InputSearch } from './inputSearch.svelte';
 export { default as InputRadio } from './inputRadio.svelte';
@@ -19,4 +18,6 @@ export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputChoice } from './inputChoice.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
+export { default as InputCron } from './inputCron.svelte';
+export { default as InputURL } from './inputURL.svelte';
 export { default as Helper } from './helper.svelte';
diff --git a/src/lib/elements/forms/inputCron.svelte b/src/lib/elements/forms/inputCron.svelte
new file mode 100644
index 000000000..b7a2e7c1d
--- /dev/null
+++ b/src/lib/elements/forms/inputCron.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem, Helper } from '.';
+
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value: string = null;
+    export let placeholder = '* * * * *';
+    export let required = false;
+    export let disabled = false;
+    export let readonly = false;
+    export let autofocus = false;
+    export let maxlength: number = null;
+    export let minlength: number = null;
+    export let step: number | 'any' = 1;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        if (element.validity.patternMismatch) {
+            error = 'Please enter a valid CRON expression';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<FormItem>
+    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <div class="input-text-wrapper">
+        <input
+            {id}
+            {placeholder}
+            {disabled}
+            {required}
+            {minlength}
+            {maxlength}
+            {readonly}
+            {step}
+            type="text"
+            class="input-text"
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+    </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
+</FormItem>
diff --git a/src/lib/elements/forms/inputCustomId.svelte b/src/lib/elements/forms/inputCustomId.svelte
deleted file mode 100644
index 09d43093e..000000000
--- a/src/lib/elements/forms/inputCustomId.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import { onMount, tick } from 'svelte';
-    import { FormItem } from '.';
-    export let id: string;
-    export let label: string;
-    export let value = '';
-    export let placeholder = '';
-    export let required = false;
-    export let autofocus = false;
-
-    let element: HTMLInputElement;
-    let unique = true;
-    let bench = '';
-
-    const toggle = async () => {
-        unique = !unique;
-        if (unique) {
-            bench = value;
-            value = 'unique()';
-        } else {
-            value = bench;
-            await tick();
-            element.focus();
-        }
-    };
-    onMount(() => {
-        value = 'unique()';
-        if (element && autofocus) {
-            element.focus();
-        }
-    });
-</script>
-
-<FormItem>
-    <label class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper is-with-end-button">
-        <input
-            {placeholder}
-            {required}
-            type="text"
-            class="input-text"
-            disabled={unique}
-            bind:value
-            bind:this={element} />
-        <button class="input-button" aria-label="Switch" on:click={toggle} type="button">
-            <span class:icon-edit={unique} class:icon-shuffle={!unique} aria-hidden="true" />
-        </button>
-    </div>
-</FormItem>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index bb1431cd4..154b3759b 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,17 +1,72 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { Button } from '.';
 
-    export let id: string;
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let files: FileList;
-    export let required = false;
-    export let disabled = false;
+    export let list = new DataTransfer();
+
+    let input: HTMLInputElement;
+    let hovering = false;
+
+    function dropHandler(ev: DragEvent) {
+        hovering = false;
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+                // If dropped items aren't files, reject them
+                if (ev.dataTransfer.items[i].kind === 'file') {
+                    list.items.clear();
+                    list.items.add(ev.dataTransfer.items[i].getAsFile());
+                    files = list.files;
+                }
+            }
+        }
+    }
+
+    function dragOverHandler() {
+        hovering = true;
+    }
 </script>
 
-<FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper">
-        <input {id} {disabled} {required} type="file" bind:files />
+<input bind:files bind:this={input} type="file" style="display: none" />
+
+<div>
+    {#if label}
+        <p class="text">{label}</p>
+    {/if}
+    <div
+        class="card is-border-dashed is-no-shadow"
+        class:is-hover-with-file={hovering}
+        on:drop|preventDefault={dropHandler}
+        on:dragover|preventDefault={dragOverHandler}
+        on:dragleave|preventDefault={() => (hovering = false)}>
+        <div class="u-flex u-main-center u-cross-center u-gap-32">
+            <div class="avatar is-size-large">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-grid u-gap-16">
+                <p>Drag and drop files here to upload</p>
+                <div class="u-flex u-gap-8 ">
+                    <Button secondary on:click={() => input.click()}>
+                        <span class="icon-upload" aria-hidden="true" />
+                        <span class="text">Choose File</span>
+                    </Button>
+
+                    {#if files?.length}
+                        <div class="u-flex ">
+                            {files.item(0).name}
+                            <button
+                                on:click={() => (files = null)}
+                                type="button"
+                                class="x-button"
+                                aria-label="remove file"
+                                title="Remove file">
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
     </div>
-</FormItem>
+</div>
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index ac10c62ee..7113d6479 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -11,8 +11,8 @@
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
-    export let maxlength: number = null;
-    export let minlength: number = null;
+    export let min: number = null;
+    export let max: number = null;
     export let step: number | 'any' = 1;
 
     let element: HTMLInputElement;
@@ -32,6 +32,16 @@
             return;
         }
 
+        if (element.validity.rangeOverflow) {
+            error = `The value must be less than or equal to ${max}`;
+            return;
+        }
+
+        if (element.validity.rangeUnderflow) {
+            error = `The value must be greater than or equal to ${min}`;
+            return;
+        }
+
         error = element.validationMessage;
     };
 
@@ -48,8 +58,8 @@
             {placeholder}
             {disabled}
             {required}
-            {minlength}
-            {maxlength}
+            {min}
+            {max}
             {readonly}
             {step}
             type="number"
diff --git a/src/lib/elements/forms/inputURL.svelte b/src/lib/elements/forms/inputURL.svelte
new file mode 100644
index 000000000..f2038683a
--- /dev/null
+++ b/src/lib/elements/forms/inputURL.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem, Helper } from '.';
+
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value = '';
+    export let placeholder = '';
+    export let required = false;
+    export let disabled = false;
+    export let readonly = false;
+    export let autofocus = false;
+    export let autocomplete = false;
+    export let maxlength: number = null;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.patternMismatch) {
+            error = 'Must be a valid URL';
+            return;
+        }
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<FormItem>
+    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <div class="input-text-wrapper">
+        <input
+            {id}
+            {placeholder}
+            {disabled}
+            {required}
+            {maxlength}
+            {readonly}
+            type="url"
+            autocomplete={autocomplete ? 'on' : 'off'}
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+    </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
+</FormItem>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index b1f0d6082..c702ca645 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -1,10 +1,12 @@
 export { default as Table } from './table.svelte';
 export { default as TableScroll } from './tableScroll.svelte';
+export { default as TableList } from './tableList.svelte';
 export { default as TableBody } from './body.svelte';
 export { default as TableHeader } from './header.svelte';
 export { default as TableFooter } from './footer.svelte';
 export { default as TableRow } from './row.svelte';
 export { default as TableRowLink } from './rowLink.svelte';
+export { default as TableRowButton } from './rowButton.svelte';
 export { default as TableCell } from './cell.svelte';
 export { default as TableCellHead } from './cellHead.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
diff --git a/src/lib/elements/table/rowButton.svelte b/src/lib/elements/table/rowButton.svelte
new file mode 100644
index 000000000..f7b75a96a
--- /dev/null
+++ b/src/lib/elements/table/rowButton.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+</script>
+
+<div class="table-row" role="row" on:keyup={clickOnEnter} on:click|preventDefault>
+    <slot />
+</div>
diff --git a/src/lib/elements/table/tableList.svelte b/src/lib/elements/table/tableList.svelte
new file mode 100644
index 000000000..4abe219de
--- /dev/null
+++ b/src/lib/elements/table/tableList.svelte
@@ -0,0 +1,10 @@
+<!-- TODO: is 100% height needed? -->
+<div class="table-with-scroll">
+    <div class="table-wrapper">
+        <div class="table is-remove-outer-styles">
+            <ul class="table-thead">
+                <slot />
+            </ul>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 85891a77e..1a7693967 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -9,7 +9,7 @@ export const toLocaleDate = (datetime: string) => {
     return date.toLocaleDateString('en', options);
 };
 
-export const toLocaleDateTime = (datetime: string) => {
+export const toLocaleDateTime = (datetime: string | number) => {
     const date = new Date(datetime);
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts
index 2f4a54f9a..989cf91b2 100644
--- a/src/lib/helpers/sizeConvertion.ts
+++ b/src/lib/helpers/sizeConvertion.ts
@@ -24,6 +24,7 @@ export function humanFileSize(value: number): {
     value: string;
     unit: string;
 } {
+    if (!value) return { value: 'No', unit: 'Bytes' };
     const length = value.toString().length;
     const unit =
         length < 7
diff --git a/src/lib/helpers/timeConversion.ts b/src/lib/helpers/timeConversion.ts
new file mode 100644
index 000000000..c98521c53
--- /dev/null
+++ b/src/lib/helpers/timeConversion.ts
@@ -0,0 +1,25 @@
+export function calculateTime(time: number) {
+    const milliseconds = Math.floor(time * 1000);
+    const seconds = Math.floor(time);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(months / 12);
+
+    if (milliseconds < 1000) {
+        return milliseconds + 'ms';
+    } else if (seconds < 60) {
+        return `${seconds} s`;
+    } else if (minutes < 60) {
+        return `${minutes} m`;
+    } else if (hours < 24) {
+        return `${hours} h`;
+    } else if (days < 30) {
+        return `${days} d`;
+    } else if (months < 12) {
+        return `${months} M`;
+    } else {
+        return `${years} y`;
+    }
+}
diff --git a/src/lib/images/github-illustration.svg b/src/lib/images/github-illustration.svg
new file mode 100644
index 000000000..3986d7a00
--- /dev/null
+++ b/src/lib/images/github-illustration.svg
@@ -0,0 +1 @@
+<svg width="263" height="187" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 104.8 92.882 158 191 103.443 98.67 44 0 104.8Z" fill="url(#a)"/><path d="M78.324 149.801v-75.12a13 13 0 0 1 6.512-11.264L174.274 11.9c1.333-.768 2.998.194 2.998 1.733v79.04l52.818 31.765c2.549 1.533 2.593 5.213.081 6.806l-85.863 54.453a4 4 0 0 1-4.154.079l-61.83-35.976Z" fill="url(#b)"/><path d="m141.763 181.667-60.529-34.523 95.837-54.452 54.363 31.997-5.044 3.649-18.214 12.069-66.413 41.26Z" fill="#FAFAFF"/><path d="m130.716 169.174-30.427-18.532 81.545-47.284 25.153 15.116c2.578 1.55 2.588 5.284.017 6.847l-72.129 43.854a4 4 0 0 1-4.159-.001Z" fill="#fff"/><path d="M81.234 147.425V75.118a11 11 0 0 1 5.601-9.584l87.815-49.47c1.333-.751 2.981.212 2.981 1.742v74.606l-96.397 55.013Z" fill="url(#c)"/><path d="m90.416 128.044.96-53.05a2 2 0 0 1 .994-1.692l72.435-42.159c1.333-.776 3.007.187 3.006 1.73l-.029 52.218a4 4 0 0 1-2.019 3.473l-72.357 41.254c-1.347.768-3.018-.223-2.99-1.774Z" fill="url(#d)"/><mask id="e" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="91" y="98" width="131" height="78"><path d="M141.803 174.81 91.32 145.376l81.221-46.988 46.574 27.639c2.636 1.564 2.605 5.391-.056 6.912l-73.256 41.888a4 4 0 0 1-4-.017Z" fill="#EFEFF6"/></mask><g mask="url(#e)"><path d="m97.688 159.499 98.815-57.392" stroke="url(#f)"/><path d="m103.258 164.017 98.815-57.392" stroke="url(#g)"/><path d="m108.828 167.205 98.815-57.392" stroke="url(#h)"/><path d="m114.133 171.456 98.815-57.392" stroke="url(#i)"/><path d="m109.891 145.949 31.7 17.005" stroke="url(#j)"/><path d="m119.438 141.166 31.302 16.872" stroke="url(#k)"/><path d="m168.25 112.47 31.7 17.005" stroke="url(#l)"/><path d="m177.801 107.688 31.302 16.872" stroke="url(#m)"/><path d="m127.93 135.586 24.936 13.418" stroke="url(#n)"/><path d="m135.621 131.069 24.936 13.418" stroke="url(#o)"/><path d="m143.312 126.552 24.936 13.418" stroke="url(#p)"/><path d="m150.742 122.035 24.936 13.418" stroke="url(#q)"/><path d="m159.496 117.519 24.936 13.418" stroke="url(#r)"/></g><path d="M100.293 152.757v-1.964l32.506 18.244 78.462-46.593v2.246l-78.462 46.592-32.506-18.525Z" fill="url(#s)"/><rect width="69.913" height="56.614" rx="4" transform="matrix(-.85226 .52311 0 1 108.062 36.046)" fill="url(#t)"/><rect width="64.432" height="51.261" rx="4" transform="matrix(-.85226 .52311 0 1 105.797 40.111)" fill="url(#u)"/><path d="M53.357 77.395c0-.51.26-.983.69-1.257l24.57-15.64a1.383 1.383 0 0 1 1.493 2.33L55.652 78.644c-.99.64-2.295-.07-2.295-1.249Z" fill="url(#v)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m97.452 65.556 1.581 1.457 1.001.924.017.99-.732.543-.25-.27.245 14.883-36.275 20.509.328.444-6.093 4.86-3.88 4.22-2.512-2.56.175-.19-.23.13c2.074-4.086 7.723-12.408 13.737-13.01 4.949-.497 7.414-6.3 9.09-10.244.869-2.046 1.525-3.592 2.206-3.635.704-.044 1.913.384 3.22.847 2.384.846 5.092 1.806 5.638.206l.05-.147c.857-2.514 2.447-7.176 4.38-8.513.69-.477 1.35-1.722 2.18-3.287 1.331-2.509 3.099-5.84 6.124-8.157Z" fill="url(#w)"/><path d="m100.358 87.49-.323-19.552c-5.95 3.363-7.76 10.632-9.67 11.96-1.908 1.33-2.925 4.652-3.743 7.113-.817 2.46-7.099-1.233-9.028-1.142-1.929.09-3.617 14.785-10.9 15.404-5.826.495-11.296 8.717-13.303 12.766l46.967-26.549Z" fill="url(#x)"/><path d="m71.313 14.66 3.383-2.006v3.952l-3.383 2.024v-3.97Z" fill="url(#y)"/><path d="m71.313 14.66-3.385-2.006v3.952l3.385 2.024v-3.97Z" fill="url(#z)"/><path d="m67.93 12.66 3.355-1.968 3.413 1.968-3.413 2.046-3.355-2.046Z" fill="url(#A)"/><path d="m123.34 8.939 7.625-4.518v8.904l-7.625 4.562V8.939Z" fill="url(#B)"/><path d="m123.34 8.939-7.625-4.518v8.904l7.625 4.562V8.939Z" fill="url(#C)"/><path d="M115.715 4.434 123.274 0l7.69 4.434-7.69 4.61-7.559-4.61Z" fill="url(#D)"/><path d="m231.715 34.106 11.286-6.687V40.6l-11.286 6.751V34.106Z" fill="url(#E)"/><path d="m231.715 34.106-11.286-6.687V40.6l11.286 6.751V34.106Z" fill="url(#F)"/><path d="m220.43 27.438 11.189-6.563 11.382 6.563-11.382 6.823-11.189-6.823Z" fill="url(#G)"/><mask id="I" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="115" y="53" width="34" height="52"><path transform="matrix(.76045 -.34283 .08858 .98983 115.699 66.432)" fill="url(#H)" d="M0 0h38.738v38.769H0z"/></mask><g mask="url(#I)"><path transform="matrix(.81664 -.57755 0 1 108.484 72.426)" fill="url(#J)" d="M0 0h47.591v49.028H0z"/></g><defs><linearGradient id="a" x1="138.633" y1="162.343" x2="76.636" y2="106.845" gradientUnits="userSpaceOnUse"><stop stop-color="#798196"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="143.727" y1="98.867" x2="433.601" y2="211.663" gradientUnits="userSpaceOnUse"><stop stop-color="#E8E8F1"/><stop offset="1" stop-color="#FCFCFF"/></linearGradient><linearGradient id="c" x1="93.004" y1="102.236" x2="287.672" y2="112.1" gradientUnits="userSpaceOnUse"><stop stop-color="#E8E8F1"/><stop offset="1" stop-color="#FCFCFF"/></linearGradient><linearGradient id="d" x1="88.724" y1="120.326" x2="247.742" y2="54.234" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="s" x1="122.15" y1="196.543" x2="187.808" y2="142.757" gradientUnits="userSpaceOnUse"><stop stop-color="#E8E8F1"/><stop offset="1" stop-color="#EBEBEB" stop-opacity="0"/></linearGradient><linearGradient id="t" x1="35.205" y1="-11.328" x2="30.295" y2="84.083" gradientUnits="userSpaceOnUse"><stop stop-color="#E9E9F2"/><stop offset="1" stop-color="#E9E9F2" stop-opacity="0"/></linearGradient><linearGradient id="u" x1="32.445" y1="-10.257" x2="28.077" y2="76.141" gradientUnits="userSpaceOnUse"><stop stop-color="#FCFCFF"/><stop offset="1" stop-color="#FCFCFF" stop-opacity="0"/></linearGradient><linearGradient id="v" x1="52.638" y1="78.798" x2="79.807" y2="70.494" gradientUnits="userSpaceOnUse"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#EAEAF3" stop-opacity=".03"/></linearGradient><linearGradient id="w" x1="98.85" y1="54.232" x2="56.66" y2="98.485" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#F02E65" stop-opacity="0"/></linearGradient><linearGradient id="x" x1="111.716" y1="67.916" x2="86.066" y2="126.159" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset=".583" stop-color="#FFEBF8"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="y" x1="82.843" y1="10.566" x2="72.992" y2="18.615" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="z" x1="65.234" y1="12.7" x2="68.815" y2="20.668" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="A" x1="68.431" y1="12.7" x2="76.64" y2="12.7" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="B" x1="149.32" y1="-.283" x2="127.123" y2="17.852" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="C" x1="109.644" y1="4.526" x2="117.714" y2="22.477" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="D" x1="116.844" y1="4.526" x2="135.341" y2="4.526" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="E" x1="270.17" y1="20.456" x2="237.315" y2="47.298" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="F" x1="211.442" y1="27.574" x2="223.387" y2="54.145" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="G" x1="222.102" y1="27.574" x2="249.48" y2="27.574" gradientUnits="userSpaceOnUse"><stop stop-color="#F02E65"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="J" x1="8.923" y1="4.553" x2="35.721" y2="42.53" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity=".4"/></linearGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 28.696 -49.4075 0 147.095 130.803)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 28.696 -49.4075 0 152.665 135.321)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 28.696 -49.4075 0 158.236 138.509)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="i" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 28.696 -49.4075 0 163.54 142.76)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="j" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.50252 -15.8502 0 125.741 154.451)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="k" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.43609 -15.6512 0 135.089 149.602)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="l" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.50252 -15.8502 0 184.1 120.973)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="m" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.43609 -15.6512 0 193.452 116.124)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="n" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 6.70902 -12.4679 0 140.398 142.295)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="o" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 6.70902 -12.4679 0 148.089 137.778)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="p" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 6.70902 -12.4679 0 155.78 133.261)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="q" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 6.70902 -12.4679 0 163.21 128.744)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 6.70902 -12.4679 0 171.964 124.228)"><stop stop-color="#EAEAF3"/><stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/></radialGradient><pattern id="H" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#K" transform="matrix(.00834 0 0 .00833 0 0)"/></pattern><image id="K" width="120" height="120" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTE3OEEzMjk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQTQxNEFCQzk5QTExMUUyOUExNUJDMTA0NkE4OTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTMwOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTMxOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R7ClIwAADR5JREFUeNrsnQuwVWUVx79zeWUXNWB4RIhXCCNUVLiCQJoBlqCIYaIBUpRGltMICE6JxojSjIKlhTmkgmjkoClqcBkTHeSNIAooQkTIw3gooAKCXL39/+x1bvtezjl373P22nufc741s2ZzmXu/x/rt/T3Xt75EVVWVsVK4kiiESrRs3qI1Hp2hX4e2g5ZBW0GbiTaGNqr1Z0ehB6Efiu6CboVugW6Grt29d8/7FnD4ML+MRw9oL9FyaFOl7PZBV0GXiC4D9MMWcPBQ2+IxCNoP+u0UX2NYwq9+IbQC+hxgv2cBZw+1BR5DoddCu8e0mCugs6FPAvYeC9gb2D54jIReBW2QJy3hMejz0IcBeoEFfCLU+nhcBx0rg6V8lrXQ+6BPAXZlUQMWsMOg46HtC2yG8m/o3dJ8VxYdYMC9HI/J0I4FPhXdCB0DyHOLAjDAnonHA9DLimzNYT70FoDeWJCAAbaB9LF3RjjNiVo4zbqLfTRAHysYwIDbCY9Z0HONFcpb0CGA/E5eAwZYpv8L6Wu/ZLnWkCPSok0F6Kq8Awy4XP99DHqNZZlRnoGOAOSDeQMYcDvgMQfayfLzJBugAwH5X7EHDLjfMs6qTlPLzZfsE8iLg0y0JGC4g/FYYOFmJbTZArFhYFIvQLgj8JgJrW9Z5cTj6salpTsOHT60JjaAAfcmPKaZAnEgiFhow4GAvAeQV0UOWL7caZZL4HI5IG/P9UuulyPcwdIs2y9XRwYA8ruA/Hboo2gZLXNA1dByUJXPoH2yHV0nsoTLee5yO1oOdQp1YTbz5EQWcLlCtRL6TWv3UIWLId38rniV+ITLF2K6hRuJ0ObThYHOIAsd/s143JpjQQ9AOWigLzK3DQt9E4L1ZdO6A1qaY3259PsBBl0rA2+iZcvvDZP7Xu4Vbu8GpNuGgwjjOAAMhJ6U50A/Nc5SLTf4F6CuO1x1HYDHCzmmzz3lrkj37cAAy2b96yb3/VwOFlql2+xGPqcYx0eLXpX55ny3DvqwcXywPs5gx93QJjnmxf3kC7w4DXjtg8eZYDbrKzIVioaBPgRlXnRyX5EHYNlc9kOZO0vZP85QP9a9IoA8aZ/bAhlk4a37Bh53BGSM17z+IozBJo5HVK42znmhuAnL9AOZvsz38XeLAsp/vLDJKF42Bh40wflQ+VpbFU+HZ1GRuTK4uyNDWd6Twdu70J3Q90U5mDskfeNR+d1G0tdz0MPDaa1Fv2YcL8+zoKdn6AMnQe9F+Y5kYYPXA7JlI2Hzvaz7YHFt/UdABWLzVJqLs5kssDwKPRu6VFoEfhHrgvaIkPn+OVCu2F1snINufIFuyMUzUvphvnBBndq4IpNLbiJDQepLhc4MqCDbUJDTAzA8y5xAWl+E2R4j3xJpVb4IIK3teLQJqGicgnVK51yfqYkeFiBcyq4gEpFmO/RT6wG/UP8NEHAHYTXD8yBLmpHxCvNDK44EfcaYA66GfkbRPAjW3nLIGyGra/0AvlWhENYv+v+isVo31hNgfOp9jc4q0umWa7W0VUjzHGFX5xf8c62BKApwcrGTFRu0VEr+poyAJWzClUqZc3rTxX68x22g5eI0QBim/YKHGd2wCX0tX1UbNBCGaQEPVq7cAMtX3QaDUwLGp80AYtrRbO62fNVt0B0s26f6gq9Sznji7r17nil2umKDu5SzGZgKcD/FDJeHUKl8koliEy3p7x7ZJsMD0ttCI7TC55yj4c3dYLnWmLFwW5JeIBpnubil2ZRhF5NfcC+jFzdjqoWbsqnmvvVUpeQbCdPqJrqnUkbcEL/H4kwrk8RGGtLTDbiXUiZPxDWGY0y+YtrmCaXka3zBXZUyecRijMxGx5km0NnTD2mHQgZb8IbaLUdvAy6GPWynkHQbfsFa/sfzLDrPUqGUbmcC7qCU+GLLLXJbdSDgMqXEV1pukduqTAswXWO3WW6ehbaq1ALcSiHh7RhgfW65eZ4uEe5OhaRbEXAzhYQ/sdh8ywGFNJtpAf7I8vItB7UAa/hJ1bO8fIvGpsPJBKwRJaex5eVbNNyKG5YoFbbU8vItp2gkqgXYxs6Kic20ALfyGw2mmEVOLrbQAlyp9Da2tug8C22l4a5cWaI4pTnDcvMs7ZTS/ahEaYKtWehCFK2P4QAB71VKvNxy8ywXKKW7l4B3KiXe03KL3FY7NQGfJ+64VjKPoLlm0FkT8GalxLlc2dsirFN6G72l3c0EvEmx8IMsvzrl+4ppb0pIMNDtShlw25CxKQ9bjimbZ3ZhjD6kdTD+tBKJhvqhUgYs+FCLMq0MVYS7j2yTS5WrFSsxOhlEzEqNr5fbg6MVszgeNjJp+KWKGfGQ1Y8s0hPkeqN7+/kyN+AlypWZJLGgrZjquNiTlLNZ7AbMH44qZkbHvvst2mr5g9FxdkzK0RqAJSzuIuVK/RRv7hD79bZgkJQRytksSoY6dg9+Xgyhfo+ggj2KGC5P/IVxDWB1CGg34OdDyJgh/Oajot2LEC7rPM+Ec+nInBMA45NmxPQwjptwgPESKvzdIoLL+Cf/NEp+V7VkpbA84Qum/DWkOrOiFaj4BGi9AgZbD8qwSXMVFzRqyyz3D7UB/80454rCEOb9W+hCGOHcAoTbRaaft5vwbmc9JgxTA8anvdfdfockHHishkH+BG1bAGDPgP7FOCtJYY815tQOmZFIUcBL8HjV54oJR21MmNECuHnNLbD6Wb6B7Cb+jIKuzCOotONFxonUy1CCUXU7vWG3VzMClgLzCrvzPSTI20NOrX2SEH/fHI9R0DEme39fhl56Sl6eNXJXQ6z6V+Pc68SgY4yQH7WT4Vuw0Xm1/zORYTLuNfrLb5Dw72r9/SJZSZkpX+T5ORae18G9Jq0F7x1ajzwPhAyU26q8zqdcWinC/UqM3rnrYZMnvQJm88pAXV6DqDwAvQ0ZHHXN+RhprUJcUmYbV3i9gITbnAxewuvvfh30NTtyMcmD0o/SQ/TUGPcStEPHVFfrZLo3iTtAM3xkwhdiCDJZ40qD3gq3SBPG5vbigCvGLuIid54BQ+4qI+FGJt4yAjaYkW6qkk7YRK/zkQm3vpbAKO6r1ugOxGtp2TcMMsGHaxqjBVdmFdwnHxdzuOulK0wpdV1txxUYv+GQeD9SXxhnaYr0+sukP5BBBbSL9g1oMpjiix7XW8/7syvMtNiQ6Q2uMP7vLuRa69/ddwewH4ZyqY59xOMBVey+MK63kxnCvTGFOy8T3DoBi7AP9btXzL1Od4g+TnHYn02U9DbmWDE68z0boiEZxPtIzOCSya/q+qUSD28wR2h3ZlGAAdIkG/Gq5IrVOJne8N6CXBzuX0E6oV2VJzebvhIzwBOEjcn1C6bQG2NVFoWY4rq1cwN0oUybOJfk1bXvZFm5pREYNE6R+zj4m+zlF0s8vsHsO4cZ/xdMdjQn3jLC+3i54/FH4xy6mgL9zEeaHJm/FIFR4xLUnAyGpbtONtsv2MilyKOymcrU+vll6Z8/ZdMN5T2JXOa7XeactZ3kPzCOOxH77wtlQv9mBIbdGhPAoyRavCfxvY2FJpbLYX6d2XuiUMvSpEe402ShZCx9ifB/TYyzf7ofP38iv1cuCyYvsqkP26rIvwyP/0QMdxbq7sv22Tikj4Su9fk392fY2OdLxrXqm6Fnyf/xanVueKwQ2EZeArYGN0Zk3IMRw10ntjeqgPEGcXmQ9xv6OTjOpnVCmvS24HGacc4wrXb1M9vki0lO0XgX0GXQn0Rk4MoI4bKbulJG874ka08D8Y5cYPw5kf0ShXzI5KGgvtw52h/RoCrlyqBWE5388pZJn+hnNWkqDDVZdmryTaIoM207JFu4OQEWyC/gMdwnZPajbwDypXkGuDQCuMNh45xcqAJxBpOtxceyeGHoljPdOL5Euzzm9VU89oQdjzrkUTThjkQdc76RJRGgATh8n5lDq8Blt/Uy3zwg82GWj+GOuXFRJqPrptAmEXh0hAU4+eUG4sIcWAhbFghGYFC12SY77/32xrsHSdw34HMZUF0nXV8gEujBbBSMW4vfMY6HpaacVIBwabM+QcINHLBApo9UN+ibxopX4cJRt3SrfbECLJB5NoabCo9bdnUKXaN6us8TxR6wQD4E/TH+eYNxnOOs1BTa5EbYaLisDpq8AuwC/ahxnO5WWKbVQlt0CWIaFDlggcxoevToGG387ykX2iiZ26O9YJNNYWQYWngjLkxAf28c78TnihAu69wJNpgS5iJN6PGrOJiA0ke6j3G2BAtd6Ld9KesM3Rp25pEFKENl6cTGTfwfGv/uMPkQkmmD1K0cdX05qkJEGoGOJwahPNLCQ108drnc45/ui6C4Xl2HV0hdzmbdwvDdziSxuxmlZfMWdA5InrNNtWK1GkYrj6hs9Cztmgb+08Y517w0TvaM7dU3ssF+jXH8v3pIWXm4+WdaiwIeylSGB0/vX2KcTQG2ONwUeBpl2h9HOyaqqqqMlcIVGwW2wOV/AgwA+MQnGo+UarEAAAAASUVORK5CYII="/></defs></svg>
\ No newline at end of file
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index abc740fe1..dfd4d6b26 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { onMount } from 'svelte';
-    import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
+    import { AvatarInitials, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
     import { breadcrumb } from '$lib/stores/layout';
@@ -52,10 +51,7 @@
                 arrow={false}
                 scrollable={true}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
-                    <Avatar
-                        size={40}
-                        name={$user.name}
-                        src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()} />
+                    <AvatarInitials size={40} name={$user.name} />
                     <span class="user-profile-info is-only-desktop">
                         <span class="name">{$user.name}</span>
                         {#if $organization}
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 376a6e632..c2bef3379 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -6,6 +6,7 @@ export { default as Navigation } from './navigation.svelte';
 export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
+export { default as Logs } from './logs.svelte';
 export { default as Wizard } from './wizard.svelte';
 export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
new file mode 100644
index 000000000..70a71c273
--- /dev/null
+++ b/src/lib/layout/logs.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { log } from '$lib/stores/logs';
+    import { Status, Tab, Tabs } from '../components';
+    import { Button } from '$lib/elements/forms';
+    import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    let selectedTab: string;
+    let rawData: string;
+
+    function isDeployment(data: Models.Deployment | Models.Execution): data is Models.Deployment {
+        if ('buildId' in data) {
+            selectedTab = 'logs';
+            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/deployment/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            return true;
+        }
+    }
+
+    function isExecution(data: Models.Deployment | Models.Execution): data is Models.Execution {
+        if ('trigger' in data) {
+            selectedTab = 'response';
+            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/execution/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            return true;
+        }
+    }
+
+    function scrollToTop() {
+        document
+            .getElementsByClassName('code-panel-content')[0]
+            .scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+</script>
+
+{#if $log.data}
+    <section class="cover-frame">
+        <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
+            <h1 class="body-text-1" name="title">Function ID: {$log.func.$id}</h1>
+            <button on:click={() => ($log.show = false)} class="x-button" aria-label="close popup">
+                <span class="icon-x" aria-hidden="true" />
+            </button>
+        </header>
+        {#if isDeployment($log.data)}
+            {@const size = humanFileSize($log.data.size)}
+            <div class="cover-frame-content u-flex u-flex-vertical">
+                <div class="u-flex u-gap-16">
+                    <div class="avatar is-size-large">
+                        <img
+                            height="28"
+                            width="28"
+                            src={`${base}/icons/${$app.themeInUse}/color/${
+                                $log.func.runtime.split('-')[0]
+                            }.svg`}
+                            alt="technology" />
+                    </div>
+                    <div>
+                        <h2 class="body-text-2">Deployment ID: {$log.data.$id}</h2>
+                        <time class="u-block"
+                            >Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
+                        <div>Size: {size.value} {size.unit}</div>
+                    </div>
+                    <div class="status u-margin-inline-start-auto">
+                        <Status status={$log.data.status}>{$log.data.status}</Status>
+
+                        <time>TBI</time>
+                    </div>
+                </div>
+                <div class="tabs u-margin-block-start-48 u-sep-block-end">
+                    <Tabs>
+                        <Tab
+                            selected={selectedTab === 'logs'}
+                            on:click={() => (selectedTab = 'logs')}>
+                            Logs
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'errors'}
+                            on:click={() => (selectedTab = 'errors')}>
+                            Errors
+                        </Tab>
+                    </Tabs>
+                </div>
+                <div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
+                    <section class="code-panel">
+                        <header class="code-panel-header">
+                            <div class="u-flex u-gap-16 u-margin-inline-start-auto">
+                                <Button text external href={rawData}>
+                                    <span class="icon-external-link" aria-hidden="true" />
+                                    <span class="text">Raw data</span>
+                                </Button>
+                                <Button secondary on:click={scrollToTop}>
+                                    <span class="text">Scroll to top</span>
+                                </Button>
+                            </div>
+                        </header>
+                        {#if selectedTab === 'logs'}
+                            <code class="code-panel-content">
+                                {$log.data.buildStdout ?? 'No logs recorded'}
+                            </code>
+                        {:else}
+                            <code class="code-panel-content">
+                                {$log.data.buildStderr ?? 'No errors recorded'}
+                            </code>
+                        {/if}
+                    </section>
+                </div>
+            </div>
+        {:else if isExecution($log.data)}
+            <div class="cover-frame-content u-flex u-flex-vertical">
+                <div class="u-flex u-gap-16">
+                    <div class="avatar is-size-large">
+                        <img
+                            height="28"
+                            width="28"
+                            src={`${base}/icons/${$app.themeInUse}/color/${
+                                $log.func.runtime.split('-')[0]
+                            }.svg`}
+                            alt="technology" />
+                    </div>
+                    <div>
+                        <h2 class="body-text-2">Execution ID: {$log.data.$id}</h2>
+                        <time class="u-block">
+                            Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
+                    </div>
+                    <div>
+                        <p>Triggered by: {$log.data.trigger}</p>
+                        <p>Type: TBI</p>
+                    </div>
+                    <div class="status u-margin-inline-start-auto">
+                        <Status status={$log.data.status}>{$log.data.status}</Status>
+
+                        <time>{calculateTime($log.data.duration)}</time>
+                    </div>
+                </div>
+                <div class="tabs u-margin-block-start-48 u-sep-block-end">
+                    <Tabs>
+                        <Tab
+                            selected={selectedTab === 'response'}
+                            on:click={() => (selectedTab = 'response')}>
+                            Response
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'errors'}
+                            on:click={() => (selectedTab = 'errors')}>
+                            Errors
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'logs'}
+                            on:click={() => (selectedTab = 'logs')}>
+                            Logs
+                        </Tab>
+                    </Tabs>
+                </div>
+                <div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
+                    <section class="code-panel">
+                        <header class="code-panel-header">
+                            <div class="u-flex u-gap-16 u-margin-inline-start-auto">
+                                <Button text external href={rawData}>
+                                    <span class="icon-external-link" aria-hidden="true" />
+                                    <span class="text">Raw data</span>
+                                </Button>
+                                <Button secondary on:click={scrollToTop}>
+                                    <span class="text">Scroll to top</span>
+                                </Button>
+                            </div>
+                        </header>
+                        {#if selectedTab === 'logs'}
+                            <code class="code-panel-content">
+                                {$log.data.stdout ?? 'No logs recorded'}
+                            </code>
+                        {:else if selectedTab === 'errors'}
+                            <code class="code-panel-content">
+                                {$log.data.stderr ?? 'No errors recorded'}
+                            </code>
+                        {:else}
+                            <code class="code-panel-content">
+                                {$log.data.response ?? 'No response recorded'}
+                            </code>
+                        {/if}
+                    </section>
+                </div>
+            </div>
+        {/if}
+    </section>
+{/if}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 60f62defc..886628228 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -3,6 +3,7 @@
     import { header } from '$lib/stores/layout';
     import { browser } from '$app/environment';
     import { wizard } from '$lib/stores/wizard';
+    import { log } from '$lib/stores/logs';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -32,7 +33,7 @@
     class:grid-with-side={showSideNavigation}
     class:grid={!showSideNavigation}
     class:is-open={isOpen}
-    class:u-hide={$wizard.show}>
+    class:u-hide={$wizard.show || $log.show}>
     <header class="main-header">
         <button
             class:u-hide={!showSideNavigation}
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 18a634b3f..be86d9b83 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -10,7 +10,7 @@
         'flutter',
         'apple',
         'android',
-        'node_js',
+        'node',
         'php',
         'python',
         'ruby',
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 979f70e2b..4ea566df1 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -1,5 +1,13 @@
 <script context="module" lang="ts">
     export type UsagePeriods = '24h' | '30d' | '90d';
+
+    export function last(set: Models.Metric[]): Models.Metric | null {
+        return set.slice(-1)[0] ?? null;
+    }
+
+    export function total(set: Models.Metric[]): number {
+        return set.reduce((prev, curr) => prev + curr.value, 0);
+    }
 </script>
 
 <script lang="ts">
@@ -27,14 +35,6 @@
     export let deletedMetadata: MetricMetadata;
 
     export let range: UsagePeriods;
-
-    function last(set: Models.Metric[]): Models.Metric | null {
-        return set.slice(-1)[0] ?? null;
-    }
-
-    function total(set: Models.Metric[]): number {
-        return set.reduce((prev, curr) => prev + curr.value, 0);
-    }
 </script>
 
 <Container>
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index ee46327de..40b8e2f23 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -105,7 +105,7 @@
         <slot name="media" />
     </div>
     <div class="wizard-main">
-        <Form on:submit={submit}>
+        <Form noStyle on:submit={submit}>
             {#each sortedSteps as [step, { component }]}
                 {#if currentStep === step}
                     <svelte:component this={component} />
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index b5fc0bfe1..44f46a608 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,4 +1,4 @@
-import { writable, readable, get } from 'svelte/store';
+import { writable, readable } from 'svelte/store';
 import type { SvelteComponent } from 'svelte';
 
 export type Tab = {
diff --git a/src/lib/stores/logs.ts b/src/lib/stores/logs.ts
new file mode 100644
index 000000000..7fd421a6e
--- /dev/null
+++ b/src/lib/stores/logs.ts
@@ -0,0 +1,12 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+
+export const log = writable<{
+    show: boolean;
+    func: Models.Function;
+    data: Models.Execution | Models.Deployment;
+}>({
+    show: false,
+    func: null,
+    data: null
+});
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index c66ceae60..23bd3bf48 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -5,9 +5,11 @@
     import { organizationList, newOrgModal, redirectTo } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
-    import { afterNavigate } from '$app/navigation';
+    import { afterNavigate, beforeNavigate } from '$app/navigation';
     import { onMount } from 'svelte';
     import { wizard } from '$lib/stores/wizard';
+    import { Logs } from '$lib/layout';
+    import { log } from '$lib/stores/logs';
 
     onMount(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
@@ -20,10 +22,19 @@
             return await redirectTo();
         }
     });
+
+    beforeNavigate(() => {
+        $log.show = false;
+    });
+
+    $: if (!$log.show) {
+        $log.data = null;
+        $log.func = null;
+    }
 </script>
 
 <svelte:head>
-    <title>Appwrite - Console</title>
+    <title>Console - Appwrite</title>
 </svelte:head>
 
 <Shell
@@ -47,3 +58,7 @@
 {#if $newOrgModal}
     <Create bind:show={$newOrgModal} closable={!!$organizationList?.total} />
 {/if}
+
+{#if $log.show}
+    <Logs />
+{/if}
diff --git a/src/routes/console/account/+layout.svelte b/src/routes/console/account/+layout.svelte
index 411bb1d3d..83a588b2d 100644
--- a/src/routes/console/account/+layout.svelte
+++ b/src/routes/console/account/+layout.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - User</title>
+    <title>User - Appwrite</title>
 </svelte:head>
 
 <slot />
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index ce97554eb..555130804 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button, Form, FormList, InputText, InputPassword } from '$lib/elements/forms';
-    import { CardGrid, Box, Avatar, Heading } from '$lib/components';
+    import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { onMount } from 'svelte';
     import { user } from '$lib/stores/user';
@@ -21,8 +21,6 @@
         email ??= $user.email;
     });
 
-    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 96, 96).toString();
-
     async function updateName() {
         try {
             await sdkForConsole.account.updateName(name);
@@ -165,7 +163,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="image">
-                    <Avatar size={48} name={$user.name} src={getAvatar($user.name)} />
+                    <AvatarInitials size={48} name={$user.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
                     <h6 class="u-bold">{$user.name}</h6>
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index b6e791b84..2dc314db2 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -21,18 +21,9 @@
         await organizationList.load();
     });
 
-    const getAvatar = (name: string) => {
-        return sdkForConsole.avatars.getInitials(name, 80, 80).toString();
-    };
-
     const getMemberships = async (teamId: string) => {
         const memberships = await sdkForConsole.teams.listMemberships(teamId);
-        return memberships.memberships.map((team) => {
-            return {
-                name: team.userName,
-                img: getAvatar(team.userName)
-            };
-        });
+        return memberships.memberships.map((team) => team.userName);
     };
 
     let addOrganization = false;
diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte
index e53ef2c41..bc7bb1c7f 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Organizations</title>
+    <title>Organizations - Appwrite</title>
 </svelte:head>
 
 {#if $organization}
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index f4b02e21c..02dd5826c 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -8,7 +8,7 @@
         TableCellText,
         TableRow
     } from '$lib/elements/table';
-    import { Avatar, Heading, Pagination } from '$lib/components';
+    import { AvatarInitials, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -27,8 +27,6 @@
     const url = `${$page.url.origin}/console/`;
     const offset = createPersistentPagination($pageLimit);
 
-    const getAvatar = (name: string) =>
-        sdkForConsole.avatars.getInitials(name, 120, 120).toString();
     const deleted = () =>
         memberList.load(
             $organization.$id,
@@ -83,10 +81,7 @@
                     <TableRow>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
-                                <Avatar
-                                    size={40}
-                                    src={getAvatar(member.userName)}
-                                    name={member.userName} />
+                                <AvatarInitials size={40} name={member.userName} />
                                 <span class="text u-trim">
                                     {member.userName ? member.userName : 'n/a'}
                                 </span>
diff --git a/src/routes/console/organization-[organization]/settings/+page.svelte b/src/routes/console/organization-[organization]/settings/+page.svelte
index 98b126df1..cafcd5d28 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -36,12 +36,7 @@
     memberList.subscribe((value) => {
         if (value?.total > 0) {
             avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
-                };
-            });
+            avatars = value.memberships.map((team) => team.userName);
         }
     });
 </script>
diff --git a/src/routes/console/project-[project]/authentication/+layout.svelte b/src/routes/console/project-[project]/authentication/+layout.svelte
index 3c9702374..fb4db2259 100644
--- a/src/routes/console/project-[project]/authentication/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/+layout.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Users</title>
+    <title>Users - Appwrite</title>
 </svelte:head>
 
 <slot />
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index c3350a8d8..a0c6142a9 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Empty, EmptySearch, Pagination, Avatar, Copy, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Copy, Search, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -29,7 +28,6 @@
     const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
         await goto(`${base}/console/project-${project}/authentication/user/${event.detail.$id}`);
     };
@@ -60,7 +58,7 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Identifier</TableCellHead>
+                <TableCellHead>Identifiers</TableCellHead>
                 <TableCellHead width={130}>Status</TableCellHead>
                 <TableCellHead width={100}>ID</TableCellHead>
                 <TableCellHead>Joined</TableCellHead>
@@ -73,10 +71,7 @@
                             <div class="u-flex u-gap-12 u-cross-center">
                                 {#if user.email || user.phone}
                                     {#if user.name}
-                                        <Avatar
-                                            size={32}
-                                            src={getAvatar(user.name)}
-                                            name={user.name} />
+                                        <AvatarInitials size={32} name={user.name} />
                                         <span class="text u-trim">{user.name}</span>
                                     {:else}
                                         <div class="avatar is-size-small ">
@@ -91,7 +86,7 @@
                                 {/if}
                             </div>
                         </TableCell>
-                        <TableCellText title="Identifier">
+                        <TableCellText title="Identifiers">
                             {user.email && user.phone
                                 ? [user.email, user.phone].join(',')
                                 : user.email || user.phone}
diff --git a/src/routes/console/project-[project]/authentication/security/+page.svelte b/src/routes/console/project-[project]/authentication/security/+page.svelte
index 82f573e90..2c9920d8e 100644
--- a/src/routes/console/project-[project]/authentication/security/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/security/+page.svelte
@@ -74,8 +74,8 @@
         <Heading tag="h2" size="6">Users Limit</Heading>
         <p>
             Limit new users from signing up for your project, regardless of authentication method.
-            You can still create users and team memberships from your Appwrite console. <b>
-                The maximum limit is 10,000 users.</b>
+            You can still create users and team memberships from your Appwrite console.
+            <b> The maximum limit is 10,000 users.</b>
         </p>
 
         <svelte:fragment slot="aside">
@@ -121,6 +121,7 @@
                             name="limit"
                             id="limit"
                             class="input-text"
+                            max="10000"
                             disabled={isLimited === 'unlimited'}
                             bind:value={newLimit} />
                     </div>
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index be55c393e..aa1f07f46 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
     import {
         Table,
         TableHeader,
@@ -11,7 +10,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptySearch, Pagination, Avatar, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Search, AvatarInitials } from '$lib/components';
     import Create from '../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
@@ -28,7 +27,6 @@
     const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
         await goto(`${base}/console/project-${project}/authentication/teams/${event.detail.$id}`);
     };
@@ -68,7 +66,7 @@
                         href={`${base}/console/project-${project}/authentication/teams/${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
-                                <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
+                                <AvatarInitials size={32} name={team.name} />
                                 <span class="text u-trim">{team.name}</span>
                             </div>
                         </TableCell>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
index 227328010..913672094 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Team</title>
+    <title>Team - Appwrite</title>
 </svelte:head>
 
 {#if $team}
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
index 7faff0826..5c072a454 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { Avatar, CardGrid, Box, Heading } from '$lib/components';
+    import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Form } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -10,8 +10,6 @@
     import { team } from './store';
     import DeleteTeam from './_deleteTeam.svelte';
 
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
-
     let showDelete = false;
     let teamName: string = null;
 
@@ -39,7 +37,7 @@
 <Container>
     <CardGrid>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-            <Avatar size={48} name={$team.name} src={getAvatar($team.name)} />
+            <AvatarInitials size={48} name={$team.name} />
             <div>
                 <Heading tag="h6" size="7">{$team.name}</Heading>
             </div>
@@ -89,7 +87,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="image">
-                    <Avatar size={48} name={$team.name} src={getAvatar($team.name)} />
+                    <AvatarInitials size={48} name={$team.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
                     <h6 class="u-bold">{$team.name}</h6>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index 41e5991c5..7774adbf1 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Pagination, Empty, EmptySearch, Avatar, Search } from '$lib/components';
+    import { Pagination, Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -14,7 +14,6 @@
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { sdkForProject } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { memberships } from '../store';
     import CreateMember from '../_createMembership.svelte';
@@ -29,7 +28,6 @@
 
     const project = $page.params.project;
     const offset = createPersistentPagination($pageLimit);
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
 
     $: if (search) $offset = 0;
     $: memberships.load(
@@ -79,10 +77,7 @@
                         href={`${base}/console/project-${project}/authentication/user/${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
-                                <Avatar
-                                    size={32}
-                                    src={getAvatar(membership.userName)}
-                                    name={membership.userName} />
+                                <AvatarInitials size={32} name={membership.userName} />
                                 <span>{membership.userName ? membership.userName : 'n/a'}</span>
                             </div>
                         </TableCellText>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
index 68b81ed28..2ee46f3fb 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - User</title>
+    <title>User - Appwrite</title>
 </svelte:head>
 
 {#if $user}
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
index 698747786..11ee3013a 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Avatar, CardGrid, Box, DropList, DropListItem, Heading } from '$lib/components';
+    import {
+        CardGrid,
+        Box,
+        DropList,
+        DropListItem,
+        Heading,
+        AvatarInitials
+    } from '$lib/components';
     import { Pill } from '$lib/elements';
     import {
         Button,
@@ -48,8 +55,6 @@
         userPhone ??= $user.phone;
     });
 
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
-
     async function updateVerificationEmail() {
         showVerifcationDropdown = false;
         try {
@@ -190,7 +195,7 @@
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
             {#if $user.email || $user.phone}
                 {#if $user.name}
-                    <Avatar size={48} src={getAvatar($user.name)} name={$user.name} />
+                    <AvatarInitials size={48} name={$user.name} />
                     <Heading tag="h6" size="7">{$user.name}</Heading>
                 {:else}
                     <div class="avatar">
@@ -452,7 +457,7 @@
                 <svelte:fragment slot="image">
                     {#if $user.email || $user.phone}
                         {#if $user.name}
-                            <Avatar size={48} src={getAvatar($user.name)} name={$user.name} />
+                            <AvatarInitials size={48} name={$user.name} />
                         {:else}
                             <div class="avatar">
                                 <span class="icon-minus-sm" aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index 35c9bd2b1..20921e487 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { base } from '$app/paths';
-    import { Pagination, Empty, Avatar } from '$lib/components';
+    import { Pagination, Empty, AvatarInitials } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -26,7 +26,6 @@
 
     const project = $page.params.project;
     const offset = createPersistentPagination($pageLimit);
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
 
     $: request = sdkForProject.users.listMemberships($page.params.user);
 
@@ -57,10 +56,7 @@
                             href={`${base}/console/project-${project}/authentication/teams/${membership.teamId}`}>
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
-                                    <Avatar
-                                        size={32}
-                                        src={getAvatar(membership.teamName)}
-                                        name={membership.teamName} />
+                                    <AvatarInitials size={32} name={membership.teamName} />
                                     <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                                 </div>
                             </TableCellText>
diff --git a/src/routes/console/project-[project]/databases/+layout.svelte b/src/routes/console/project-[project]/databases/+layout.svelte
index d4d2d4190..a5dac35a5 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Database</title>
+    <title>Database - Appwrite</title>
 </svelte:head>
 
 {#if loaded}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
index 4f86f17e0..84a39c538 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Database</title>
+    <title>Database - Appwrite</title>
 </svelte:head>
 
 {#if loaded}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
index 55b38bfdf..5106a7a8a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - {$collection?.name ?? 'Collection'}</title>
+    <title>{$collection?.name ?? 'Collection'} - Appwrite</title>
 </svelte:head>
 
 {#if $collection && loaded}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
index 59b64eda7..d7c5c4827 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Database Document</title>
+    <title>Database Document - Appwrite</title>
 </svelte:head>
 
 {#if $doc}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
index d1c86a89d..621adcac5 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
@@ -46,7 +46,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Document</title>
+    <title>Document - Appwrite</title>
 </svelte:head>
 
 <Container>
@@ -84,7 +84,7 @@
         </CardGrid>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Delete document</Heading>
+            <Heading tag="h6" size="7">Delete Document</Heading>
             <p>
                 The document will be permanently deleted, including all the data within it. This
                 action is irreversible.
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
index 505f0a3bb..b5067c22b 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
@@ -12,7 +12,7 @@
     {id}
     {label}
     required={attribute.required}
-    minlength={attribute.min}
-    maxlength={attribute.max}
+    min={attribute.min}
+    max={attribute.max}
     bind:value
     step={attribute.type === 'double' ? 'any' : 1} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index 352eb14ea..a957e54e3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -214,7 +214,7 @@
         </CardGrid>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Delete collection</Heading>
+            <Heading tag="h6" size="7">Delete Collection</Heading>
             <p>
                 The collection will be permanently deleted, including all the documents within it.
                 This action is irreversible.
diff --git a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
index 88143451a..f7d315e7b 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Card, Avatar, CardGrid, Box, Heading } from '$lib/components';
+    import { Card, CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Helper } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -11,7 +11,6 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
 
     const databaseId = $page.params.database;
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
     let showDelete = false;
     let showError: false | 'name' | 'email' | 'password' = false;
@@ -50,7 +49,7 @@
             <div class="common-section grid-1-2">
                 <div class="grid-1-2-col-1">
                     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-                        <Avatar size={48} name={$database.name} src={getAvatar($database.name)} />
+                        <AvatarInitials size={48} name={$database.name} />
                         <Heading tag="h6" size="7">{$database.name}</Heading>
                     </div>
                 </div>
@@ -99,7 +98,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="image">
-                        <Avatar size={48} name={$database.name} src={getAvatar($database.name)} />
+                        <AvatarInitials size={48} name={$database.name} />
                     </svelte:fragment>
                     <svelte:fragment slot="title">
                         <h6 class="u-bold">{$database.name}</h6>
diff --git a/src/routes/console/project-[project]/functions/+layout.svelte b/src/routes/console/project-[project]/functions/+layout.svelte
index 39a290051..ceddf8198 100644
--- a/src/routes/console/project-[project]/functions/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/+layout.svelte
@@ -1,26 +1,51 @@
-<script>
-    // import { afterNavigate } from '$app/navigation';
-    // import { updateLayout } from '$lib/stores/layout';
-    // import { onMount } from 'svelte';
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { afterNavigate } from '$app/navigation';
+    import { updateLayout } from '$lib/stores/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { deploymentList } from './function/[function]/store';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
-    // onMount(handle);
-    // afterNavigate(handle);
+    let loaded = false;
 
-    // function handle(event = null) {
-    //     updateLayout({
-    //         navigate: event,
-    //         title: 'Functions',
-    //         level: 3,
-    //         breadcrumbs: {
-    //             href: 'functions',
-    //             title: 'Functions'
-    //         }
-    //     });
-    // }
+    if (browser) {
+        sdkForConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (message.events.includes('functions.*.deployments.*.create')) {
+                deploymentList.createDeployment(message.payload);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.update')) {
+                deploymentList.updateDeployment(message.payload);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.delete')) {
+                //TODO: add delete method
+
+                return;
+            }
+        });
+    }
+    onMount(handle);
+    afterNavigate(handle);
+
+    function handle() {
+        updateLayout({
+            breadcrumb: Breadcrumbs,
+            header: Header
+        });
+        loaded = true;
+    }
 </script>
 
 <svelte:head>
-    <title>Appwrite - Functions</title>
+    <title>Functions - Appwrite</title>
 </svelte:head>
 
-<slot />
+{#if loaded}
+    <slot />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index 4d69a9146..efc48a4ac 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -1,63 +1,124 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Empty, Pagination, Tile, Tiles } from '$lib/components';
-    import Create from './_create.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Empty, CardContainer, Pagination, Copy, GridItem1, Heading } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import Create from './createFunction.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
+    import { tooltip } from '$lib/actions/tooltip';
+    import { functionList } from './store';
+    import { app } from '$lib/stores/app';
+    import { onMount } from 'svelte';
+    import { wizard } from '$lib/stores/wizard';
+    import { beforeNavigate } from '$app/navigation';
     import { Query } from '@aw-labs/appwrite-console';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { cardLimit } from '$lib/stores/layout';
 
     let search = '';
-    let showCreate = false;
     let offset = 0;
 
-    const limit = 25;
     const project = $page.params.project;
 
-    $: request = sdkForProject.functions.list([Query.limit(0), Query.offset(0)], search);
+    let deployments: Record<string, Models.Deployment> = null;
+    onMount(async () => {
+        deployments = await functionList.getDeployments($functionList.functions);
+    });
+
+    function openWizard() {
+        wizard.start(Create);
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    $: functionList.load(
+        [Query.limit($cardLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        search
+    );
     $: if (search) offset = 0;
 </script>
 
 <Container>
-    <h1>Functions</h1>
-    <Card>
-        <InputSearch bind:value={search} />
-    </Card>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Functions</Heading>
+        <Button on:click={openWizard}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create function</span>
+        </Button>
+    </div>
 
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <p>{response.total} functions found</p>
-            <Tiles>
-                {#each response.functions as func}
-                    <Tile
-                        href={`${base}/console/project-${project}/functions/function/${func.$id}`}
-                        title={func.name} />
-                {/each}
-            </Tiles>
+    {#if $functionList?.total}
+        <CardContainer total={$functionList.total} {offset} on:click={openWizard}>
+            {#each $functionList.functions as func}
+                <GridItem1
+                    href={`${base}/console/project-${project}/functions/function/${func.$id}`}>
+                    <svelte:fragment slot="title">
+                        <div class="u-flex u-gap-32 u-cross-center">
+                            <div class="avatar is-medium">
+                                <img
+                                    src={`${base}/icons/${$app.themeInUse}/color/${
+                                        func.runtime.split('-')[0]
+                                    }.svg`}
+                                    alt="technology" />
+                            </div>
+                            <span class="text">{func.name}</span>
+                        </div>
+                    </svelte:fragment>
+                    <svelte:fragment slot="status">
+                        {#if deployments && deployments[func.$id]}
+                            {deployments[func.$id].status ?? 'No deployment'}
+                        {/if}
+                    </svelte:fragment>
+                    <svelte:fragment slot="icons">
+                        {#if deployments && deployments[func.$id] && deployments[func.$id].status === 'failed'}
+                            <li>
+                                <span
+                                    class="icon-exclamation"
+                                    aria-hidden="true"
+                                    use:tooltip={{
+                                        content: 'Build error'
+                                    }} />
+                            </li>
+                        {/if}
+                        {#if func.scheduleNext}
+                            <li>
+                                <span
+                                    class="icon-clock"
+                                    aria-hidden="true"
+                                    use:tooltip={{
+                                        content: `Next execution: 
+                                        ${toLocaleDateTime(func.scheduleNext)}`
+                                    }} />
+                            </li>
+                        {/if}
+                    </svelte:fragment>
 
-            <Pagination {limit} bind:offset sum={response.total} />
-        {:else if search}
-            <Empty>
-                <div class="u-flex u-flex-vertical">
-                    No results found for <b>{search}</b>
-                </div>
-            </Empty>
-        {:else}
-            <Empty>
-                <div class="u-flex u-flex-vertical">
-                    <div class="common-section">No Functions Found</div>
-                    <div class="common-section">
-                        You haven't created any functions for your project yet.
-                    </div>
-                </div>
-            </Empty>
-        {/if}
-    {/await}
-
-    <Button on:click={() => (showCreate = true)}>Create Function</Button>
+                    <Copy value={func.$id}>
+                        <Pill button><i class="icon-duplicate" />Function ID</Pill>
+                    </Copy>
+                </GridItem1>
+            {/each}
+            <svelte:fragment slot="empty">
+                <p>Create a new function</p>
+            </svelte:fragment>
+        </CardContainer>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$functionList.total}</p>
+            <Pagination limit={$cardLimit} bind:offset sum={$functionList.total} />
+        </div>
+    {:else}
+        <Empty isButton single on:click={openWizard}>
+            <div class="u-text-center">
+                <p class="text">Create your first function to get started</p>
+                <p class="text">Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12">
+                <Button external text>Documentation</Button>
+                <Button secondary on:click={openWizard}>Create function</Button>
+            </div>
+        </Empty>
+    {/if}
 </Container>
-
-<Create bind:showCreate />
diff --git a/src/routes/console/project-[project]/functions/_create.svelte b/src/routes/console/project-[project]/functions/_create.svelte
deleted file mode 100644
index 4e5d9c699..000000000
--- a/src/routes/console/project-[project]/functions/_create.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, Form, InputText } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-
-    export let showCreate = false;
-
-    const dispatch = createEventDispatcher();
-
-    let name = '';
-
-    const create = async () => {
-        try {
-            await sdkForProject.storage.createBucket('unique()', name);
-            name = null;
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-</script>
-
-<Form on:submit={create}>
-    <Modal bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Function</svelte:fragment>
-        <InputText id="name" label="Name" bind:value={name} required />
-        <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/functions/breadcrumbs.svelte b/src/routes/console/project-[project]/functions/breadcrumbs.svelte
new file mode 100644
index 000000000..9259aa4f4
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/functions`,
+            title: 'Functions'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/functions/createFunction.svelte b/src/routes/console/project-[project]/functions/createFunction.svelte
new file mode 100644
index 000000000..b18299e61
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/createFunction.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { functionList } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onDestroy } from 'svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import Step3 from './wizard/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
+    import Step5 from './wizard/step5.svelte';
+    import { createFunction } from './wizard/store';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import { Query } from '@aw-labs/appwrite-console';
+
+    const create = async () => {
+        try {
+            const response = await sdkForProject.functions.create(
+                $createFunction.id ?? 'unique()',
+                $createFunction.name,
+                $createFunction.execute,
+                $createFunction.runtime,
+                $createFunction.events,
+                $createFunction.schedule,
+                $createFunction.timeout
+            );
+            $createFunction.vars.forEach(
+                async (v) =>
+                    await sdkForProject.functions.createVariable(response.$id, v.key, v.value)
+            );
+            addNotification({
+                message: 'Function has been created',
+                type: 'success'
+            });
+            functionList.load([Query.limit(6), Query.offset(0), Query.orderDesc('$createdAt')]);
+            wizard.hide();
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
+
+    onDestroy(() => {
+        $createFunction = {
+            id: null,
+            name: null,
+            execute: [],
+            runtime: null,
+            vars: [],
+            events: [],
+            schedule: null,
+            timeout: null
+        };
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Function Details',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Execute access',
+        component: Step2,
+        optional: true
+    });
+    stepsComponents.set(3, {
+        label: 'Events',
+        component: Step3,
+        optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'Scheduling',
+        component: Step4,
+        optional: true
+    });
+    stepsComponents.set(5, {
+        label: 'Variables',
+        component: Step5,
+        optional: true
+    });
+</script>
+
+<Wizard title="Create Function" steps={stepsComponents} on:finish={create} />
diff --git a/src/routes/console/project-[project]/functions/createVariable.svelte b/src/routes/console/project-[project]/functions/createVariable.svelte
new file mode 100644
index 000000000..8c0ea8700
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/createVariable.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { Button, Form } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText, InputPassword, FormList } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let showCreate = false;
+
+    export let selectedVar: Partial<Models.Variable> = null;
+
+    let pair = {
+        $id: selectedVar?.$id,
+        key: selectedVar?.key,
+        value: selectedVar?.value
+    };
+
+    const dispatch = createEventDispatcher();
+
+    const handleVariable = () => {
+        if (selectedVar) {
+            dispatch('updated', pair);
+        } else {
+            dispatch('created', pair);
+        }
+        showCreate = false;
+    };
+</script>
+
+<Form noStyle noMargin on:submit={handleVariable}>
+    <Modal bind:show={showCreate} size="big">
+        <svelte:fragment slot="header">
+            {selectedVar ? 'Update' : 'Create'} Variable
+        </svelte:fragment>
+        <FormList>
+            <InputText
+                id="key"
+                label="Key"
+                placeholder="Enter key"
+                bind:value={pair.key}
+                required
+                autofocus />
+            <InputPassword
+                id="value"
+                label="Value"
+                minlength={0}
+                showPasswordButton
+                placeholder="Enter value"
+                bind:value={pair.value}
+                required />
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+            <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte b/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
index 8192f6cfe..13c8951d7 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
@@ -2,7 +2,11 @@
     import { afterNavigate } from '$app/navigation';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
-    import { func } from './store';
+    import { func, execute } from './store';
+    import Execute from './execute.svelte';
+    import { updateLayout } from '$lib/stores/layout';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     const functionId = $page.params.function;
 
@@ -15,36 +19,17 @@
             await promise;
         }
 
-        // updateLayout({
-        //     navigate: event,
-        //     title: $func.name,
-        //     level: 4,
-        //     breadcrumbs: {
-        //         title: $func.name,
-        //         href: `function/${functionId}`
-        //     },
-        //     tabs: [
-        //         {
-        //             href: path,
-        //             title: 'Overview'
-        //         },
-        //         {
-        //             href: `${path}/monitors`,
-        //             title: 'Monitors'
-        //         },
-        //         {
-        //             href: `${path}/logs`,
-        //             title: 'Logs'
-        //         },
-        //         {
-        //             href: `${path}/settings`,
-        //             title: 'Settings'
-        //         }
-        //     ]
-        // });
+        updateLayout({
+            breadcrumb: Breadcrumbs,
+            header: Header
+        });
     }
 </script>
 
 {#if $func}
     <slot />
 {/if}
+
+{#if $execute}
+    <Execute selectedFunction={$execute} />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
index a81145efa..01f1f4ddd 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
@@ -1,81 +1,256 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import {
+        CardGrid,
+        Pagination,
+        Copy,
+        DropList,
+        DropListItem,
+        Empty,
+        Status,
+        Heading
+    } from '$lib/components';
     import {
         Table,
         TableHeader,
         TableBody,
         TableRow,
         TableCellHead,
-        TableCellLink,
+        TableCell,
         TableCellText
     } from '$lib/elements/table';
-    import { func } from './store';
+    import { deploymentList, execute, func } from './store';
     import { Container } from '$lib/layout';
-    import Create from './_create.svelte';
+    import Create from './create.svelte';
     import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { pageLimit } from '$lib/stores/layout';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import Delete from './delete.svelte';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import Activate from './activate.svelte';
     import { Query } from '@aw-labs/appwrite-console';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { log } from '$lib/stores/logs';
 
     let search = '';
-    let showCreate = false;
     let offset = 0;
+    let showCreate = false;
+    let showDropdown = [];
+    let showDelete = false;
+    let showActivate = false;
+
+    let selectedDeployment: Models.Deployment = null;
 
-    const limit = 25;
-    const project = $page.params.project;
     const functionId = $page.params.function;
 
-    $: request = sdkForProject.functions.listDeployments(
+    const handleActivate = () => {
+        func.load(functionId);
+    };
+
+    function loadDeployments() {
+        deploymentList.load(
+            functionId,
+            [Query.offset(offset), Query.limit($pageLimit), Query.orderDesc('$createdAt')],
+            search
+        );
+    }
+
+    $: deploymentList.load(
         functionId,
-        [Query.offset(offset), Query.limit(limit)],
+        [Query.offset(offset), Query.limit($pageLimit), Query.orderDesc('$createdAt')],
         search
     );
     $: if (search) offset = 0;
+    $: activeDeployment = $deploymentList?.deployments?.find((d) => d.$id === $func?.deployment);
 </script>
 
 <Container>
-    <h1>Overview</h1>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Deployments</Heading>
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create deployment</span>
+        </Button>
+    </div>
+    {#if $deploymentList?.total}
+        <div class="common-section">
+            <Heading tag="h3" size="7">Active</Heading>
+        </div>
+        {#if activeDeployment}
+            <CardGrid>
+                <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+                    <div class="avatar is-medium">
+                        <img
+                            src={`${base}/icons/${$app.themeInUse}/color/${
+                                $func.runtime.split('-')[0]
+                            }.svg`}
+                            alt="technology" />
+                    </div>
+                    <div>
+                        <p><b>Function ID: {$func.$id} </b></p>
+                        <p>Deployment ID: {$func.deployment}</p>
+                    </div>
+                </div>
+                <svelte:fragment slot="aside">
+                    <div class="u-flex u-main-space-between">
+                        <div>
+                            <p>Created at: {toLocaleDateTime($func.$createdAt)}</p>
+                            <p>Updated at: {toLocaleDateTime($func.$updatedAt)}</p>
+                            <p>Entrypoint: {activeDeployment?.entrypoint}</p>
+                        </div>
 
-    <Card>
-        <p><b>Function ID:</b> {$func.$id}</p>
-        <p><b>Runtime:</b> {$func.runtime}</p>
-        <p><b>Last Updated:</b> {$func.$updatedAt}</p>
-        <p><b>Created:</b> {$func.$createdAt}</p>
-    </Card>
+                        <Status status={activeDeployment.status}>
+                            {activeDeployment.status}
+                        </Status>
+                    </div>
+                </svelte:fragment>
 
-    <h1>Deployments</h1>
+                <svelte:fragment slot="actions">
+                    <Button
+                        text
+                        on:click={() => {
+                            $log.show = true;
+                            $log.func = $func;
+                            $log.data = activeDeployment;
+                        }}>Logs</Button>
+                    <Button secondary on:click={() => execute.set($func)}>Execute now</Button>
+                </svelte:fragment>
+            </CardGrid>
+        {:else}
+            <Empty single isButton on:click={() => (showCreate = true)}>
+                <div class="u-text-center">
+                    <p>
+                        Create a new deployment, or activate an existing one to see your function in
+                        action.
+                    </p>
+                    <p>Need a hand? Check out our documentation.</p>
+                </div>
+                <div class="u-flex u-gap-12">
+                    <Button text external href="https://appwrite.io/docs/functions#createFunction">
+                        Documentation
+                    </Button>
+                    <Button secondary on:click={() => (showCreate = true)}>
+                        Create Deployment
+                    </Button>
+                </div>
+            </Empty>
+        {/if}
 
-    <Card>
-        <InputSearch bind:value={search} />
-    </Card>
+        <div class="common-section">
+            <Heading tag="h3" size="7">Inactive</Heading>
+        </div>
 
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
         <Table>
             <TableHeader>
-                <TableCellHead>ID</TableCellHead>
-                <TableCellHead>Active</TableCellHead>
+                <TableCellHead>Deployment ID</TableCellHead>
+                <TableCellHead width={140}>Created</TableCellHead>
+                <TableCellHead width={100}>Status</TableCellHead>
+                <TableCellHead width={90}>Build time</TableCellHead>
+                <TableCellHead width={70}>Size</TableCellHead>
+                <TableCellHead width={60} />
+                <TableCellHead width={25} />
             </TableHeader>
             <TableBody>
-                {#each response.deployments as deployment}
-                    <TableRow>
-                        <TableCellLink
-                            title="ID"
-                            href={`${base}/console/project-${project}/storage/bucket/${functionId}/${deployment.$id}`}>
-                            {deployment.$id}
-                        </TableCellLink>
-                        <TableCellText title="Active">{deployment.activate}</TableCellText>
-                    </TableRow>
+                {#each $deploymentList.deployments as deployment, index}
+                    {#if deployment.$id !== $func.deployment}
+                        <TableRow>
+                            <TableCell title="Deployment ID">
+                                <Copy value={deployment.$id}>
+                                    <Pill button>
+                                        <span class="icon-duplicate" aria-hidden="true" />
+                                        <span class="text u-trim">{deployment.$id}</span>
+                                    </Pill>
+                                </Copy>
+                            </TableCell>
+                            <TableCellText title="Created">
+                                {toLocaleDateTime(deployment.$createdAt)}
+                            </TableCellText>
+
+                            <TableCell title="Status">
+                                <Status status={deployment.status}>
+                                    {deployment.status}
+                                </Status>
+                            </TableCell>
+                            <!-- TODO: replace with build time, when implemented -->
+                            <TableCellText title="Build Time">TBI</TableCellText>
+                            <TableCellText title="Size">
+                                {calculateSize(deployment.size)}
+                            </TableCellText>
+                            <TableCell>
+                                <Button
+                                    secondary
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showActivate = true;
+                                    }}>
+                                    <span class="text">Activate</span>
+                                </Button>
+                            </TableCell>
+                            <TableCell showOverflow>
+                                <DropList
+                                    bind:show={showDropdown[index]}
+                                    position="bottom"
+                                    horizontal="left"
+                                    arrow={false}>
+                                    <button
+                                        class="button is-only-icon is-text"
+                                        aria-label="More options"
+                                        on:click|preventDefault={() => {
+                                            showDropdown[index] = !showDropdown[index];
+                                        }}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                    </button>
+                                    <svelte:fragment slot="list">
+                                        <DropListItem
+                                            icon="terminal"
+                                            on:click={() => {
+                                                selectedDeployment = deployment;
+                                                showDropdown = [];
+                                            }}>Output</DropListItem>
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={() => {
+                                                selectedDeployment = deployment;
+                                                showDropdown = [];
+                                                showDelete = true;
+                                            }}>Delete</DropListItem>
+                                    </svelte:fragment>
+                                </DropList>
+                            </TableCell>
+                        </TableRow>
+                    {/if}
                 {/each}
             </TableBody>
         </Table>
-
-        <Pagination {limit} bind:offset sum={response.total} />
-    {/await}
-
-    <Button on:click={() => (showCreate = true)}>Upload</Button>
+    {:else}
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <div class="u-text-center">
+                <p>
+                    Create a new deployment, or activate an existing one to see your function in
+                    action.
+                </p>
+                <p>Need a hand? Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12">
+                <Button text external href="https://appwrite.io/docs/functions#createFunction">
+                    Documentation
+                </Button>
+                <Button secondary on:click={() => (showCreate = true)}>Create Deployment</Button>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {$deploymentList?.total}</p>
+        <Pagination limit={$pageLimit} bind:offset sum={$deploymentList?.total} />
+    </div>
 </Container>
 
-<Create bind:showCreate />
+<Create bind:showCreate on:created={loadDeployments} />
+
+{#if selectedDeployment}
+    <Delete {selectedDeployment} bind:showDelete />
+    <Activate {selectedDeployment} bind:showActivate on:activated={handleActivate} />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/function/[function]/_create.svelte b/src/routes/console/project-[project]/functions/function/[function]/_create.svelte
deleted file mode 100644
index a0dfd86f5..000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/_create.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import { InputSwitch, Button, InputFile, InputText, Form } from '$lib/elements/forms';
-    import { Modal } from '$lib/components';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
-    import { clickOnEnter } from '$lib/helpers/a11y';
-
-    export let showCreate = false;
-
-    let showCli = true;
-    let entrypoint: string;
-    let code: FileList;
-    let active: boolean;
-
-    const functionId = $page.params.function;
-    const dispatch = createEventDispatcher();
-
-    const create = async () => {
-        try {
-            await sdkForProject.functions.createDeployment(functionId, entrypoint, code[0], active);
-            code = entrypoint = active = null;
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-</script>
-
-<Form on:submit={create}>
-    <Modal bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Deployment</svelte:fragment>
-        <ul class="tabs">
-            <li class="tabs-item">
-                <span
-                    class="tabs-button"
-                    on:click={() => (showCli = true)}
-                    on:keyup={clickOnEnter}
-                    class:is-selected={showCli}>
-                    <span class="text">Files</span>
-                </span>
-            </li>
-            <li class="tabs-item">
-                <span
-                    class="tabs-button"
-                    on:click={() => (showCli = false)}
-                    on:keyup={clickOnEnter}
-                    class:is-selected={!showCli}>
-                    <span class="text">Usage</span>
-                </span>
-            </li>
-        </ul>
-        {#if showCli}
-            <p>Unix</p>
-            <p>Powershell</p>
-            <p>Learn more about creating deployments, installing and using the Appwrite CLI.</p>
-        {:else}
-            <InputText id="entrypoint" label="Entrypoint" bind:value={entrypoint} required />
-            <InputFile id="file" label="File" bind:files={code} required />
-            <InputSwitch id="active" label="Activate Deployment after build" bind:value={active} />
-        {/if}
-        <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/activate.svelte b/src/routes/console/project-[project]/functions/function/[function]/activate.svelte
new file mode 100644
index 000000000..deeb750ac
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/activate.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showActivate = false;
+    export let selectedDeployment: Models.Deployment = null;
+
+    const dispatch = createEventDispatcher();
+
+    const handleSubmit = async () => {
+        try {
+            await sdkForProject.functions.updateDeployment(
+                selectedDeployment.resourceId,
+                selectedDeployment.$id
+            );
+            showActivate = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been activated`
+            });
+            dispatch('activated');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form noMargin on:submit={handleSubmit}>
+    <Modal bind:show={showActivate}>
+        <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
+        <p>Are you sure you want to activate this deployment?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showActivate = false)}>Cancel</Button>
+            <Button secondary submit>Activate</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte b/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte
new file mode 100644
index 000000000..26be510d5
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { func } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/functions`,
+            title: 'Functions'
+        },
+        {
+            href: `/console/project-${$project.$id}/functions/function/${$func.$id}`,
+            title: $func.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/functions/function/[function]/create.svelte b/src/routes/console/project-[project]/functions/function/[function]/create.svelte
new file mode 100644
index 000000000..97973aa9e
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/create.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { InputChoice, Button, InputText, InputFile, Form } from '$lib/elements/forms';
+    import { Modal, Collapsible, CollapsibleItem, Tabs, Tab, Code } from '$lib/components';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/stores';
+    import FormList from '$lib/elements/forms/formList.svelte';
+    import Github from '$lib/images/github-illustration.svg';
+
+    export let showCreate = false;
+
+    enum Mode {
+        CLI,
+        Github,
+        Manual
+    }
+    let mode: Mode = Mode.CLI;
+    let entrypoint: string;
+    let active: boolean;
+    let files: FileList;
+
+    const functionId = $page.params.function;
+    const dispatch = createEventDispatcher();
+
+    const create = async () => {
+        try {
+            await sdkForProject.functions.createDeployment(
+                functionId,
+                entrypoint,
+                files[0],
+                active
+            );
+            files = entrypoint = active = null;
+            showCreate = false;
+            dispatch('created');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    const codeSnippets = {
+        Unix: {
+            code: `appwrite functions createDeployment \\ 
+    --functionId=${functionId} \\ 
+    --entrypoint='index.js' \\ 
+    --code="." \\ 
+    --activate=true`,
+            language: 'bash'
+        },
+
+        CMD: {
+            code: `appwrite functions createDeployment ^
+    --functionId=${functionId} ^
+    --entrypoint='index.js' ^
+    --code="." ^
+    --activate=true`,
+            language: 'CMD'
+        },
+        PowerShell: {
+            code: `appwrite functions createDeployment ,
+    --functionId=${functionId} ,
+    --entrypoint='index.js' ,
+    --code="." ,
+    --activate=true`,
+            language: 'PowerShell'
+        }
+    };
+</script>
+
+<Form noStyle noMargin on:submit={create}>
+    <Modal size="big" bind:show={showCreate}>
+        <svelte:fragment slot="header">Create Deployment</svelte:fragment>
+        <Tabs>
+            <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI}>CLI</Tab>
+            <Tab on:click={() => (mode = Mode.Github)} selected={mode === Mode.Github}>
+                GitHub - Soon!
+            </Tab>
+            <Tab on:click={() => (mode = Mode.Manual)} selected={mode === Mode.Manual}>Manual</Tab>
+        </Tabs>
+        {#if mode === Mode.CLI}
+            <p class="text">
+                You can deploy your function from the Appwrite CLI using Unix, CMD, or PowerShell.
+                Check out our Documentation to learn more about <a
+                    href="https://appwrite.io/docs/functions#deployFunction"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">deploying your functions</a
+                >, or how to install and use the
+                <a href="#/" target="_blank" rel="noopener noreferrer" class="link">Appwrite CLI</a
+                >.
+            </p>
+            <Collapsible>
+                {#each ['Unix', 'CMD', 'PowerShell'] as category}
+                    <CollapsibleItem>
+                        <svelte:fragment slot="title">{category}</svelte:fragment>
+                        <Code
+                            withLineNumbers
+                            withCopy
+                            language="sh"
+                            label={codeSnippets[category].language}
+                            code={codeSnippets[category].code} />
+                    </CollapsibleItem>
+                {/each}
+            </Collapsible>
+        {:else if mode === Mode.Github}
+            <div class="common-section grid-1-2">
+                <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
+                    <img src={Github} alt="github" />
+                </div>
+                <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
+                    <h3 class="body-text-1">Coming Soon!</h3>
+                    <p>
+                        Creating deployments will be easier than ever with our upcoming Git
+                        Integration. Just set up a repository and we’ll do the rest.
+                    </p>
+                </div>
+            </div>
+        {:else if mode === Mode.Manual}
+            <FormList>
+                <InputText
+                    label="Entrypoint"
+                    placeholder="main.py"
+                    id="entrypoint"
+                    bind:value={entrypoint}
+                    required />
+                <InputFile label="Gzipped code (tar.gz)" bind:files />
+                <InputChoice
+                    label="Activate Deployment after build"
+                    id="activate"
+                    bind:value={active}>
+                    This deployment will be activated after the build is completed.</InputChoice>
+            </FormList>
+        {/if}
+        <svelte:fragment slot="footer">
+            {#if mode === Mode.Manual}
+                <Button secondary on:click={() => (showCreate = false)}>Close</Button>
+                <Button submit>Create</Button>
+            {:else}
+                <Button secondary on:click={() => (showCreate = false)}>Close</Button>
+            {/if}
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/delete.svelte b/src/routes/console/project-[project]/functions/function/[function]/delete.svelte
new file mode 100644
index 000000000..c4eaa6e69
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/delete.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let showDelete = false;
+    export let selectedDeployment: Models.Deployment = null;
+
+    const handleSubmit = async () => {
+        try {
+            await sdkForProject.functions.deleteDeployment(
+                selectedDeployment.resourceId,
+                selectedDeployment.$id
+            );
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been deleted`
+            });
+            await goto(
+                `${base}/console/project-${$page.params.project}/functions/${selectedDeployment.resourceId}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form noStyle noMargin on:submit={handleSubmit}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
+        <p>Are you sure you want to delete this deployment?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/execute.svelte b/src/routes/console/project-[project]/functions/function/[function]/execute.svelte
new file mode 100644
index 000000000..4bd3d0e01
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/execute.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Code, Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { InputTextarea, FormList, InputChoice } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let selectedFunction: Models.Function = null;
+
+    let show = false;
+    let data: string = null;
+    let showJson = false;
+
+    const example = `
+{
+    firstName: "hello", 
+    lastName:"world", 
+    age:"old"
+}`;
+
+    $: if (selectedFunction && !show) {
+        show = true;
+    }
+
+    const handleSubmit = async () => {
+        try {
+            await sdkForProject.functions.createExecution(
+                selectedFunction.$id,
+                data?.length ? data : undefined
+            );
+            close();
+            addNotification({
+                type: 'success',
+                message: `Function has been executed`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    function close() {
+        selectedFunction = null;
+        show = false;
+    }
+</script>
+
+<Form noStyle noMargin on:submit={handleSubmit}>
+    <Modal bind:show size="big" on:close={close}>
+        <svelte:fragment slot="header">Execute Function</svelte:fragment>
+        <FormList>
+            <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />
+            <InputChoice type="switchbox" id="json" label="Show example JSON" bind:value={showJson}>
+                Here's an example of some custom data.</InputChoice>
+            {#if showJson}
+                <Code noMargin language="json" withLineNumbers code={example} />
+            {/if}
+        </FormList>
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={close}>Cancel</Button>
+            <Button submit>Execute Now</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
new file mode 100644
index 000000000..46e37320c
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { pageLimit } from '$lib/stores/layout';
+    import { executionList } from './store';
+    import { Container } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import { Pagination, Copy, Empty, Status, Heading } from '$lib/components';
+    import {
+        Table,
+        TableHeader,
+        TableBody,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableRowButton
+    } from '$lib/elements/table';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import { Query } from '@aw-labs/appwrite-console';
+    import { log } from '$lib/stores/logs';
+    import { func } from '../store';
+
+    let search = '';
+    let offset = 0;
+    const functionId = $page.params.function;
+
+    $: executionList.load(functionId, [Query.offset(offset), Query.limit($pageLimit)], search);
+
+    //TODO: add optional hover state to rows
+</script>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Logs</Heading>
+    </div>
+    {#if $executionList?.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Deployment ID</TableCellHead>
+                <TableCellHead width={140}>Created</TableCellHead>
+                <TableCellHead width={70}>Status</TableCellHead>
+                <TableCellHead width={90}>Trigger</TableCellHead>
+                <TableCellHead width={70}>Type</TableCellHead>
+                <TableCellHead width={100}>Build Time</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each $executionList.executions as execution}
+                    <TableRowButton
+                        on:click={() => {
+                            $log.show = true;
+                            $log.func = $func;
+                            $log.data = execution;
+                        }}>
+                        <TableCell title="Deployment ID">
+                            <Copy value={execution.$id}>
+                                <Pill button
+                                    ><span class="icon-duplicate" aria-hidden="true" />
+                                    <span class="text u-trim">{execution.$id}</span></Pill>
+                            </Copy>
+                        </TableCell>
+                        <TableCellText title="Created">
+                            {toLocaleDateTime(execution.$createdAt)}
+                        </TableCellText>
+                        <TableCellText title="Status">
+                            <Status status={execution.status}>
+                                {execution.status}
+                            </Status>
+                        </TableCellText>
+                        <TableCellText title="Trigger">
+                            <Pill>
+                                <span class="text u-trim">{execution.trigger}</span>
+                            </Pill>
+                        </TableCellText>
+                        <TableCellText title="Type">TBI</TableCellText>
+                        <TableCellText title="Duration">
+                            {calculateTime(execution.duration)}</TableCellText>
+                    </TableRowButton>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty isButton single>
+            <p>Execute your function to view execution logs</p>
+            <Button external secondary href="#">Documentation</Button>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {$executionList?.total}</p>
+        <Pagination limit={$pageLimit} bind:offset sum={$executionList?.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts b/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts
new file mode 100644
index 000000000..a09315308
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts
@@ -0,0 +1,21 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { cachedStore } from '$lib/helpers/cache';
+
+export const executionList = cachedStore<
+    Models.ExecutionList,
+    {
+        load: (functionId: string, queries?: string[], search?: string) => Promise<void>;
+    }
+>('executionList', function ({ set }) {
+    return {
+        load: async (functionId, queries, search) => {
+            const response = await sdkForProject.functions.listExecutions(
+                functionId,
+                queries,
+                search
+            );
+            set(response);
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/functions/function/[function]/header.svelte b/src/routes/console/project-[project]/functions/function/[function]/header.svelte
new file mode 100644
index 000000000..660f7cd93
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/header.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { func } from './store';
+
+    const projectId = $page.params.project;
+    const functionId = $page.params.function;
+    const path = `/console/project-${projectId}/functions/function/${functionId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Deployments'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/executions`,
+            title: 'Executions'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/functions`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$func.name}</span>
+        </h1>
+        <Copy value={$func.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                ID Details
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/logs/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/logs/+page.svelte
deleted file mode 100644
index 8613482b9..000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/logs/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-    import { Card } from '$lib/components';
-    import { Container } from '$lib/layout';
-</script>
-
-<Container>
-    <h1>Logs</h1>
-
-    <Card />
-</Container>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/monitors/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/monitors/+page.svelte
deleted file mode 100644
index 63463ebba..000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/monitors/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-    import { Card } from '$lib/components';
-    import { Container } from '$lib/layout';
-</script>
-
-<Container>
-    <h1>Monitors</h1>
-
-    <Card />
-</Container>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
index c270642c7..c41fb42d2 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
@@ -1,10 +1,581 @@
-<script>
-    import { Card } from '$lib/components';
+<script lang="ts">
+    import {
+        CardGrid,
+        Box,
+        DropList,
+        DropListItem,
+        Copy,
+        Empty,
+        EventModal
+    } from '$lib/components';
     import { Container } from '$lib/layout';
+    import { Button, InputNumber, InputText, InputCron, Form, FormList } from '$lib/elements/forms';
+    import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { execute, func } from '../store';
+    import Delete from './delete.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import Variable from '../../../createVariable.svelte';
+    import Upload from './uploadVariables.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { variableList } from '../../../store';
+    import { Permissions } from '$lib/components/permissions';
+    import { difference } from '$lib/helpers/array';
+    import TableList from '$lib/elements/table/tableList.svelte';
+    import { TableCell, TableCellText } from '$lib/elements/table';
+    import Heading from '$lib/components/heading.svelte';
+    import { writable, type Writable } from 'svelte/store';
+
+    const functionId = $page.params.function;
+    let showDelete = false;
+    let selectedVar: Models.Variable = null;
+    let showVariablesUpload = false;
+    let showVariablesModal = false;
+    let showVariablesValue = [];
+    let showVariablesDropdown = [];
+    let timeout: number = null;
+    let functionName: string = null;
+    let functionSchedule: string = null;
+    let permissions: string[] = [];
+    let arePermsDisabled = true;
+
+    const eventSet: Writable<Set<string>> = writable(new Set());
+    let showEvents = false;
+    let areEventsDisabled = true;
+
+    onMount(async () => {
+        if ($func?.$id !== functionId) {
+            await func.load(functionId);
+        }
+        await variableList.load(functionId);
+        timeout ??= $func.timeout;
+        functionName ??= $func.name;
+        functionSchedule ??= $func.schedule;
+        permissions = $func.execute;
+        $eventSet = new Set($func.events);
+    });
+
+    async function updateName() {
+        try {
+            await sdkForProject.functions.update(functionId, functionName, $func.execute);
+            $func.name = functionName;
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+    async function updatePermissions() {
+        try {
+            await sdkForProject.functions.update(functionId, $func.name, permissions);
+            $func.execute = permissions;
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+    async function updateEvents() {
+        try {
+            await sdkForProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute,
+                Array.from($eventSet)
+            );
+            $func.events = Array.from($eventSet);
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    async function updateSchedule() {
+        try {
+            await sdkForProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute,
+                $func.events,
+                functionSchedule,
+                timeout
+            );
+            $func.schedule = functionSchedule;
+
+            addNotification({
+                type: 'success',
+                message: 'CRON Schedule has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function updateTimeout() {
+        try {
+            await sdkForProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute,
+                $func.events,
+                $func.schedule,
+                timeout
+            );
+
+            addNotification({
+                type: 'success',
+                message: 'Timeout has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function handleVariableCreated(dispatcedData: CustomEvent) {
+        const variable = dispatcedData.detail;
+
+        try {
+            await variableList.create(functionId, variable.key, variable.value);
+            showVariablesModal = false;
+            addNotification({
+                type: 'success',
+                message: `${$func.name} variables have been updated`
+            });
+            variableList.load(functionId);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function handleVariableUpdated(dispatcedData: CustomEvent) {
+        const variable = dispatcedData.detail;
+        try {
+            await variableList.update(functionId, variable.$id, variable.key, variable.value);
+            selectedVar = null;
+            showVariablesModal = false;
+            addNotification({
+                type: 'success',
+                message: `${$func.name} variables have been updated`
+            });
+            variableList.load(functionId);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+    async function handleVariableDeleted(variableId: string) {
+        try {
+            await variableList.delete(functionId, variableId);
+            addNotification({
+                type: 'success',
+                message: `Variable has been deleted`
+            });
+            variableList.load(functionId);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    function downloadVariables() {
+        if ($variableList?.total) {
+            let data = $variableList.variables
+                .map((variable) => {
+                    return `${variable.key}=${variable.value}`;
+                })
+                .join('\n');
+            const file = new File([data], '.env', {
+                type: 'application/x-envoy'
+            });
+
+            const link = document.createElement('a');
+            const url = URL.createObjectURL(file);
+
+            link.href = url;
+            link.download = file.name;
+            document.body.appendChild(link);
+            link.click();
+
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        }
+    }
+
+    function handleEvent(event: CustomEvent) {
+        eventSet.set($eventSet.add(event.detail));
+    }
+
+    $: if (permissions) {
+        if (
+            difference(permissions, $func.execute).length ||
+            difference($func.execute, permissions).length
+        ) {
+            arePermsDisabled = false;
+        } else arePermsDisabled = true;
+    }
+
+    $: if ($eventSet) {
+        if (
+            difference(Array.from($eventSet), $func.events).length ||
+            difference($func.events, Array.from($eventSet)).length
+        ) {
+            areEventsDisabled = false;
+        } else areEventsDisabled = true;
+    }
 </script>
 
 <Container>
-    <h1>Settings</h1>
+    <CardGrid>
+        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+            <div class="avatar is-medium">
+                <img
+                    src={`${base}/icons/${$app.themeInUse}/color/${
+                        $func.runtime.split('-')[0]
+                    }.svg`}
+                    alt="technology" />
+            </div>
+            <div>
+                <Heading tag="h6" size="7">{$func.name}</Heading>
 
-    <Card />
+                <p>{$func.runtime}</p>
+            </div>
+        </div>
+        <svelte:fragment slot="aside">
+            <div class="u-flex u-main-space-between">
+                <div>
+                    <p>Function ID: {$func.$id}</p>
+                    <p>Created at: {toLocaleDateTime($func.$createdAt)}</p>
+                    <p>Updated at: {toLocaleDateTime($func.$updatedAt)}</p>
+                </div>
+            </div>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button
+                secondary
+                on:click={() => {
+                    $execute = $func;
+                }}>Execute now</Button>
+        </svelte:fragment>
+    </CardGrid>
+
+    <Form on:submit={updateName}>
+        <CardGrid>
+            <Heading tag="h6" size="7">Update Name</Heading>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autocomplete={false}
+                        bind:value={functionName} />
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={functionName === $func.name || !functionName} submit>
+                    Update
+                </Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updatePermissions}>
+        <CardGrid>
+            <Heading tag="h6" size="7">Execute Access</Heading>
+            <p>
+                Choose who can execute this function using the client API. For more information,
+                check out the Permissions Guide in our documentation.
+            </p>
+            <svelte:fragment slot="aside">
+                <Permissions withCrud={false} bind:executeAccess={permissions} />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={arePermsDisabled} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateEvents}>
+        <CardGrid>
+            <Heading tag="h6" size="7">Update Events</Heading>
+            <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
+            <svelte:fragment slot="aside">
+                {#if $eventSet.size}
+                    <TableList>
+                        {#each Array.from($eventSet) as event}
+                            <li class="table-row">
+                                <TableCellText title="id">
+                                    {event}
+                                </TableCellText>
+                                <TableCell showOverflow title="options" width={40}>
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        aria-label="delete id"
+                                        on:click|preventDefault={() => {
+                                            $eventSet.delete(event);
+                                            eventSet.set($eventSet);
+                                        }}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </button>
+                                </TableCell>
+                            </li>
+                        {/each}
+                    </TableList>
+                {:else}
+                    <Empty isButton on:click={() => (showEvents = true)}>
+                        Add a event to get started
+                    </Empty>
+                {/if}
+
+                <div class="u-flex u-margin-block-start-16">
+                    <Button text noMargin on:click={() => (showEvents = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="u-text">Add event</span>
+                    </Button>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={areEventsDisabled} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateSchedule}>
+        <CardGrid>
+            <Heading tag="h6" size="7">Update CRON Schedule</Heading>
+            <p>
+                Set a CRON schedule to trigger your function. Leave blank for no schedule. <a
+                    href="#/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">
+                    More details on CRON syntax here.</a>
+            </p>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputCron
+                        bind:value={$func.schedule}
+                        label="Schedule (CRON Syntax)"
+                        id="schedule" />
+                </FormList>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={$func.schedule === functionSchedule} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateTimeout}>
+        <CardGrid>
+            <Heading tag="h6" size="7">Update Timeout</Heading>
+            <p>
+                Limit the execution time of your function. Maximum value is 900 seconds (15
+                minutes).
+            </p>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputNumber
+                        min={1}
+                        max={900}
+                        id="time"
+                        label="Time (in seconds)"
+                        bind:value={timeout} />
+                </FormList>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={$func.timeout === timeout || timeout < 1} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Function Variables</Heading>
+        <p>Set the variables (or secret keys) that will be passed to your function at runtime.</p>
+        <svelte:fragment slot="aside">
+            <div class="u-flex u-margin-inline-start-auto u-gap-16">
+                <Button secondary on:click={downloadVariables}>
+                    <span class="icon-download" />
+                    <span class="text">Download .env file</span>
+                </Button>
+                <Button secondary on:click={() => (showVariablesUpload = true)}>
+                    <span class="icon-upload" />
+                    <span class="text">Import .env file</span>
+                </Button>
+            </div>
+            <table class="table is-remove-outer-styles">
+                <thead class="table-thead">
+                    <tr class="table-row">
+                        <th class="table-thead-col">
+                            <span class="eyebrow-heading-3">Key</span>
+                        </th>
+                        <th class="table-thead-col">
+                            <span class="eyebrow-heading-3">Value</span>
+                        </th>
+                        <th class="table-thead-col" style="--p-col-width:40" />
+                    </tr>
+                </thead>
+                <tbody class="table-tbody">
+                    {#if $variableList?.total}
+                        {#each $variableList.variables as variable, i}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Key">
+                                    <span class="text">{variable.key}</span>
+                                </td>
+                                <td class="table-col u-overflow-visible" data-title="value">
+                                    <div class="interactive-text-output">
+                                        {#if showVariablesValue[i]}
+                                            <span class="text">{variable.value}</span>
+                                        {:else}
+                                            <span class="text">••••••••</span>
+                                        {/if}
+                                        <div class="u-flex u-cross-child-start u-gap-8">
+                                            <button
+                                                on:click|preventDefault={() =>
+                                                    (showVariablesValue[i] =
+                                                        !showVariablesValue[i])}
+                                                class="interactive-text-output-button"
+                                                aria-label="show hidden text">
+                                                {#if showVariablesValue[i]}
+                                                    <span class="icon-eye-off" aria-hidden="true" />
+                                                {:else}
+                                                    <span class="icon-eye" aria-hidden="true" />
+                                                {/if}
+                                            </button>
+                                            <Copy bind:value={variable.value}>
+                                                <button
+                                                    class="interactive-text-output-button"
+                                                    aria-label="copy text">
+                                                    <span
+                                                        class="icon-duplicate"
+                                                        aria-hidden="true" />
+                                                </button>
+                                            </Copy>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="table-col u-overflow-visible" data-title="options">
+                                    <DropList
+                                        bind:show={showVariablesDropdown[i]}
+                                        position="bottom"
+                                        horizontal="left"
+                                        arrow={false}>
+                                        <button
+                                            class="button is-text is-only-icon"
+                                            aria-label="more options"
+                                            on:click|preventDefault={() =>
+                                                (showVariablesDropdown[i] =
+                                                    !showVariablesDropdown[i])}>
+                                            <span class="icon-dots-horizontal" aria-hidden="true" />
+                                        </button>
+                                        <svelte:fragment slot="list">
+                                            <DropListItem
+                                                icon="pencil"
+                                                on:click={() => {
+                                                    selectedVar = variable;
+                                                    showVariablesDropdown[i] = false;
+                                                    showVariablesModal = true;
+                                                }}>
+                                                Edit
+                                            </DropListItem>
+                                            <DropListItem
+                                                icon="trash"
+                                                on:click={async () => {
+                                                    handleVariableDeleted(variable.$id);
+                                                    showVariablesDropdown[i] = false;
+                                                }}>
+                                                Delete
+                                            </DropListItem>
+                                        </svelte:fragment>
+                                    </DropList>
+                                </td>
+                            </tr>
+                        {/each}
+                    {/if}
+                </tbody>
+            </table>
+            <div class="u-flex u-margin-block-start-16">
+                <button
+                    class="button is-text u-padding-inline-0"
+                    type="button"
+                    on:click={() => {
+                        showVariablesModal = true;
+                    }}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create variable</span>
+                </button>
+            </div>
+        </svelte:fragment>
+    </CardGrid>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">Delete Function</Heading>
+        <p>
+            The function will be permanently deleted, including all deployments associated with it.
+            This action is irreversible.
+        </p>
+        <svelte:fragment slot="aside">
+            <Box>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold">{$func.name}</h6>
+                </svelte:fragment>
+                <p>Last Updated: {toLocaleDateTime($func.$updatedAt)}</p>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
+
+<Delete bind:showDelete />
+{#if showVariablesModal}
+    <Variable
+        bind:showCreate={showVariablesModal}
+        bind:selectedVar
+        on:created={handleVariableCreated}
+        on:updated={handleVariableUpdated} />
+{/if}
+
+<Upload bind:show={showVariablesUpload} on:uploaded={handleVariableCreated} />
+<EventModal bind:show={showEvents} on:created={handleEvent} />
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte
new file mode 100644
index 000000000..854459e13
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    const functionId = $page.params.function;
+
+    const handleSubmit = async () => {
+        try {
+            await sdkForProject.functions.delete(functionId);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Function has been deleted`
+            });
+            await goto(`${base}/console/project-${$page.params.project}/functions`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form noMargin on:submit={handleSubmit}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Function</svelte:fragment>
+        <p>
+            Are you sure you want to delete this function and all associated deployments from your
+            project?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
new file mode 100644
index 000000000..d92a4b18f
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form, InputFile } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { createEventDispatcher } from 'svelte';
+    import { variableList } from '../../../store';
+
+    export let show = false;
+    const dispatch = createEventDispatcher();
+
+    const functionId = $page.params.function;
+    let files: FileList;
+
+    const handleSubmit = async () => {
+        if (files?.length) {
+            const variables = await parseFile(files[0]);
+            for (const variable of variables) {
+                try {
+                    await variableList.create(functionId, variable.key, variable.value);
+                    addNotification({
+                        type: 'success',
+                        message: 'Variable uploaded'
+                    });
+                } catch (error) {
+                    addNotification({
+                        type: 'error',
+                        message: error.message
+                    });
+                }
+            }
+            dispatch('uploaded', variables);
+        } else {
+            addNotification({
+                type: 'error',
+                message: 'No file uploaded'
+            });
+        }
+    };
+
+    async function parseFile(file: File) {
+        if (file) {
+            let variables = [];
+            let text = await file.text();
+            text.split('\n').forEach((line) => {
+                const [key, value] = line.split('=');
+                variables.push({ key, value });
+            });
+            return variables;
+        }
+    }
+</script>
+
+<Form noStyle noMargin on:submit={handleSubmit}>
+    <Modal bind:show>
+        <svelte:fragment slot="header">Upload Variables</svelte:fragment>
+        <p>
+            Upload multiple variables via a .env file that will be passed to your function at
+            runtime.
+        </p>
+
+        <InputFile bind:files label="Attach a file" />
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/store.ts b/src/routes/console/project-[project]/functions/function/[function]/store.ts
index 7763d1e7a..9ebb1f1a8 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/store.ts
+++ b/src/routes/console/project-[project]/functions/function/[function]/store.ts
@@ -1,17 +1,72 @@
+import { cachedStore } from '$lib/helpers/cache';
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-
-function createFunctionStore() {
-    const { subscribe, set } = writable<Models.Function>();
+import { writable, type Writable } from 'svelte/store';
 
+export const func = cachedStore<
+    Models.Function,
+    {
+        load: (functionId: string) => Promise<void>;
+        getDeployment: (functionId: string, deploymentId: string) => Promise<Models.Deployment>;
+    }
+>('func', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (functionId: string) => {
+        load: async (functionId) => {
             set(await sdkForProject.functions.get(functionId));
+        },
+        getDeployment: async (functionId, deploymentId) => {
+            return await sdkForProject.functions.getDeployment(functionId, deploymentId);
         }
     };
-}
+});
 
-export const func = createFunctionStore();
+export const deploymentList = cachedStore<
+    Models.DeploymentList,
+    {
+        load: (functionId: string, queries?: string[], search?: string) => Promise<void>;
+        createDeployment: (deployment: Models.Deployment) => void;
+        updateDeployment: (deployment: Models.Deployment) => void;
+    }
+>('deploymentList', function ({ set, update }) {
+    return {
+        load: async (functionId, queries, search) => {
+            const response = await sdkForProject.functions.listDeployments(
+                functionId,
+                queries,
+                search
+            );
+            set(response);
+        },
+        createDeployment: (deployment) =>
+            update((n) => {
+                n.deployments.unshift(deployment);
+
+                return n;
+            }),
+        updateDeployment: (deployment) =>
+            update((n) => {
+                const index = n.deployments.findIndex((a) => a.$id === deployment.$id);
+                if (index !== -1) {
+                    n.deployments[index] = deployment;
+                }
+
+                return n;
+            })
+    };
+});
+
+export const execute: Writable<Models.Function> = writable();
+
+export const functionUsage = cachedStore<
+    Models.UsageFunctions,
+    {
+        load: (functionId: string, range: string) => Promise<void>;
+    }
+>('functionUsage', function ({ set }) {
+    return {
+        load: async (functionId, range) => {
+            const usages = await sdkForProject.functions.getFunctionUsage(functionId, range);
+            set(usages);
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte
index a02f7ef51..c510d9e8e 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte
@@ -1 +1,64 @@
-<h1>Usage</h1>
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { functionUsage } from '../store';
+    import { Container } from '$lib/layout';
+    import type { UsagePeriods } from '$lib/layout/usage.svelte';
+    import { Card, DropTabs, DropTabsItem, Heading } from '$lib/components';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    const functionId = $page.params.function;
+    import { last } from '$lib/layout/usage.svelte';
+    import { BarChart } from '$lib/charts';
+    let range: UsagePeriods = '30d';
+
+    $: functionUsage.load(functionId, range);
+
+    // TODO: metric type is wrong
+    $: count = $functionUsage?.executionsTotal as unknown as Models.Metric[];
+    $: errors = $functionUsage?.buildsFailure as unknown as Models.Metric[];
+</script>
+
+<Container>
+    <div class="u-flex u-main-space-between common-section">
+        <Heading tag="h2" size="5">Functions</Heading>
+        <DropTabs>
+            <DropTabsItem on:click={() => (range = '24h')} disabled={range === '24h'}>
+                24h
+            </DropTabsItem>
+            <DropTabsItem on:click={() => (range = '30d')} disabled={range === '30d'}>
+                30d
+            </DropTabsItem>
+            <DropTabsItem on:click={() => (range = '90d')} disabled={range === '90d'}>
+                90d
+            </DropTabsItem>
+        </DropTabs>
+    </div>
+    {#if count}
+        <Card>
+            <Heading tag="h6" size="6">{last(count).value}</Heading>
+            <p>Executions</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of function executions over time',
+                        data: [...count.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </Card>
+    {/if}
+    {#if errors}
+        <Card>
+            <Heading tag="h6" size="6">{last(errors).value}</Heading>
+            <p>Errors</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of function errors over time',
+                        data: [...errors.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </Card>
+    {/if}
+</Container>
diff --git a/src/routes/console/project-[project]/functions/header.svelte b/src/routes/console/project-[project]/functions/header.svelte
new file mode 100644
index 000000000..9fbd3e364
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/header.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { Cover } from '$lib/layout';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">Functions</span>
+        </h1>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/functions/store.ts b/src/routes/console/project-[project]/functions/store.ts
new file mode 100644
index 000000000..725cb5238
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/store.ts
@@ -0,0 +1,73 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { cachedStore } from '$lib/helpers/cache';
+import { browser } from '$app/environment';
+
+export const functionList = cachedStore<
+    Models.FunctionList,
+    {
+        load: (queries?: string[], search?: string) => Promise<void>;
+        getDeployments: (
+            functions: Models.Function[]
+        ) => Promise<Record<string, Models.Deployment>>;
+    }
+>('functionList', function ({ set }) {
+    return {
+        load: async (queries, search) => {
+            const response = await sdkForProject.functions.list(queries, search);
+            set(response);
+        },
+
+        getDeployments: async (functions) => {
+            let activeDeployments = {};
+            activeDeployments = browser
+                ? JSON.parse(sessionStorage.getItem('activeDeployments')) ?? {}
+                : {};
+
+            for (let i = 0; i < functions.length; i++) {
+                const fn = functions[i];
+                if (fn.deployment) {
+                    const response = await sdkForProject.functions.getDeployment(
+                        fn.$id,
+                        fn.deployment
+                    );
+                    activeDeployments[fn.$id] = response;
+                }
+            }
+
+            sessionStorage?.setItem('activeDeployments', JSON.stringify(activeDeployments));
+            return activeDeployments;
+        }
+    };
+});
+
+export const variableList = cachedStore<
+    Models.VariableList,
+    {
+        load: (functionId: string) => Promise<void>;
+        delete: (functionId: string, variableId: string) => Promise<void>;
+        create: (functionId: string, key: string, value: string) => Promise<void>;
+        update: (
+            functionId: string,
+            variableId: string,
+            key: string,
+            value: string
+        ) => Promise<void>;
+    }
+>('variableList', function ({ set }) {
+    return {
+        load: async (functionId) => {
+            const response = await sdkForProject.functions.listVariables(functionId);
+            set(response);
+        },
+        delete: async (functionId, variableId) => {
+            await sdkForProject.functions.deleteVariable(functionId, variableId);
+        },
+        create: async (functionId, key, value) => {
+            await sdkForProject.functions.createVariable(functionId, key, value);
+        },
+        update: async (functionId, variableId, key, value) => {
+            await sdkForProject.functions.updateVariable(functionId, variableId, key, value);
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/functions/wizard/step1.svelte b/src/routes/console/project-[project]/functions/wizard/step1.svelte
new file mode 100644
index 000000000..93ac297e8
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/step1.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, InputSelect, FormList } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { createFunction } from './store';
+
+    let showCustomId = false;
+
+    let options = [];
+
+    onMount(async () => {
+        let runtimes = await sdkForProject.functions.listRuntimes();
+        options = runtimes.runtimes.map((runtime) => ({
+            label: runtime.name,
+            value: runtime.$id
+        }));
+    });
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Create your function</svelte:fragment>
+    <svelte:fragment slot="subtitle">Let’s create a function.</svelte:fragment>
+    <FormList>
+        <InputText
+            label="Name"
+            id="name"
+            placeholder="Function name"
+            bind:value={$createFunction.name}
+            required />
+
+        <InputSelect
+            label="Runtimes"
+            id="runtimes"
+            placeholder="Select runtime"
+            bind:value={$createFunction.runtime}
+            {options}
+            required />
+
+        <ul class="form-list">
+            {#if !showCustomId}
+                <div>
+                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Function ID
+                        </span>
+                    </Pill>
+                </div>
+            {:else}
+                <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
+            {/if}
+        </ul>
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/functions/wizard/step2.svelte b/src/routes/console/project-[project]/functions/wizard/step2.svelte
new file mode 100644
index 000000000..4a8394c9f
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/step2.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { createFunction } from './store';
+    import { Permissions } from '$lib/components/permissions';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Execute access (optional)</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Choose who can execute this function using the client API. Check out our documentation for
+        more on <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+            Permissions</a
+        >.
+    </svelte:fragment>
+
+    <Permissions withCrud={false} bind:executeAccess={$createFunction.execute} />
+</WizardStep>
diff --git a/src/routes/console/project-[project]/functions/wizard/step3.svelte b/src/routes/console/project-[project]/functions/wizard/step3.svelte
new file mode 100644
index 000000000..efb08fbea
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/step3.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
+    import { Empty } from '$lib/components';
+    import { createFunction } from './store';
+    import { EventModal } from '$lib/components';
+    import { TableList, TableCellText, TableCell } from '$lib/elements/table';
+
+    let showCreate = false;
+
+    let eventSet = new Set<string>();
+
+    function handleCreated(event: CustomEvent) {
+        eventSet.add(event.detail);
+        $createFunction.events = Array.from(eventSet);
+    }
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Events (optional)</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set the events that will trigger your function. Maximum 100 events allowed.
+    </svelte:fragment>
+
+    <span class="u-sep-block-end">EVENT</span>
+
+    {#if $createFunction?.events?.length}
+        <TableList>
+            {#each $createFunction.events as event}
+                <li class="table-row">
+                    <TableCellText title="id">
+                        {event}
+                    </TableCellText>
+                    <TableCell showOverflow title="options" width={40}>
+                        <button
+                            class="button is-text is-only-icon"
+                            aria-label="delete id"
+                            on:click|preventDefault={() => {
+                                eventSet.delete(event);
+                                $createFunction.events = Array.from(eventSet);
+                            }}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </button>
+                    </TableCell>
+                </li>
+            {/each}
+        </TableList>
+    {:else}
+        <Empty isButton on:click={() => (showCreate = !showCreate)}
+            >Add a event to get started
+        </Empty>
+    {/if}
+
+    <div class="u-flex u-margin-block-start-16">
+        <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="u-text">Add event</span>
+        </Button>
+    </div>
+</WizardStep>
+
+{#if showCreate}
+    <EventModal bind:show={showCreate} on:created={handleCreated} />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/wizard/step4.svelte b/src/routes/console/project-[project]/functions/wizard/step4.svelte
new file mode 100644
index 000000000..1adcbf147
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/step4.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { FormList, InputCron } from '$lib/elements/forms';
+    import { createFunction } from './store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Scheduling (optional)</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set a CRON schedule to trigger your function. Leave blank for no schedule. <a
+            href="#/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">More details on CRON syntax here</a
+        >.
+    </svelte:fragment>
+    <FormList>
+        <InputCron
+            bind:value={$createFunction.schedule}
+            label="Schedule (CRON Syntax)"
+            id="schedule" />
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/functions/wizard/step5.svelte b/src/routes/console/project-[project]/functions/wizard/step5.svelte
new file mode 100644
index 000000000..19dfca913
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/step5.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { createFunction } from './store';
+    import Create from '../createVariable.svelte';
+    import { DropList, DropListItem, Secret, Empty } from '$lib/components';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { Button } from '$lib/elements/forms';
+
+    let showCreate = false;
+
+    let selectedVar: Partial<Models.Variable> = null;
+    let showDropdown = [];
+
+    function handleCreated(dispatchEvent: CustomEvent) {
+        createFunction.update((n) => {
+            n.vars.push(dispatchEvent.detail);
+            return n;
+        });
+    }
+    function handleUpdated(dispatchEvent: CustomEvent) {
+        createFunction.update((n) => {
+            n.vars = n.vars.map((v) => (v.key === selectedVar.key ? dispatchEvent.detail : v));
+            return n;
+        });
+    }
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Variables (optional)</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Create a variable (or secret key) that will be passed to your function at runtime.
+    </svelte:fragment>
+    {#if $createFunction.vars.length}
+        <Table noStyles>
+            <TableHeader>
+                <TableCellHead>Key</TableCellHead>
+                <TableCellHead>Value</TableCellHead>
+                <TableCellHead width={30} />
+            </TableHeader>
+
+            <TableBody>
+                {#each $createFunction.vars as variable, i}
+                    <TableRow>
+                        <TableCellText title="key">
+                            {variable.key}
+                        </TableCellText>
+                        <TableCell showOverflow title="value">
+                            <Secret value={variable.value} />
+                        </TableCell>
+                        <TableCell showOverflow title="options">
+                            <DropList
+                                bind:show={showDropdown[i]}
+                                position="bottom"
+                                horizontal="left"
+                                arrow={false}>
+                                <button
+                                    class="button is-text is-only-icon"
+                                    aria-label="more options"
+                                    on:click|preventDefault={() =>
+                                        (showDropdown[i] = !showDropdown[i])}>
+                                    <span class="icon-dots-horizontal" aria-hidden="true" />
+                                </button>
+                                <svelte:fragment slot="list">
+                                    <DropListItem
+                                        icon="pencil"
+                                        on:click={() => {
+                                            selectedVar = $createFunction.vars[i];
+                                            showDropdown[i] = false;
+                                            showCreate = true;
+                                        }}>
+                                        Edit
+                                    </DropListItem>
+                                    <DropListItem
+                                        icon="trash"
+                                        on:click={() => {
+                                            $createFunction.vars.splice(i, 1);
+                                            $createFunction = $createFunction;
+                                            showDropdown[i] = false;
+                                        }}>
+                                        Delete
+                                    </DropListItem>
+                                </svelte:fragment>
+                            </DropList>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <span class="u-sep-block-end">VARIABLES</span>
+
+        <Empty isButton on:click={() => (showCreate = !showCreate)}
+            >Create a variable to get started
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-16">
+        <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="u-text">Create variable</span>
+        </Button>
+    </div>
+</WizardStep>
+
+{#if showCreate}
+    <Create
+        bind:selectedVar
+        bind:showCreate
+        on:created={handleCreated}
+        on:updated={handleUpdated} />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/wizard/store.ts b/src/routes/console/project-[project]/functions/wizard/store.ts
new file mode 100644
index 000000000..078663b97
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/wizard/store.ts
@@ -0,0 +1,22 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+
+export const createFunction = writable<{
+    id?: string;
+    name: string;
+    execute: string[];
+    runtime: string;
+    vars?: Partial<Models.Variable>[];
+    events?: string[];
+    schedule?: string;
+    timeout?: number;
+}>({
+    id: null,
+    name: null,
+    execute: [],
+    runtime: null,
+    vars: [],
+    events: [],
+    schedule: null,
+    timeout: null
+});
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index f80d03b8c..bc55a318d 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -83,7 +83,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Console</title>
+    <title>Console - Appwrite</title>
 </svelte:head>
 
 {#if $project}
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index 26d736743..ffcaa2119 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -102,7 +102,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - API Key</title>
+    <title>API Key - Appwrite</title>
 </svelte:head>
 
 <Container>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index a06083135..b4915e26a 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -23,12 +23,13 @@
     import AppleTvos from './appleTvOS.svelte';
     import Header from './header.svelte';
     import Breadcrumbs from './breadcrumbs.svelte';
+    import Android from './android.svelte';
 
     const projectId = $page.params.project;
     const platformId = $page.params.platform;
     const types: Record<string, typeof SvelteComponent> = {
         web: Web,
-        android: Web,
+        android: Android,
         'apple-ios': AppleiOs,
         'apple-macos': AppleMacOs,
         'apple-watchos': AppleWatchOs,
@@ -113,7 +114,6 @@
             <svelte:fragment slot="aside">
                 <div class="box">
                     <div class="u-flex u-gap-16">
-                        <!-- <img class="avatar" src="/icons/dark/color/android.svg" /> -->
                         <div class="u-cross-child-center u-line-height-1-5">
                             <h6 class="u-bold">{$platform.name}</h6>
                             <p>{$platform.hostname}</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
new file mode 100644
index 000000000..a3b42a25c
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let hostname: string = null;
+
+    onMount(() => {
+        hostname ??= $platform.hostname;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                undefined,
+                undefined,
+                hostname
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Package Name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Package Name</Heading>
+        <p class="text">
+            Your package name is generally the applicationId in your app-level build.gradle file.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="hostname"
+                    label="Package Name"
+                    bind:value={hostname}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={hostname === $platform.hostname} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
index b8cd72d26..7fb051347 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
@@ -26,7 +26,7 @@
             project.load($project.$id);
             addNotification({
                 type: 'success',
-                message: 'Platform hostname has been updated'
+                message: 'Platform Hostname has been updated'
             });
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index 3e3ff23bf..75161fbc6 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -1,11 +1,14 @@
 <script>
     import { afterNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import Breadcrumbs from './breadcrumbs.svelte';
     import Header from './header.svelte';
 
     const path = 'settings';
+    const projectId = $page.params.project;
+    let loaded = false;
 
     onMount(handle);
     afterNavigate(handle);
@@ -15,11 +18,14 @@
             header: Header,
             breadcrumb: Breadcrumbs
         });
+        loaded = true;
     }
 </script>
 
 <svelte:head>
-    <title>Appwrite - Settings</title>
+    <title>Settings - Appwrite</title>
 </svelte:head>
 
-<slot />
+{#if loaded}
+    <slot />
+{/if}
diff --git a/src/routes/console/project-[project]/settings/domains/+page.svelte b/src/routes/console/project-[project]/settings/domains/+page.svelte
index fb620a449..fe06f2d30 100644
--- a/src/routes/console/project-[project]/settings/domains/+page.svelte
+++ b/src/routes/console/project-[project]/settings/domains/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Empty } from '$lib/components';
+    import { Empty, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -58,7 +58,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Custom Domains</h2>
+        <Heading tag="h2" size="5">Custom Domains</Heading>
 
         <Button on:click={openWizard}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
index 4562364ca..f454b1ede 100644
--- a/src/routes/console/project-[project]/settings/header.svelte
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -10,13 +10,13 @@
             href: path,
             title: 'Overview'
         },
-        {
-            href: `${path}/services`,
-            title: 'Services'
-        },
         {
             href: `${path}/domains`,
             title: 'Custom Domains'
+        },
+        {
+            href: `${path}/webhooks`,
+            title: 'Webhooks'
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
new file mode 100644
index 000000000..e5dc3756f
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { beforeNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Empty } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import {
+        Table,
+        TableBody,
+        TableRowLink,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableHeader
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { wizard } from '$lib/stores/wizard';
+    import Create from './createWebhook.svelte';
+    import { webhookList } from './store';
+    import Heading from '$lib/components/heading.svelte';
+
+    function openWizard() {
+        wizard.start(Create);
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const projectId = $page.params.project;
+
+    $: webhookList.load(projectId);
+</script>
+
+<svelte:head>
+    <title>Webhooks - Appwrite</title>
+</svelte:head>
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Webhooks</Heading>
+        <Button on:click={openWizard}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create webhook</span>
+        </Button>
+    </div>
+
+    {#if $webhookList?.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>POST URL</TableCellHead>
+                <TableCellHead width={80}>Events</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each $webhookList.webhooks as webhook}
+                    <TableRowLink
+                        href={`${base}/console/project-${projectId}/settings/webhooks/webhook/${webhook.$id}`}>
+                        <TableCell title="Name">
+                            <div class="u-flex u-main-space-between">
+                                {webhook.name}
+                                {#if webhook.security === false}
+                                    <Pill>SLL/TLS disabled</Pill>
+                                {/if}
+                            </div>
+                        </TableCell>
+                        <TableCellText title="URL">{webhook.url}</TableCellText>
+                        <TableCellText title="Scopes">{webhook.events.length} events</TableCellText>
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty isButton single>
+            <div class="common-section u-text-center">
+                <p class="text">Create your first Webhook to get startedNeed a hand?</p>
+                <p class="text">Check out our documentation.</p>
+            </div>
+            <div class="u-flex u-gap-12 common-section">
+                <Button text href="#/">Documentation</Button>
+                <Button secondary on:click={openWizard}>
+                    <span class="text">Create Webhook</span>
+                </Button>
+            </div>
+        </Empty>
+    {/if}
+</Container>
diff --git a/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte b/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte
new file mode 100644
index 000000000..7d1e6f6ae
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import Step3 from './wizard/step3.svelte';
+    import { onDestroy } from 'svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import { createWebhook } from './wizard/store';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { webhookList } from './store';
+
+    const projectId = $page.params.project;
+    const create = async () => {
+        try {
+            await sdkForConsole.projects.createWebhook(
+                projectId,
+                $createWebhook.name,
+                $createWebhook.events,
+                $createWebhook.url,
+                $createWebhook.security,
+                $createWebhook.httpUser,
+                $createWebhook.httpPass
+            );
+            await webhookList.load(projectId);
+            addNotification({
+                message: 'Webhook has been created',
+                type: 'success'
+            });
+            wizard.hide();
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
+
+    onDestroy(() => {
+        $createWebhook = {
+            name: null,
+            url: null,
+            events: [],
+            security: false,
+            httpUser: null,
+            httpPass: null
+        };
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Add your webhook',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Webhook events',
+        component: Step2
+    });
+    stepsComponents.set(3, {
+        label: 'Security',
+        component: Step3,
+        optional: true
+    });
+</script>
+
+<Wizard confirmExit title="Create Webhook" steps={stepsComponents} on:finish={create}>
+    <svelte:fragment slot="exit">webhook creation</svelte:fragment>
+</Wizard>
diff --git a/src/routes/console/project-[project]/settings/webhooks/store.ts b/src/routes/console/project-[project]/settings/webhooks/store.ts
new file mode 100644
index 000000000..bbca4e8bc
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/store.ts
@@ -0,0 +1,17 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { cachedStore } from '$lib/helpers/cache';
+
+export const webhookList = cachedStore<
+    Models.WebhookList,
+    {
+        load: (projectId: string) => Promise<void>;
+    }
+>('webhookList', function ({ set }) {
+    return {
+        load: async (projectId) => {
+            const response = await sdkForConsole.projects.listWebhooks(projectId);
+            set(response);
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte
new file mode 100644
index 000000000..c0f637f49
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { afterNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { updateLayout } from '$lib/stores/layout';
+    import { onMount } from 'svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
+    import { webhook } from './store';
+
+    const webhookId = $page.params.webhook;
+    const projectId = $page.params.project;
+
+    onMount(handle);
+    afterNavigate(handle);
+
+    async function handle() {
+        const promise = webhook.load(projectId, webhookId);
+
+        if ($webhook?.$id !== webhookId) {
+            await promise;
+        }
+
+        updateLayout({
+            breadcrumb: Breadcrumbs,
+            header: Header
+        });
+    }
+</script>
+
+<svelte:head>
+    <title>Webhook - Appwrite</title>
+</svelte:head>
+
+{#if $webhook}
+    <slot />
+{/if}
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte
new file mode 100644
index 000000000..3d8297f3d
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { CardGrid, Box, Secret, Empty, EventModal, Heading } from '$lib/components';
+    import {
+        Button,
+        Form,
+        FormList,
+        InputText,
+        InputChoice,
+        InputPassword
+    } from '$lib/elements/forms';
+    import { TableList, TableCellText, TableCell } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { webhook } from './store';
+    import { page } from '$app/stores';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Delete from './delete.svelte';
+    import Regenerate from './regenerate.svelte';
+    import { difference } from '$lib/helpers/array';
+
+    const projectId = $page.params.project;
+    let name: string = null;
+    let url: string = null;
+    let events = [];
+    let httpUser: string = null;
+    let httpPass: string = null;
+    let security = false;
+    let showDelete = false;
+    let showCreateEvent = false;
+    let areEventsDisabled = true;
+    let showRegenerate = false;
+
+    onMount(async () => {
+        name ??= $webhook.name;
+        url ??= $webhook.url;
+        events = $webhook.events;
+        httpUser ??= $webhook.httpUser;
+        httpPass ??= $webhook.httpPass;
+        security = $webhook.security;
+    });
+
+    async function updateName() {
+        try {
+            await sdkForConsole.projects.updateWebhook(
+                projectId,
+                $webhook.$id,
+                name,
+                $webhook.events,
+                $webhook.url,
+                $webhook.security
+            );
+            $webhook.name = name;
+            addNotification({
+                type: 'success',
+                message: 'Webhook name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+    async function updateUrl() {
+        try {
+            await sdkForConsole.projects.updateWebhook(
+                projectId,
+                $webhook.$id,
+                $webhook.name,
+                $webhook.events,
+                url,
+                $webhook.security
+            );
+            $webhook.url = url;
+            addNotification({
+                type: 'success',
+                message: 'Webhook url has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+    async function updateEvents() {
+        try {
+            await sdkForConsole.projects.updateWebhook(
+                projectId,
+                $webhook.$id,
+                $webhook.name,
+                events,
+                $webhook.url,
+                $webhook.security
+            );
+            $webhook.events = events;
+            areEventsDisabled = true;
+            addNotification({
+                type: 'success',
+                message: 'Webhook events have been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+    async function updateSecurity() {
+        try {
+            await sdkForConsole.projects.updateWebhook(
+                projectId,
+                $webhook.$id,
+                $webhook.name,
+                $webhook.events,
+                $webhook.url,
+                security,
+                httpUser,
+                httpPass
+            );
+            $webhook.security = security;
+            $webhook.httpUser = httpUser;
+            $webhook.httpPass = httpPass;
+            addNotification({
+                type: 'success',
+                message: 'Webhook security has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+    $: signatureKey = $webhook?.signatureKey;
+    $: if (difference(events, $webhook.events).length > 0) {
+        areEventsDisabled = false;
+    }
+</script>
+
+<Container>
+    <CardGrid>
+        <Heading tag="h2" size="7">Signature Key</Heading>
+        <p>You can use the Signature Key to validate your webhooks.</p>
+        <svelte:fragment slot="aside">
+            <div>
+                <p>Key</p>
+                <Secret bind:value={signatureKey} />
+            </div>
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button on:click={() => (showRegenerate = true)} secondary submit
+                >Regenerate Key</Button>
+        </svelte:fragment>
+    </CardGrid>
+    <Form on:submit={updateName}>
+        <CardGrid>
+            <Heading tag="h2" size="7">Update Name</Heading>
+            <p>Choose any name that will help you distinguish between Webhooks.</p>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        bind:value={name}
+                        required
+                        placeholder="Enter name" />
+                </FormList>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === $webhook.name || !name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateUrl}>
+        <CardGrid>
+            <Heading tag="h2" size="7">Update Url</Heading>
+
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputText
+                        id="url"
+                        label="POST URL"
+                        bind:value={url}
+                        required
+                        placeholder="https://example.com/callback" />
+                </FormList>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={url === $webhook.url || !url} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateEvents}>
+        <CardGrid>
+            <Heading tag="h2" size="7">Update Events</Heading>
+            <p class="text">
+                Set the events that will trigger your webhook. Maximum 100 events allowed.
+            </p>
+            <svelte:fragment slot="aside">
+                {#if events?.length}
+                    <TableList>
+                        {#each events as id}
+                            <li class="table-row">
+                                <TableCellText title="id">
+                                    {id}
+                                </TableCellText>
+                                <TableCell showOverflow title="options" width={40}>
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        aria-label="delete id"
+                                        on:click|preventDefault={() => {
+                                            events = events.filter((item) => item !== id);
+                                        }}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </button>
+                                </TableCell>
+                            </li>
+                        {/each}
+                    </TableList>
+                {:else}
+                    <Empty isButton single on:click={() => (showCreateEvent = !showCreateEvent)}
+                        >Add a event to get started</Empty>
+                {/if}
+
+                <Button text on:click={() => (showCreateEvent = !showCreateEvent)}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="u-text">Add event</span>
+                </Button>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={areEventsDisabled} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form on:submit={updateSecurity}>
+        <CardGrid>
+            <Heading tag="h2" size="7">Security</Heading>
+            <p class="text">
+                Set an optional basic HTTP authentication username and password to protect your
+                endpoint from unauthorized access.
+            </p>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <div>
+                        <Heading tag="h3" size="7">HTTP Authentication</Heading>
+                        <p class="text">Use to secure your endpoint from untrusted sources.</p>
+                    </div>
+                    <InputText
+                        label="User"
+                        id="user"
+                        placeholder="Enter username"
+                        bind:value={httpUser} />
+                    <InputPassword
+                        label="Password"
+                        id="password"
+                        showPasswordButton
+                        placeholder="Enter password"
+                        bind:value={httpPass} />
+
+                    <InputChoice
+                        id="Security"
+                        label="Certificate verification (SSL/TLS)"
+                        bind:value={security}>
+                        <span class="u-error">Warning:</span> Untrusted or self-signed certificates
+                        may not be secure.
+                        <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+                            Learn more</a>
+                    </InputChoice>
+                </FormList>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={httpUser === $webhook.httpUser &&
+                        httpPass === $webhook.httpPass &&
+                        security === $webhook.security}
+                    submit>
+                    Update
+                </Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <CardGrid>
+        <div>
+            <Heading tag="h2" size="7">Delete Webhook</Heading>
+        </div>
+        <p>The webhook will be permanently deleted. This action is irreversible.</p>
+        <svelte:fragment slot="aside">
+            <Box>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold">{$webhook.name}</h6>
+                </svelte:fragment>
+                <p>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</p>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete bind:showDelete />
+<Regenerate bind:show={showRegenerate} />
+<EventModal
+    bind:show={showCreateEvent}
+    on:created={(e) => {
+        events.push(e.detail[0]);
+        events = events;
+    }} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte
new file mode 100644
index 000000000..984468cc4
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../../store';
+    import { webhook } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/settings/webhooks`,
+            title: 'Settings'
+        },
+        {
+            href: `/console/project-${$project.$id}/settings/webhooks/webhook/${$webhook.$id}`,
+            title: $webhook.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte
new file mode 100644
index 000000000..16234d9d1
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../../../store';
+    import { webhookList } from '../../store';
+    import { webhook } from './store';
+
+    export let showDelete = false;
+
+    async function handleDelete() {
+        try {
+            await sdkForConsole.projects.deleteWebhook($project.$id, $webhook.$id);
+            await webhookList.load($project.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$webhook.name} has been deleted`
+            });
+            await goto(`${base}/console/project-${$project.$id}/settings/webhooks`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<Form on:submit={handleDelete}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
+        <p>Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte
new file mode 100644
index 000000000..a7c84e13b
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { webhook } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/settings/webhooks`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$webhook.name}</span>
+        </h1>
+        <Copy value={$webhook.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Webhook ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte
new file mode 100644
index 000000000..4de854269
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { webhook } from './store';
+
+    export let show = false;
+    const projectId = $page.params.project;
+
+    async function regenerate() {
+        try {
+            await sdkForConsole.projects.updateWebhookSignature(projectId, $webhook.$id);
+            await webhook.load(projectId, $webhook.$id);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Key has been regenerated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<Form on:submit={regenerate}>
+    <Modal bind:show>
+        <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
+        <p class="u-text">
+            Are you sure you want to generate a new Signature Key?
+            <b>You will not be able to recover your current key.</b>
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button secondary submit>Regenerate</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts
new file mode 100644
index 000000000..fbbcb7fae
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts
@@ -0,0 +1,17 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { cachedStore } from '$lib/helpers/cache';
+
+export const webhook = cachedStore<
+    Models.Webhook,
+    {
+        load: (projectId: string, webhookId: string) => Promise<void>;
+    }
+>('webhook', function ({ set }) {
+    return {
+        load: async (projectId, webhookId) => {
+            const response = await sdkForConsole.projects.getWebhook(projectId, webhookId);
+            set(response);
+        }
+    };
+});
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte
new file mode 100644
index 000000000..4045874d7
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step1.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { InputText, InputURL, FormList } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { createWebhook } from './store';
+    //TODO: Create InputURL component
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Add your webhook</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Use webhooks to build integrations that subscribe to specific events on Appwrite. Appwrite
+        will send an HTTP POST payload to the webhook's configured URL when one of the specified
+        events is triggered.
+    </svelte:fragment>
+    <FormList>
+        <InputText
+            label="Name"
+            id="name"
+            placeholder="Enter name"
+            bind:value={$createWebhook.name}
+            required />
+        <InputURL
+            label="POST URL"
+            id="url"
+            placeholder="https://example.com/callback"
+            bind:value={$createWebhook.url}
+            required />
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte
new file mode 100644
index 000000000..d51b874c6
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
+    import { Empty } from '$lib/components';
+    import { createWebhook } from './store';
+    import { EventModal } from '$lib/components';
+    import { TableList, TableCellText, TableCell } from '$lib/elements/table';
+
+    let showCreate = false;
+
+    let eventSet = new Set<string>();
+
+    function handleCreated(event: CustomEvent) {
+        eventSet.add(event.detail);
+        $createWebhook.events = Array.from(eventSet);
+    }
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Webhook events</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set the events that will trigger your function. Maximum 100 events allowed.
+    </svelte:fragment>
+
+    <span class="u-sep-block-end">EVENT</span>
+    {#if $createWebhook?.events?.length}
+        <TableList>
+            {#each $createWebhook.events as event}
+                <li class="table-row">
+                    <TableCellText title="id">
+                        {event}
+                    </TableCellText>
+                    <TableCell showOverflow title="options" width={40}>
+                        <button
+                            class="button is-text is-only-icon"
+                            aria-label="delete id"
+                            on:click|preventDefault={() => {
+                                eventSet.delete(event);
+                                $createWebhook.events = Array.from(eventSet);
+                            }}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </button>
+                    </TableCell>
+                </li>
+            {/each}
+        </TableList>
+    {:else}
+        <Empty isButton on:click={() => (showCreate = !showCreate)}>
+            Add a event to get started
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-16">
+        <Button text on:click={() => (showCreate = !showCreate)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="u-text">Add event</span>
+        </Button>
+    </div>
+</WizardStep>
+
+{#if showCreate}
+    <EventModal bind:show={showCreate} on:created={handleCreated} />
+{/if}
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte
new file mode 100644
index 000000000..4403ef024
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { FormList, InputText, InputPassword, InputChoice } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { createWebhook } from './store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Security (optional)</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set an optional basic HTTP authentication username and password to protect your endpoint
+        from unauthorized access.
+    </svelte:fragment>
+    <FormList>
+        <div>
+            <h2 class="heading-level-7">HTTP Authentication</h2>
+            <p class="text">Use to secure your endpoint from untrusted sources.</p>
+        </div>
+        <InputText
+            label="User"
+            id="user"
+            placeholder="Enter username"
+            bind:value={$createWebhook.httpUser} />
+        <InputPassword
+            label="Password"
+            id="password"
+            showPasswordButton
+            placeholder="Enter password"
+            minlength={0}
+            bind:value={$createWebhook.httpPass} />
+
+        <InputChoice
+            id="Security"
+            label="Certificate verification (SSL/TLS)"
+            bind:value={$createWebhook.security}>
+            <span class="u-error">Warning:</span> Untrusted or self-signed certificates may not be
+            secure.
+            <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+                Learn more</a
+            ></InputChoice>
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/store.ts b/src/routes/console/project-[project]/settings/webhooks/wizard/store.ts
new file mode 100644
index 000000000..191c2262c
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/store.ts
@@ -0,0 +1,11 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+
+export const createWebhook = writable<Partial<Models.Webhook>>({
+    name: null,
+    url: null,
+    events: [],
+    security: false,
+    httpUser: null,
+    httpPass: null
+});
diff --git a/src/routes/console/project-[project]/storage/+layout.svelte b/src/routes/console/project-[project]/storage/+layout.svelte
index 140497dcd..3228bdd6a 100644
--- a/src/routes/console/project-[project]/storage/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/+layout.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Storage</title>
+    <title>Storage - Appwrite</title>
 </svelte:head>
 
 {#if loaded}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
index e6157d213..1fb3c8c32 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Bucket</title>
+    <title>Bucket - Appwrite</title>
 </svelte:head>
 
 {#if $bucket && loaded}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
index 2a5b9b0aa..28db7bbdd 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form, FormList } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputFile } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { Modal, CustomId } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -15,9 +15,7 @@
     const bucketId = $page.params.bucket;
     const dispatch = createEventDispatcher();
 
-    let list = new DataTransfer();
     let files: FileList;
-    let input: HTMLInputElement;
     let permissions: string[] = [];
     let id: string = null;
     let error: string;
@@ -41,70 +39,18 @@
         }
     }
 
-    function dropHandler(ev: DragEvent) {
-        ev.preventDefault();
-        if (ev.dataTransfer.items) {
-            // Use DataTransferItemList interface to access the file(s)
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                // If dropped items aren't files, reject them
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
-            }
-        }
-    }
-
-    function dragOverHandler(ev: DragEvent) {
-        ev.preventDefault();
-    }
-
     $: if (!showCreate) {
         id = files = error = null;
-        list = new DataTransfer();
         permissions = [];
     }
 </script>
 
-<input bind:files bind:this={input} type="file" style="display: none" />
-
 <Form on:submit={create}>
-    <Modal {error} bind:show={showCreate}>
+    <Modal size="big" {error} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
-                <div
-                    class="card is-border-dashed is-no-shadow"
-                    on:drop|preventDefault={dropHandler}
-                    on:dragover|preventDefault={dragOverHandler}>
-                    <div class="u-flex u-main-center u-cross-center u-gap-32">
-                        <div class="avatar is-size-large">
-                            <span class="icon-upload" aria-hidden="true" />
-                        </div>
-                        <div class="u-grid u-gap-16">
-                            <p>Drag and drop files here to upload</p>
-                            <div>
-                                <Button secondary on:click={() => input.click()}>
-                                    <span class="icon-upload" aria-hidden="true" />
-                                    <span class="text">Choose File</span>
-                                </Button>
-                                {#if files?.length}
-                                    {files.item(0).name}
-                                    <button
-                                        on:click={() => (files = null)}
-                                        type="button"
-                                        class="x-button"
-                                        aria-label="remove file"
-                                        title="Remove file">
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </button>
-                                {/if}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
+                <InputFile bind:files />
                 <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
             </div>
 
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
index c99faa133..e312e2d9e 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - File</title>
+    <title>File - Appwrite</title>
 </svelte:head>
 
 {#if $file}
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 09c900016..0eb0d2311 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
@@ -128,7 +128,7 @@
         </CardGrid>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Delete file</Heading>
+            <Heading tag="h6" size="7">Delete File</Heading>
             <p>
                 The file will be permanently deleted, including all the files within it. This action
                 is irreversible.
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
index ff005faae..a99800178 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
@@ -12,7 +12,7 @@
     } from '$lib/elements/forms';
     import { bucket } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sizeToBytes, bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import Delete from '../_deleteBucket.svelte';
@@ -53,7 +53,6 @@
         encryption ??= $bucket.encryption;
         antivirus ??= $bucket.antivirus;
     });
-    $: maxSizePlaceholder = bytesToSize($bucket.maximumFileSize, byteUnit);
     $: if (bucketFileSecurity || bucketPermissions) {
         if (bucketFileSecurity !== $bucket.fileSecurity) {
             arePermsDisabled = false;
@@ -369,7 +368,7 @@
                         <InputNumber
                             id="size"
                             label="Size"
-                            placeholder={`${maxSizePlaceholder}`}
+                            placeholder="256"
                             bind:value={maxSize} />
                         <InputSelect id="bytes" label="Bytes" {options} bind:value={byteUnit} />
                     </ul>
diff --git a/src/routes/console/project-[project]/webhooks/+layout.svelte b/src/routes/console/project-[project]/webhooks/+layout.svelte
deleted file mode 100644
index 4fa864ce7..000000000
--- a/src/routes/console/project-[project]/webhooks/+layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/src/routes/console/project-[project]/webhooks/+page.svelte b/src/routes/console/project-[project]/webhooks/+page.svelte
deleted file mode 100644
index cf6d0ecfa..000000000
--- a/src/routes/console/project-[project]/webhooks/+page.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-    import { Empty } from '$lib/components';
-    import {
-        Table,
-        TableBody,
-        TableCellHead,
-        TableCellLink,
-        TableCellText,
-        TableHeader
-    } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
-
-    const projectId = $page.params.project;
-    const request = sdkForConsole.projects.listWebhooks(projectId);
-</script>
-
-<svelte:head>
-    <title>Appwrite - Webhooks</title>
-</svelte:head>
-<Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead width={80}>Name</TableCellHead>
-                    <TableCellHead>URL</TableCellHead>
-                    <TableCellHead width={80}>Events</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each response.webhooks as webhook}
-                        <TableCellLink
-                            title="Name"
-                            href={`${base}/console/project-${projectId}/webhooks/webhook/${webhook.$id}`}>
-                            {webhook.name}
-                        </TableCellLink>
-                        <TableCellText title="URL">{webhook.url}</TableCellText>
-                        <TableCellText title="Scopes">{webhook.events.length}</TableCellText>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty>
-                <div class="u-flex u-flex-vertical">
-                    <div class="common-section">No Webhooks Found</div>
-                    <div class="common-section">
-                        You haven't created any webhooks for your project yet.
-                    </div>
-                </div>
-            </Empty>
-        {/if}
-    {/await}
-</Container>
diff --git a/src/routes/console/project-[project]/webhooks/webhook/[webhook]/+page.svelte b/src/routes/console/project-[project]/webhooks/webhook/[webhook]/+page.svelte
deleted file mode 100644
index 4092eed13..000000000
--- a/src/routes/console/project-[project]/webhooks/webhook/[webhook]/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { Card } from '$lib/components';
-    import { Container } from '$lib/layout';
-</script>
-
-<Container>
-    <Card>
-        <p>TBD</p>
-    </Card>
-</Container>
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index a3a3de806..14daee57f 100644
--- a/src/routes/invite/+page.svelte
+++ b/src/routes/invite/+page.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Accept invite</title>
+    <title>Accept invite - Appwrite</title>
 </svelte:head>
 
 <Unauthenticated>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 7e989ad9b..13507ed8d 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Sign in</title>
+    <title>Sign in - Appwrite</title>
 </svelte:head>
 
 <Unauthenticated>
diff --git a/src/routes/recover/+page.svelte b/src/routes/recover/+page.svelte
index cb381b0dc..42aa2bc35 100644
--- a/src/routes/recover/+page.svelte
+++ b/src/routes/recover/+page.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Recover</title>
+    <title>Recover - Appwrite</title>
 </svelte:head>
 
 <Unauthenticated>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index af0b7498e..63319697b 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Sign up</title>
+    <title>Sign up - Appwrite</title>
 </svelte:head>
 
 <Unauthenticated>
diff --git a/static/icons/dark/color/node_js.svg b/static/icons/dark/color/node.svg
similarity index 100%
rename from static/icons/dark/color/node_js.svg
rename to static/icons/dark/color/node.svg
diff --git a/static/icons/dark/grayscale/node_js.svg b/static/icons/dark/grayscale/node.svg
similarity index 100%
rename from static/icons/dark/grayscale/node_js.svg
rename to static/icons/dark/grayscale/node.svg
diff --git a/static/icons/light/color/node_js.svg b/static/icons/light/color/node.svg
similarity index 100%
rename from static/icons/light/color/node_js.svg
rename to static/icons/light/color/node.svg
diff --git a/static/icons/light/grayscale/node_js.svg b/static/icons/light/grayscale/node.svg
similarity index 100%
rename from static/icons/light/grayscale/node_js.svg
rename to static/icons/light/grayscale/node.svg
diff --git a/tests/unit/elements/inputFile.test.ts b/tests/unit/elements/inputFile.test.ts
index b0bd7ba68..82806cb76 100644
--- a/tests/unit/elements/inputFile.test.ts
+++ b/tests/unit/elements/inputFile.test.ts
@@ -1,38 +1,59 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/svelte';
+// import { render, fireEvent, createEvent } from '@testing-library/svelte';
 import { InputFile } from '../../../src/lib/elements/forms';
 
 test('shows file input', () => {
-    const { getByText, getByLabelText } = render(InputFile, {
-        id: 'input',
+    const { getByText } = render(InputFile, {
         label: 'input',
-        files: null
+        files: null,
+        list: ['file1', 'file2']
     });
-    const input = getByLabelText('input');
+    const label = getByText('input');
+    const dropzone = getByText('Drag and drop files here to upload');
 
-    expect(getByText('input')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'file');
+    expect(label).toBeInTheDocument();
+    expect(dropzone).toBeInTheDocument();
 });
 
-test('shows file input - required', () => {
-    const { getByLabelText } = render(InputFile, {
-        id: 'input',
-        label: 'input',
-        required: true,
-        files: null
-    });
+// test('file input - dropfile', () => {
+//     const { getByText } = render(InputFile, {
+//         label: 'input',
+//         files: null,
+//         list: null
+//     });
+//     const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
+//     const dropzone = getByText('Drag and drop files here to upload');
+//     const fileDropEvent = createEvent.drop(dropzone);
+//     const fileList = [file];
 
-    expect(getByLabelText('input')).toBeRequired();
-});
+//     Object.defineProperty(fileDropEvent, 'dataTransfer', {
+//         value: {
+//             files: {
+//                 item: (itemIndex: string) => fileList[itemIndex],
+//                 length: fileList.length
+//             }
+//         }
+//     });
 
-test('shows file input - disabled', () => {
-    const { getByLabelText } = render(InputFile, {
-        id: 'input',
-        label: 'input',
-        disabled: true,
-        files: null
-    });
+//     fireEvent(dropzone, fileDropEvent);
 
-    expect(getByLabelText('input')).toBeDisabled();
-});
+//     expect(getByText('chucknorris.png')).toBeInTheDocument();
+// });
+
+// test('file input - upload', () => {
+//     const { getByText } = render(InputFile, {
+//         label: 'input',
+//         files: null,
+//         list: ['file1', 'file2']
+//     });
+//     const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
+//     const input = document.getElementsByTagName('input')[0];
+//     Object.defineProperty(input, 'files', {
+//         value: [file]
+//     });
+
+//     fireEvent.drop(input);
+
+//     expect(getByText('chucknorris.png')).toBeInTheDocument();
+// });
diff --git a/tests/unit/elements/inputNumber.test.ts b/tests/unit/elements/inputNumber.test.ts
index 66d543580..c6853dd3f 100644
--- a/tests/unit/elements/inputNumber.test.ts
+++ b/tests/unit/elements/inputNumber.test.ts
@@ -55,14 +55,23 @@ test('shows number input - hide label', () => {
     expect(label).toHaveClass('u-hide');
 });
 
-test('shows number input - maxlength', () => {
+test('shows number input - max', () => {
     const { getByLabelText } = render(InputNumber, {
         id: 'input',
         label: 'input',
-        maxlength: 2
+        max: 2
     });
 
-    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
+    expect(getByLabelText('input')).toHaveAttribute('max', '2');
+});
+test('shows number input - min', () => {
+    const { getByLabelText } = render(InputNumber, {
+        id: 'input',
+        label: 'input',
+        min: 2
+    });
+
+    expect(getByLabelText('input')).toHaveAttribute('min', '2');
 });
 
 test('state', async () => {
diff --git a/tests/unit/elements/inputURL.test.ts b/tests/unit/elements/inputURL.test.ts
new file mode 100644
index 000000000..90d1cfd1d
--- /dev/null
+++ b/tests/unit/elements/inputURL.test.ts
@@ -0,0 +1,85 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { InputURL } from '../../../src/lib/elements/forms';
+
+test('shows URL input', () => {
+    const { getByText, getByLabelText } = render(InputURL, { id: 'input', label: 'input' });
+    const input = getByLabelText('input');
+
+    expect(getByText('input')).toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'url');
+});
+
+test('shows URL input - required', () => {
+    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', required: true });
+
+    expect(getByLabelText('input')).toBeRequired();
+});
+
+test('shows URL input - disabled', () => {
+    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', disabled: true });
+
+    expect(getByLabelText('input')).toBeDisabled();
+});
+
+test('shows URL input - autofocus', () => {
+    const { getByLabelText } = render(InputURL, { id: 'input', label: 'input', autofocus: true });
+
+    expect(getByLabelText('input')).toHaveFocus();
+});
+
+test('shows URL input - placeholder', () => {
+    const { getByPlaceholderText } = render(InputURL, {
+        id: 'input',
+        label: 'input',
+        placeholder: 'find me'
+    });
+
+    expect(getByPlaceholderText('find me')).toBeInTheDocument();
+});
+
+test('shows URL input - hide label', () => {
+    render(InputURL, {
+        id: 'input',
+        label: 'label',
+        showLabel: false
+    });
+
+    const label = document.querySelector('label');
+    expect(label).toHaveClass('u-hide');
+});
+
+test('shows URL input - autocomplete', () => {
+    const { getByLabelText } = render(InputURL, {
+        id: 'input',
+        label: 'input',
+        autocomplete: true
+    });
+
+    expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on');
+});
+
+test('shows URL input - maxlength', () => {
+    const { getByLabelText } = render(InputURL, {
+        id: 'input',
+        label: 'input',
+        maxlength: 2
+    });
+
+    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
+});
+
+test('state', async () => {
+    const { component, getByLabelText } = render(InputURL, {
+        id: 'input',
+        label: 'input',
+        value: ''
+    });
+    const input = getByLabelText('input');
+
+    expect(component.value).toEqual('');
+    await userEvent.type(input, 'lorem');
+    expect(component.value).toEqual('lorem');
+});