diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index e2c09629c8..ba4d1037f8 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,6 +11,7 @@
         element?: HTMLInputElement | undefined;
         indeterminate?: boolean;
         wrapperTag?: FormItemTag;
+        size?: 'small' | 'medium';
     }
 
     export let id: string;
@@ -20,6 +21,7 @@
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
     export let wrapperTag: FormItemTag = 'li';
+    export let size: $$Props['size'] = 'medium';
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -44,6 +46,7 @@
                 {disabled}
                 {required}
                 {...$$restProps}
+                class:is-small={size === 'small'}
                 type="checkbox"
                 bind:this={element}
                 bind:checked
diff --git a/src/routes/console/project-[project]/messaging/actions.svelte b/src/routes/console/project-[project]/messaging/actions.svelte
index 9a6542d20b..f107fac71f 100644
--- a/src/routes/console/project-[project]/messaging/actions.svelte
+++ b/src/routes/console/project-[project]/messaging/actions.svelte
@@ -35,10 +35,14 @@
         dispatch('addTopics', e.detail);
     }} />
 <UserTargetsModal
+    title="Select targets"
     {providerType}
     bind:show={showUserTargets}
     bind:targetsById={$targetsById}
     on:update={(e) => {
         showUserTargets = false;
         dispatch('addTargets', e.detail);
-    }} />
+    }}>
+    <svelte:fragment slot="description"
+        >Select existing targets to which you want to send this message.</svelte:fragment>
+</UserTargetsModal>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
index 27219e4e0d..08d6fd58a8 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
@@ -146,4 +146,18 @@
     {/if}
 </Container>
 
-<UserTargetsModal bind:show={showAdd} bind:targetsById={$targetsById} on:update={addTargets} />
+<UserTargetsModal
+    title="Select subscribers"
+    bind:show={showAdd}
+    bind:targetsById={$targetsById}
+    on:update={addTargets}>
+    <svelte:fragment slot="description">
+        <p class="text">
+            Add subscribers to this topic by selecting the targets for directing messages. <a
+                href="https://appwrite.io/docs/products/messaging/topics"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Learn more about subscribers.</a>
+        </p>
+    </svelte:fragment>
+</UserTargetsModal>
diff --git a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
index c78ddf434a..7552144aa4 100644
--- a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
@@ -12,10 +12,10 @@
     import { createEventDispatcher } from 'svelte';
     import ProviderType from './providerType.svelte';
 
+    export let title: string;
     export let show: boolean;
     export let targetsById: Record<string, Models.Target>;
     export let providerType: MessagingProviderType = null;
-    export let title = 'Select subscribers';
 
     const dispatch = createEventDispatcher();
 
@@ -118,82 +118,82 @@
 </script>
 
 <Modal {title} bind:show onSubmit={submit} on:close={reset} size="big" headerDivider={false}>
