diff --git a/package-lock.json b/package-lock.json
index 61530ef93d..fe81d9ab3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@appwrite.io/pink": "^0.0.4",
-                "@aw-labs/appwrite-console": "^13.1.0",
+                "@aw-labs/appwrite-console": "npm:christy-appwrite-console@0.0.4",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.36.0",
                 "@sentry/tracing": "^7.36.0",
@@ -162,9 +162,10 @@
             "integrity": "sha512-GFOodekDck6xX7OAZuI1mo7F87ThEZ9Gt0xMsgTR79zkWcnBRq0+J89pFWRPAtFNEVMPQLVHuu6s8S4UleHwtQ=="
         },
         "node_modules/@aw-labs/appwrite-console": {
-            "version": "13.1.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-13.1.0.tgz",
-            "integrity": "sha512-1FyKke5b3vx+D3VfNYd3YnFhzUOlsj9bD+KTRLWA4WRItb55thFVZJMWQQ4XnZtDiLPuJAn2XjbMSfMr+9XYwg==",
+            "name": "christy-appwrite-console",
+            "version": "0.0.4",
+            "resolved": "https://registry.npmjs.org/christy-appwrite-console/-/christy-appwrite-console-0.0.4.tgz",
+            "integrity": "sha512-5wfW7/n97RzjBZfvYRwQD1hFGCBG2xpQT0CcxyJk3yjoVUOYSg+Hu8o32kXXjMZw3wabozixbyAe30hkhKettw==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 0d0865856e..06c4b49015 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/pink": "^0.0.4",
-        "@aw-labs/appwrite-console": "^13.1.0",
+        "@aw-labs/appwrite-console": "npm:christy-appwrite-console@0.0.4",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",
         "@sentry/tracing": "^7.36.0",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index c4324b9704..e35af13bdc 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -194,6 +194,9 @@ export enum Submit {
     WebhookUpdateEvents = 'submit_webhook_update_events',
     WebhookUpdateName = 'submit_webhook_update_name',
     WebhookUpdateSecurity = 'submit_webhook_update_security',
+    BackupCreate = 'submit_backup_create',
+    BackupDelete = 'submit_backup_delete',
+    BackupRestore = 'submit_backup_restore',
     BucketCreate = 'submit_bucket_create',
     BucketDelete = 'submit_bucket_delete',
     BucketUpdateEnabled = 'submit_bucket_update_enabled',
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0a19c92083..9cc1f13711 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -32,7 +32,8 @@ export enum Dependencies {
     KEYS = 'dependency:keys',
     DOMAINS = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
-    WEBHOOKS = 'dependency:webhooks'
+    WEBHOOKS = 'dependency:webhooks',
+    BACKUPS = 'dependency:backups'
 }
 
 export const scopes: {
diff --git a/src/routes/console/project-[project]/settings/backups/+page.svelte b/src/routes/console/project-[project]/settings/backups/+page.svelte
new file mode 100644
index 0000000000..d1828e3d62
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/backups/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Empty, Status } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import type { PageData } from './$types';
+    import Heading from '$lib/components/heading.svelte';
+    import Create from './create.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Delete from './delete.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../store';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { createEventDispatcher } from 'svelte';
+
+    export let data: PageData;
+
+    let showCreate = false;
+    let showDelete = false;
+    let selectedBackup: Models.Backup;
+
+    const projectId = $project.$id;
+
+    const dispatch = createEventDispatcher();
+
+    async function handleCreate() {
+        showCreate = false;
+    }
+
+    async function handleRestore(backup: Models.Backup) {
+        try {
+            const restore = await sdkForConsole.projects.restoreBackup(projectId, backup.$id);
+            dispatch('created', restore);
+            addNotification({
+                type: 'success',
+                message: `${backup.name} is being restored.`
+            });
+            trackEvent(Submit.BackupRestore, {
+                customId: !!backup.$id
+            });
+            await invalidate(Dependencies.BACKUPS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupRestore);
+        }
+    }
+
+    console.log(data.backups);
+</script>
+
+<svelte:head>
+    <title>Backups - Appwrite</title>
+</svelte:head>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Backups</Heading>
+        <Button on:click={() => (showCreate = true)} event="create_backup">
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create Backup</span>
+        </Button>
+    </div>
+
+    {#if data.backups.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>Created</TableCellHead>
+                <TableCellHead width={80}>Status</TableCellHead>
+                <TableCellHead>Delete</TableCellHead>
+                <TableCellHead>Restore</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.backups.backups as backup}
+                    <TableRow>
+                        <TableCell title="Name">
+                            <div class="u-flex u-main-space-between">
+                                {backup.name}
+                            </div>
+                        </TableCell>
+                        <TableCellText title="Created"
+                            >{toLocaleDateTime(backup.$createdAt)}</TableCellText>
+                        <TableCellText title="Status">
+                            <Status status={backup.status}>
+                                {backup.status}
+                            </Status>
+                        </TableCellText>
+                        <TableCellText title="Delete">
+                            <Button
+                                on:click={async () => {
+                                    showDelete = true;
+                                    selectedBackup = backup;
+                                }}
+                                secondary>Delete</Button>
+                        </TableCellText>
+                        <TableCellText title="Restore">
+                            <Button on:click={async () => handleRestore(backup)} secondary
+                                >Restore</Button>
+                        </TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty
+            single
+            href="https://appwrite.io/docs/backups"
+            target="backup"
+            on:click={() => (showCreate = true)} />
+    {/if}
+</Container>
+
+<Create bind:showCreate on:created={handleCreate} />
+<Delete bind:showDelete bind:selectedBackup />
diff --git a/src/routes/console/project-[project]/settings/backups/+page.ts b/src/routes/console/project-[project]/settings/backups/+page.ts
new file mode 100644
index 0000000000..0aef1f0f82
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/backups/+page.ts
@@ -0,0 +1,10 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.BACKUPS);
+    return {
+        backups: await sdkForConsole.projects.listBackups(params.project)
+    };
+};
diff --git a/src/routes/console/project-[project]/settings/backups/create.svelte b/src/routes/console/project-[project]/settings/backups/create.svelte
new file mode 100644
index 0000000000..5aacc3c855
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/backups/create.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { project } from '../../store';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name = '';
+    let description = '';
+    let id: string = null;
+
+    const projectId = $project.$id;
+
+    const create = async () => {
+        try {
+            const backup = await sdkForConsole.projects.createBackup(projectId, name);
+            showCreate = false;
+            dispatch('created', backup);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+            trackEvent(Submit.BackupCreate, {
+                customId: !!id
+            });
+            name = id = null;
+            await invalidate(Dependencies.BACKUPS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupCreate);
+        }
+    };
+</script>
+
+<Modal size="big" on:submit={create} bind:show={showCreate}>
+    <svelte:fragment slot="header">Create Backup</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter Backup name"
+            bind:value={name}
+            autofocus
+            required />
+
+        <InputText
+            id="description"
+            label="Description"
+            placeholder="Enter Backup Description"
+            bind:value={description} />
+
+        <!-- {#each allScopes.filter((s) => s.category === category) as scope}
+            <InputChoice
+                id={scope.scope}
+                label={scope.scope}
+                bind:value={activeScopes[scope.scope]}>
+                {scope.description}
+            </InputChoice>
+        {/each} -->
+    </FormList>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/backups/delete.svelte b/src/routes/console/project-[project]/settings/backups/delete.svelte
new file mode 100644
index 0000000000..821dffde09
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/backups/delete.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { project } from '../../store';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { base } from '$app/paths';
+
+    export let showDelete = false;
+    export let selectedBackup: Models.Backup;
+
+    const deleteBackup = async () => {
+        try {
+            await sdkForConsole.projects.deleteBackup($project.$id, selectedBackup.$id);
+            addNotification({
+                type: 'success',
+                message: `${selectedBackup.name} has been deleted`
+            });
+            trackEvent(Submit.BackupDelete);
+            await invalidate(Dependencies.BACKUPS);
+            await goto(`${base}/console/project-${$project.$id}/settings/backups`);
+            showDelete = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupDelete);
+        }
+    };
+</script>
+
+<Modal bind:show={showDelete} on:submit={deleteBackup} warning>
+    <svelte:fragment slot="header">Delete Backup</svelte:fragment>
+    {#if selectedBackup}
+        <p data-private>
+            Are you sure you want to delete backup <b>{selectedBackup.name}</b> from '{$project.name}'?
+        </p>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/backups/scopes.svelte b/src/routes/console/project-[project]/settings/backups/scopes.svelte
new file mode 100644
index 0000000000..03ab8215e2
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/backups/scopes.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+    import { Collapsible, CollapsibleItem } from '$lib/components';
+    import { Button, FormList, InputChoice } from '$lib/elements/forms';
+    import { scopes as allScopes } from '$lib/constants';
+    import { onMount } from 'svelte';
+    import { symmetricDifference } from '$lib/helpers/array';
+
+    export let scopes: string[];
+
+    enum Category {
+        Users = 'Auth',
+        Database = 'Database',
+        Functions = 'Functions',
+        Storage = 'Storage',
+        Other = 'Other'
+    }
+
+    let mounted = false;
+
+    onMount(() => {
+        scopes.forEach((scope) => {
+            activeScopes[scope] = true;
+        });
+        mounted = true;
+    });
+
+    function selectAll() {
+        for (const scope in activeScopes) {
+            activeScopes[scope] = true;
+        }
+    }
+
+    function deselectAll() {
+        for (const scope in activeScopes) {
+            activeScopes[scope] = false;
+        }
+    }
+
+    function categoryState(category: string, s: string[]): boolean | null {
+        const scopesByCategory = allScopes.filter((n) => n.category === category);
+        const filtered = scopesByCategory.filter((n) => s.includes(n.scope));
+        if (filtered.length === 0) {
+            return false;
+        } else if (filtered.length === scopesByCategory.length) {
+            return true;
+        } else {
+            return null;
+        }
+    }
+
+    function onCategoryChange(
+        event: Event & { currentTarget: EventTarget & HTMLInputElement },
+        category: Category
+    ) {
+        allScopes.forEach((s) => {
+            if (s.category === category) {
+                activeScopes[s.scope] = event.currentTarget.checked;
+            }
+        });
+    }
+
+    const activeScopes = allScopes.reduce((prev, next) => {
+        prev[next.scope] = false;
+
+        return prev;
+    }, {});
+
+    $: {
+        if (mounted) {
+            const newScopes = allScopes
+                .filter((scope) => activeScopes[scope.scope])
+                .map(({ scope }) => scope);
+            if (symmetricDifference(scopes, newScopes).length) {
+                scopes = newScopes;
+            }
+        }
+    }
+</script>
+
+<ul class="buttons-list u-main-end">
+    <li class="buttons-list-item">
+        <Button text on:click={deselectAll}>Deselect all</Button>
+    </li>
+    <li class="buttons-list-item">
+        <Button text on:click={selectAll}>Select all</Button>
+    </li>
+</ul>
+
+<Collapsible>
+    {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Other] as category}
+        {@const checked = categoryState(category, scopes)}
+        <CollapsibleItem withIndentation>
+            <svelte:fragment slot="beforetitle">
+                <input
+                    type="checkbox"
+                    {checked}
+                    indeterminate={checked === null ? true : false}
+                    on:change={(e) => onCategoryChange(e, category)} />
+            </svelte:fragment>
+            <svelte:fragment slot="title">
+                {category}
+            </svelte:fragment>
+            <svelte:fragment slot="subtitle">
+                {@const scopesLength = allScopes.filter(
+                    (n) => n.category === category && scopes.includes(n.scope)
+                ).length}
+                ({scopesLength}
+                {scopesLength === 1 ? 'Scope' : 'Scopes'})
+            </svelte:fragment>
+            <div class="form">
+                <FormList>
+                    {#each allScopes.filter((s) => s.category === category) as scope}
+                        <InputChoice
+                            id={scope.scope}
+                            label={scope.scope}
+                            bind:value={activeScopes[scope.scope]}>
+                            {scope.description}
+                        </InputChoice>
+                    {/each}
+                </FormList>
+            </div>
+        </CollapsibleItem>
+    {/each}
+</Collapsible>
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
index b6c51f014b..20b4668a6d 100644
--- a/src/routes/console/project-[project]/settings/header.svelte
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -21,6 +21,11 @@
             href: `${path}/webhooks`,
             title: 'Webhooks',
             event: 'webhooks'
+        },
+        {
+            href: `${path}/backups`,
+            title: 'Backups',
+            event: 'backups'
         }
     ];
 </script>