diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
index b65093f6e..5f2a0ddf8 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
@@ -1,134 +1,90 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Id } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
+    import { type DeleteOperationState, Id, MultiSelectionTable } from '$lib/components';
     import type { PageData } from './$types';
     import { columns } from './store';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
     import Provider from '../provider.svelte';
     import ProviderType from '../providerType.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { sdk } from '$lib/stores/sdk';
     import { canWriteProviders } from '$lib/stores/roles';
-    import { Badge, FloatingActionBar, Icon, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, Table } from '@appwrite.io/pink-svelte';
     import { IconCheckCircle } from '@appwrite.io/pink-icons-svelte';
-    import Confirm from '$lib/components/confirm.svelte';
     import { page } from '$app/state';
 
-    export let data: PageData;
+    const {
+        data
+    }: {
+        data: PageData;
+    } = $props();
 
-    let selectedIds: string[] = [];
-    let showDelete = false;
-    let deleting = false;
-
-    async function handleDelete() {
-        showDelete = false;
-
-        const promises = selectedIds.map((id) =>
-            sdk
+    async function handleDelete(selectedRows: string[]): Promise<DeleteOperationState> {
+        const promises = selectedRows.map((id) => {
+            return sdk
                 .forProject(page.params.region, page.params.project)
-                .messaging.deleteProvider({ providerId: id })
-        );
+                .messaging.deleteProvider({ providerId: id });
+        });
 
         try {
             await Promise.all(promises);
-            trackEvent(Submit.MessagingProviderDelete, {
-                total: selectedIds.length
-            });
-            addNotification({
-                type: 'success',
-                message: `${selectedIds.length} provider${
-                    selectedIds.length > 1 ? 's' : ''
-                } deleted`
-            });
+            await invalidate(Dependencies.MESSAGING_PROVIDERS);
+
+            trackEvent(Submit.MessagingProviderDelete, { total: selectedRows.length });
+            return true;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
             trackError(error, Submit.MessagingProviderDelete);
-        } finally {
-            invalidate(Dependencies.MESSAGING_PROVIDERS);
-            selectedIds = [];
-            showDelete = false;
+            return error.message;
         }
     }
 </script>
 
-<Table.Root
+<MultiSelectionTable
+    resource="provider"
     columns={$columns}
-    allowSelection={$canWriteProviders}
-    let:root
-    bind:selectedRows={selectedIds}>
-    <svelte:fragment slot="header" let:root>
+    onDelete={handleDelete}
+    allowSelection={$canWriteProviders}>
+    {#snippet header(root)}
         {#each $columns as { id, title }}
             <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
-    </svelte:fragment>
-    {#each data.providers.providers as provider (provider.$id)}
-        <svelte:component
-            this={$canWriteProviders ? Table.Row.Link : Table.Row.Base}
-            id={provider.$id}
-            href={$canWriteProviders
-                ? `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${provider.$id}`
+    {/snippet}
+
+    {#snippet children(root)}
+        {@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
+        {#each data.providers.providers as provider (provider.$id)}
+            {@const href = $canWriteProviders
+                ? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
                 : undefined}
-            {root}>
-            {#each $columns as column}
-                <Table.Cell column={column.id} {root}>
-                    {#if column.id === '$id'}
-                        {#key $columns}
-                            <Id value={provider.$id}>{provider.$id}</Id>
-                        {/key}
-                    {:else if column.id === 'provider'}
-                        <Provider provider={provider.provider} />
-                    {:else if column.id === 'type'}
-                        <ProviderType type={provider.type} size="xs" />
-                    {:else if column.id === 'enabled'}
-                        <Badge
-                            variant="secondary"
-                            type={provider.enabled ? 'success' : undefined}
-                            content={provider.enabled ? 'enabled' : 'disabled'}>
-                            <svelte:fragment slot="start">
-                                {#if provider.enabled}
-                                    <Icon icon={IconCheckCircle} size="s" />
-                                {/if}
-                            </svelte:fragment>
-                        </Badge>
-                    {:else}
-                        {provider[column.id]}
-                    {/if}
-                </Table.Cell>
-            {/each}
-        </svelte:component>
-    {/each}
-</Table.Root>
-
-{#if selectedIds.length > 0}
-    <FloatingActionBar>
-        <svelte:fragment slot="start">
-            <Badge content={selectedIds.length.toString()} />
-            <span>
-                {selectedIds.length > 1 ? 'providers' : 'provider'}
-                selected
-            </span>
-        </svelte:fragment>
-        <svelte:fragment slot="end">
-            <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </svelte:fragment>
-    </FloatingActionBar>
-{/if}
-
-<Confirm
-    title="Delete providers"
-    bind:open={showDelete}
-    onSubmit={handleDelete}
-    disabled={deleting}>
-    <Typography.Text>
-        Are you sure you want to delete <b>{selectedIds.length}</b>
-        {selectedIds.length > 1 ? 'providers' : 'provider'}?
-    </Typography.Text>
-</Confirm>
+            <TableRowComponent {href} {root} id={provider.$id}>
+                {#each $columns as column}
+                    <Table.Cell column={column.id} {root}>
+                        {#if column.id === '$id'}
+                            {#key $columns}
+                                <Id value={provider.$id}>{provider.$id}</Id>
+                            {/key}
+                        {:else if column.id === 'provider'}
+                            <Provider provider={provider.provider} />
+                        {:else if column.id === 'type'}
+                            <ProviderType type={provider.type} size="xs" />
+                        {:else if column.id === 'enabled'}
+                            <Badge
+                                variant="secondary"
+                                type={provider.enabled ? 'success' : undefined}
+                                content={provider.enabled ? 'enabled' : 'disabled'}>
+                                <svelte:fragment slot="start">
+                                    {#if provider.enabled}
+                                        <Icon icon={IconCheckCircle} size="s" />
+                                    {/if}
+                                </svelte:fragment>
+                            </Badge>
+                        {:else}
+                            {provider[column.id]}
+                        {/if}
+                    </Table.Cell>
+                {/each}
+            </TableRowComponent>
+        {/each}
+    {/snippet}
+</MultiSelectionTable>