-    <!-- TODO: Update docs link -->
-    <p class="text">
-        Add subscribers to this topic by selecting the targets for directing messages. <a
-            href="https://appwrite.io/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">Learn more about subscribers.</a>
-    </p>
+    <slot name="description" />
+
     <InputSearch
         autofocus
         disabled={totalResults === 0 && !search}
         placeholder="Search by name, email, phone or ID"
         bind:value={search} />
     {#if Object.keys(userResultsById).length > 0}
-        <Collapsible>
-            {#each Object.entries(userResultsById) as [userId, user] (userId)}
-                {@const selectedCount = user.targets.filter(
-                    (target) => selected[target.$id]
-                ).length}
-                <CollapsibleItem withIndentation>
-                    <svelte:fragment slot="beforetitle">
-                        <InputCheckbox
-                            id={userId}
-                            disabled={user.targets.length > 0 &&
-                                user.targets.every((target) => targetsById[target.$id])}
-                            checked={selectedCount > 0 && selectedCount === user.targets.length}
-                            on:change={(event) => onUserSelection(event, userId)} />
-                    </svelte:fragment>
-                    <svelte:fragment slot="title">
-                        <span class="u-line-height-1-5">
-                            <span class="body-text-2 u-bold" data-private>
-                                {#if user.name}
-                                    {user.name}
-                                {:else if user.email}
-                                    {user.email}
-                                {:else if user.phone}
-                                    {user.phone}
-                                {:else}
-                                    {userId}
-                                {/if}
+        <div class="u-sep-block-end">
+            <Collapsible>
+                {#each Object.entries(userResultsById) as [userId, user] (userId)}
+                    {@const selectedCount = user.targets.filter(
+                        (target) => selected[target.$id]
+                    ).length}
+                    <CollapsibleItem withIndentation>
+                        <svelte:fragment slot="beforetitle">
+                            <InputCheckbox
+                                id={userId}
+                                size="small"
+                                disabled={user.targets.length > 0 &&
+                                    user.targets.every((target) => targetsById[target.$id])}
+                                checked={selectedCount > 0 && selectedCount === user.targets.length}
+                                on:change={(event) => onUserSelection(event, userId)} />
+                        </svelte:fragment>
+                        <svelte:fragment slot="title">
+                            <span class="u-line-height-1-5">
+                                <span
+                                    class="body-text-1 u-bold"
+                                    style="color:hsl(var(--color-neutral-80))"
+                                    data-private>
+                                    {#if user.name}
+                                        {user.name}
+                                    {:else if user.email}
+                                        {user.email}
+                                    {:else if user.phone}
+                                        {user.phone}
+                                    {:else}
+                                        {userId}
+                                    {/if}
+                                </span>
                             </span>
-                        </span>
-                    </svelte:fragment>
-                    <svelte:fragment slot="subtitle">
-                        ({selectedCount} targets)
-                    </svelte:fragment>
-                    <FormList>
-                        {#each user.targets as target}
-                            <div class="u-flex">
-                                <InputCheckbox
-                                    id={target.$id}
-                                    disabled={!!targetsById[target.$id]}
-                                    checked={!!selected[target.$id]}
-                                    on:change={(event) => onTargetSelection(event, target)}>
-                                    <svelte:fragment slot="description">
-                                        <div class="u-inline-flex u-gap-8">
-                                            <span class="inline-tag u-normal"
-                                                ><ProviderType
-                                                    type={target.providerType}
-                                                    noIcon /></span>
-                                            {#if target.providerType !== MessagingProviderType.Push}
-                                                {target.identifier}
-                                            {:else}
-                                                <!-- TODO: Show device info -->
-                                                {target.name}
-                                            {/if}
-                                        </div>
-                                    </svelte:fragment>
-                                </InputCheckbox>
-                            </div>
-                        {/each}
-                    </FormList>
-                </CollapsibleItem>
-            {/each}
-        </Collapsible>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+                        </svelte:fragment>
+                        <svelte:fragment slot="subtitle">
+                            ({selectedCount}/{user.targets.length} targets)
+                        </svelte:fragment>
+                        <FormList>
+                            {#each user.targets as target}
+                                <div class="u-flex">
+                                    <InputCheckbox
+                                        id={target.$id}
+                                        size="small"
+                                        disabled={!!targetsById[target.$id]}
+                                        checked={!!selected[target.$id]}
+                                        on:change={(event) => onTargetSelection(event, target)}>
+                                        <svelte:fragment slot="description">
+                                            <div class="u-inline-flex u-gap-8">
+                                                <span class="inline-tag u-normal u-x-small"
+                                                    ><ProviderType
+                                                        type={target.providerType}
+                                                        noIcon /></span>
+                                                {#if target.providerType !== MessagingProviderType.Push}
+                                                    {target.identifier}
+                                                {:else}
+                                                    {target.name}
+                                                {/if}
+                                            </div>
+                                        </svelte:fragment>
+                                    </InputCheckbox>
+                                </div>
+                            {/each}
+                        </FormList>
+                    </CollapsibleItem>
+                {/each}
+            </Collapsible>
+        </div>
+        <div class="u-flex u-main-space-between">
             <p class="text">Total results: {totalResults}</p>
             <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
         </div>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index 80e62c4fcb..b7ebda6777 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -49,7 +49,6 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Targets</svelte:fragment>
-    <!-- TODO: add support for topics -->
     <svelte:fragment slot="subtitle">
         Select targets to whom this message should be directed.
     </svelte:fragment>
@@ -102,7 +101,7 @@
                                         type="button"
                                         aria-label="delete"
                                         on:click={() => removeTopic(topicId)}>
-                                        <span class="icon-x" aria-hidden="true" />
+                                        <span class="icon-x u-font-size-20" aria-hidden="true" />
                                     </button>
                                 </div>
                             </TableCell>
@@ -125,7 +124,7 @@
                                         type="button"
                                         aria-label="delete"
                                         on:click={() => removeTarget(targetId)}>
-                                        <span class="icon-x" aria-hidden="true" />
+                                        <span class="icon-x u-font-size-20" aria-hidden="true" />
                                     </button>
                                 </div>
                             </TableCell>
diff --git a/src/routes/console/project-[project]/overview/keys/checkbox.svelte b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
index cad6cd09c5..4e45539575 100644
--- a/src/routes/console/project-[project]/overview/keys/checkbox.svelte
+++ b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
     export let indeterminate = false;
     export let checked = false;
+    export let fontSize: $$Props['fontSize'] = 'medium';
 
     interface $$Props extends Partial<HTMLInputElement> {
         indeterminate?: boolean;
         checked?: boolean;
+        fontSize?: 'small' | 'medium';
     }
 </script>
 
-<input type="checkbox" bind:checked {...$$restProps} bind:indeterminate on:change />
+<input
+    class:is-small={fontSize === 'small'}
+    type="checkbox"
+    bind:checked
+    {...$$restProps}
+    bind:indeterminate
+    on:change />