diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
index a7dbbf194..42d352d8e 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
@@ -23,7 +23,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let subject: string;
     let content: string;
     let topics: string[];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
index 20978e8e9..415504dae 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -24,7 +24,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let file: Models.File;
     let data: Writable<[string, string][]> = writable([['', '']]);
     let title: string;
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
index 85909d99e..a1f88d7a3 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -22,7 +22,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let content: string;
     let topics: string[];
     let users: string[];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
index bcb285001..313b6604f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
@@ -4,14 +4,14 @@
     import { CustomId, LabelCard } from '$lib/components';
     import { providers } from '../store';
     import { InputText } from '$lib/elements/forms';
-    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { Tag, Icon } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { Providers } from '../../provider.svelte';
     import { SmtpEncryption } from '@appwrite.io/console';
 
     let name = '';
     let showCustomId = false;
-    let id: string = null;
+    let id: string | null = null;
 
     $: {
         name;
@@ -152,12 +152,10 @@
 
     {#if !showCustomId}
         <div>
-            <Badge
-                variant="secondary"
-                content="Provider ID"
-                on:click={() => (showCustomId = !showCustomId)}>
-                <Icon icon={IconPencil} size="s" slot="start" />
-            </Badge>
+            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" />
+                Provider ID
+            </Tag>
         </div>
     {:else}
         <CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
index 13ac3800b..9396eeb57 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte
@@ -14,7 +14,9 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string, error: string;
+    let name: string,
+        id: string | null = null,
+        error: string;
     let showCustomId = false;
 
     const create = async () => {