diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
new file mode 100644
index 0000000000..5f25bad40a
--- /dev/null
+++ b/src/lib/components/floatingActionBar.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { portal } from '$lib/actions/portal';
+    import { fly } from 'svelte/transition';
+
+    export let show = false;
+</script>
+
+{#if show}
+    <div class="floating-action-bar" transition:fly|local={{ y: '6rem' }} use:portal>
+        <slot />
+    </div>
+{/if}
+
+<style lang="scss">
+    .floating-action-bar {
+        position: fixed;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 100;
+
+        border-radius: 0.5rem;
+        padding: 0.75rem 1rem;
+    }
+
+    :global(.theme-dark) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-200));
+        background: hsl(var(--color-neutral-300));
+        box-shadow: 0px 6px 16px 8px #14141f;
+    }
+
+    :global(.theme-light) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-30));
+        background: hsl(var(--color-neutral-0));
+        box-shadow: 0px 6px 16px 0px rgba(55, 59, 77, 0.14);
+    }
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 411e81f48e..581b391467 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -54,5 +54,5 @@ export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
-
 export { default as MigrationBox } from './migrationBox.svelte';
+export { default as FloatingActionBar } from './floatingActionBar.svelte';
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ccdf6c6a09..e2bb2fb6f9 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -34,7 +34,8 @@ export enum Dependencies {
     DOMAINS = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks',
-    MIGRATIONS = 'dependency:migrations'
+    MIGRATIONS = 'dependency:migrations',
+    COLLECTIONS = 'dependency:collections'
 }
 
 export const scopes: {
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index b8c601635b..601607e594 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { FormItem, Helper, Label } from '.';
 
-    export let label: string;
+    export let label: string | undefined = undefined;
     export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = false;
+    export let indeterminate = false;
     export let required = false;
     export let disabled = false;
 
@@ -27,19 +28,23 @@
 </script>
 
 <FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+    {#if label}
+        <Label {required} {optionalText} hide={!showLabel} for={id}>
+            {label}
+        </Label>
+    {/if}
 
     <div class="input-text-wrapper">
         <input
             {id}
             {disabled}
             {required}
+            {indeterminate}
             type="checkbox"
             bind:this={element}
             bind:checked={value}
-            on:invalid={handleInvalid} />
+            on:invalid={handleInvalid}
+            on:click />
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte
new file mode 100644
index 0000000000..3c55aa395e
--- /dev/null
+++ b/src/lib/elements/table/cellCheck.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { toggle } from '$lib/helpers/array';
+    import { isHTMLInputElement } from '$lib/helpers/types';
+    import { TableCell } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let id: string;
+    export let selectedIds: string[] = [];
+</script>
+
+<TableCell>
+    <InputCheckbox
+        id="select-{id}"
+        value={selectedIds.includes(id)}
+        on:click={(e) => {
+            // Prevent the link from being followed
+            e.preventDefault();
+            const el = e.currentTarget;
+            if (!isHTMLInputElement(el)) return;
+
+            selectedIds = toggle(selectedIds, id);
+
+            // Hack to make sure the checkbox is checked, independent of the
+            // preventDefault() call above
+            window.setTimeout(() => {
+                el.checked = selectedIds.includes(id);
+            });
+        }} />
+</TableCell>
diff --git a/src/lib/elements/table/cellHeadCheck.svelte b/src/lib/elements/table/cellHeadCheck.svelte
new file mode 100644
index 0000000000..9ef8a22d70
--- /dev/null
+++ b/src/lib/elements/table/cellHeadCheck.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { isHTMLInputElement } from '$lib/helpers/types';
+
+    import { TableCellHead } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let selected: string[] = [];
+    export let pageItemsIds: string[] = [];
+
+    function handleClick(e: MouseEvent) {
+        if (!isHTMLInputElement(e.target)) return;
+        if (e.target.checked) {
+            const set = new Set(selected);
+            pageItemsIds.forEach((id) => set.add(id));
+            selected = Array.from(set);
+        } else {
+            selected = selected.filter((id) => {
+                return !pageItemsIds.includes(id);
+            });
+        }
+    }
+
+    $: someSelected = pageItemsIds.some((id) => selected.includes(id));
+    $: allSelected = pageItemsIds.every((id) => selected.includes(id));
+</script>
+
+<TableCellHead width={10}>
+    <InputCheckbox
+        id="select-all"
+        indeterminate={someSelected && !allSelected}
+        value={allSelected}
+        on:click={handleClick} />
+</TableCellHead>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index c702ca6450..ca4752e8af 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -9,6 +9,8 @@ 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 TableCellHeadCheck } from './cellHeadCheck.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
 export { default as TableCellAvatar } from './cellAvatar.svelte';
 export { default as TableCellText } from './cellText.svelte';
+export { default as TableCellCheck } from './cellCheck.svelte';
diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index 6d30f8aff8..01b4186a71 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -2,6 +2,7 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    export let noMargin = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement> = (node) => {
@@ -37,8 +38,8 @@
     };
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32" data-private>
-    <div class="table-wrapper" use:hasOverflow>
+<div class="table-with-scroll {noMargin ? '' : 'u-margin-block-start-32'}" data-private>
+    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index a325e33f5c..6690dd1dfc 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -88,3 +88,11 @@ export function excludeArray<T, E extends T>(
 export function includesAll<T>(arr1: T[], arr2: T[]): boolean {
     return arr2.every((elem) => arr1.includes(elem));
 }
+
+export function toggle<T>(arr: T[], elem: T): T[] {
+    if (arr.includes(elem)) {
+        return arr.filter((e) => e !== elem);
+    }
+    arr.push(elem);
+    return arr;
+}
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 344bc6af50..5c5ffec06d 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -1,6 +1,16 @@
 import type { Writable } from 'svelte/store';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DeepKeys<T extends Record<string, any>> = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [K in keyof T]: T[K] extends Record<string, any> ? `${K}.${DeepKeys<T[K]>}` : K;
 }[keyof T];
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
+
+export function isHTMLElement(el: unknown): el is HTMLElement {
+    return el instanceof HTMLElement;
+}
+
+export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
+    return el instanceof HTMLInputElement;
+}
diff --git a/src/routes/console/project-[project]/databases/+page.ts b/src/routes/console/project-[project]/databases/+page.ts
index 2a9e3446a2..477e86419c 100644
--- a/src/routes/console/project-[project]/databases/+page.ts
+++ b/src/routes/console/project-[project]/databases/+page.ts
@@ -1,10 +1,11 @@
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, route }) => {
+export const load: PageLoad = async ({ url, route, depends }) => {
+    depends(Dependencies.DATABASES);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
index 1a2e91a3b1..dff27da836 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
@@ -2,9 +2,10 @@ import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
-export const load: PageLoad = async ({ params, url, route }) => {
+export const load: PageLoad = async ({ params, url, route, depends }) => {
+    depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 727be175c9..953a3d3924 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Id } from '$lib/components';
+    import { Alert, FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
+        TableCellHeadCheck,
+        TableCellText,
         TableHeader,
+        TableRow,
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import type { PageData } from './$types';
@@ -24,6 +33,7 @@
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
     let showRelationships = false;
     let selectedRelationship: Models.AttributeRelationship = null;
     let relationshipData: [];
@@ -73,18 +83,65 @@
 
     $: selected = preferences.getCustomCollectionColumns($page.params.collection);
 
-    $: columns.set(
-        $collection.attributes.map((attribute) => ({
-            id: attribute.key,
-            title: attribute.key,
-            type: attribute.type,
-            show: selected?.includes(attribute.key) ?? true
-        }))
-    );
+    $: {
+        columns.set(
+            $collection.attributes.map((attribute) => ({
+                id: attribute.key,
+                title: attribute.key,
+                type: attribute.type,
+                show: selected?.includes(attribute.key) ?? true
+            }))
+        );
+    }
+
+    let selectedDb: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selectedDb.map((documentId) =>
+            sdk.forProject.databases.deleteDocument(databaseId, collectionId, documentId)
+        );
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.DocumentDelete);
+            addNotification({
+                type: 'success',
+                message: `${selectedDb.length} document${selectedDb.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.DOCUMENTS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DocumentDelete);
+        } finally {
+            selectedDb = [];
+            showDelete = false;
+        }
+    }
+
+    enum Deletion {
+        'setNull' = 'Set document ID as NULL in all related documents',
+        'cascade' = 'All related documents will be deleted',
+        'restrict' = 'Document can not be deleted'
+    }
+
+    $: relAttributes = $attributes?.filter((attribute) =>
+        isRelationship(attribute)
+    ) as Models.AttributeRelationship[];
+
+    let checked = false;
 </script>
 
 <TableScroll isSticky>
     <TableHeader>
+        <TableCellHeadCheck
+            bind:selected={selectedDb}
+            pageItemsIds={data.documents.documents.map((d) => d.$id)} />
         <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
         {#each $columns.filter((n) => n.show) as column}
             {#if column.show}
@@ -96,6 +153,8 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
+                <TableCellCheck bind:selectedIds={selectedDb} id={document.$id} />
+
                 <TableCell width={150}>
                     <Id value={document.$id}>
                         {document.$id}
@@ -165,3 +224,98 @@
 </TableScroll>
 
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
+
+<FloatingActionBar show={selectedDb.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selectedDb.length}</span>
+            <span>
+                {selected.length > 1 ? 'documents' : 'document'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Documents</svelte:fragment>
+
+    <div>
+        <p class="text" data-private>
+            Are you sure you want to delete <b>{selectedDb.length}</b>
+            {selectedDb.length > 1 ? 'documents' : 'document'}?
+        </p>
+
+        {#if relAttributes?.length}
+            <TableScroll noMargin>
+                <TableHeader>
+                    <TableCellHead width={50}>Relation</TableCellHead>
+                    <TableCellHead width={50}>Setting</TableCellHead>
+                    <TableCellHead width={200} />
+                </TableHeader>
+                <TableBody>
+                    {#each relAttributes as attr}
+                        <TableRow>
+                            <TableCell title="relation">
+                                <span class="u-flex u-cross-center u-gap-8">
+                                    {#if attr.twoWay}
+                                        <span class="icon-switch-horizontal" />
+                                    {:else}
+                                        <span class="icon-arrow-sm-right" />
+                                    {/if}
+                                    <span data-private>{attr.key}</span>
+                                </span>
+                            </TableCell>
+                            <TableCellText title="Settings">
+                                {attr.onDelete}
+                            </TableCellText>
+                            <TableCellText title="description">
+                                {Deletion[attr.onDelete]}
+                            </TableCellText>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </TableScroll>
+            <div class="u-flex u-flex-vertical u-gap-16">
+                <Alert>To change the selection edit the relationship settings.</Alert>
+
+                <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
+                    Delete document from <span data-private>{$collection.name}</span>
+                </InputChoice>
+            </div>
+        {:else}
+            <p class="u-bold">This action is irreversible.</p>
+        {/if}
+    </div>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting || (relAttributes?.length && !checked)}
+            >Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index 458baaa62b..22305fee2b 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -1,27 +1,69 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Id, Modal } from '$lib/components';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { columns } from './store';
 
     export let data: PageData;
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+
+    let selected: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selected.map((collectionId) =>
+            sdk.forProject.databases.deleteCollection(databaseId, collectionId)
+        );
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.CollectionDelete);
+            addNotification({
+                type: 'success',
+                message: `${selected.length} collection${selected.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.COLLECTIONS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.CollectionDelete);
+        } finally {
+            selected = [];
+            showDelete = false;
+        }
+    }
 </script>
 
 <TableScroll>
     <TableHeader>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.collections.collections.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
@@ -32,6 +74,7 @@
         {#each data.collections.collections as collection}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
+                <TableCellCheck bind:selectedIds={selected} id={collection.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
@@ -55,3 +98,52 @@
         {/each}
     </TableBody>
 </TableScroll>
+
+<FloatingActionBar show={selected.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selected.length}</span>
+            <span>
+                {selected.length > 1 ? 'collections' : 'collection'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Collections</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selected.length}</b>
+        {selected.length > 1 ? 'collections' : 'collection'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index ac63aa1848..0477187a4f 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -1,26 +1,66 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Id, Modal } from '$lib/components';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
-        TableScroll
+        TableScroll,
+        TableCellCheck
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { columns } from './store';
 
     export let data: PageData;
     const projectId = $page.params.project;
+
+    let selected: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selected.map((databaseId) => sdk.forProject.databases.delete(databaseId));
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.DatabaseDelete);
+            addNotification({
+                type: 'success',
+                message: `${selected.length} database${selected.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.DATABASES);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DatabaseDelete);
+        } finally {
+            selected = [];
+            showDelete = false;
+        }
+    }
 </script>
 
 <TableScroll>
     <TableHeader>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.databases.databases.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
@@ -31,6 +71,7 @@
         {#each data.databases.databases as database}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${database.$id}`}>
+                <TableCellCheck bind:selectedIds={selected} id={database.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
@@ -56,3 +97,52 @@
         {/each}
     </TableBody>
 </TableScroll>
+
+<FloatingActionBar show={selected.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selected.length}</span>
+            <span>
+                {selected.length > 1 ? 'databases' : 'database'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Database</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selected.length}</b>
+        {selected.length > 1 ? 'databases' : 'database'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>