diff --git a/src/routes/console/project-[project]/messaging/provider.svelte b/src/routes/console/project-[project]/messaging/provider.svelte
index e130ea23ff..a78eb75c0c 100644
--- a/src/routes/console/project-[project]/messaging/provider.svelte
+++ b/src/routes/console/project-[project]/messaging/provider.svelte
@@ -11,6 +11,50 @@
         FCM = 'fcm',
         APNS = 'apns'
     }
+
+    export function getProviderDisplayNameAndIcon(provider: Providers | string) {
+        let icon = '';
+        let displayName = provider.charAt(0).toUpperCase() + provider.slice(1);
+
+        switch (provider) {
+            case Providers.FCM:
+                icon = 'firebase';
+                displayName = 'FCM';
+                break;
+            case Providers.APNS:
+                icon = 'apple';
+                displayName = 'APNS';
+                break;
+            case Providers.Sendgrid:
+                icon = 'sendgrid';
+                break;
+            case Providers.Mailgun:
+                icon = 'mailgun';
+                break;
+            case Providers.SMTP:
+                icon = 'smtp';
+                displayName = 'SMTP';
+                break;
+            case Providers.Twilio:
+                icon = 'twilio';
+                break;
+            case Providers.Telesign:
+                icon = 'telesign';
+                break;
+            case Providers.Msg91:
+                icon = 'msg91';
+                displayName = 'MSG91';
+                break;
+            case Providers.Textmagic:
+                icon = 'textmagic';
+                displayName = 'Textmagic';
+                break;
+            case Providers.Vonage:
+                icon = 'vonage';
+                break;
+        }
+        return { icon, displayName };
+    }
 </script>
 
 <script lang="ts">
@@ -22,8 +66,7 @@
     export let noIcon = false;
     export let size: 's' | 'm' | 'l' = 'm';
 
-    let icon = '';
-    let displayName = name || provider.charAt(0).toUpperCase() + provider.slice(1);
+    const { icon, displayName } = getProviderDisplayNameAndIcon(provider);
 
     let textSize = '1.25rem';
     switch (size) {
@@ -34,44 +77,6 @@
             textSize = '1.5rem';
             break;
     }
-
-    switch (provider) {
-        case Providers.FCM:
-            icon = 'firebase';
-            displayName = name || 'FCM';
-            break;
-        case Providers.APNS:
-            icon = 'apple';
-            displayName = name || 'APNS';
-            break;
-        case Providers.Sendgrid:
-            icon = 'sendgrid';
-            break;
-        case Providers.Mailgun:
-            icon = 'mailgun';
-            break;
-        case Providers.SMTP:
-            icon = 'smtp';
-            displayName = name || 'SMTP';
-            break;
-        case Providers.Twilio:
-            icon = 'twilio';
-            break;
-        case Providers.Telesign:
-            icon = 'telesign';
-            break;
-        case Providers.Msg91:
-            icon = 'msg91';
-            displayName = name || 'MSG91';
-            break;
-        case Providers.Textmagic:
-            icon = 'textmagic';
-            displayName = name || 'TextMagic';
-            break;
-        case Providers.Vonage:
-            icon = 'vonage';
-            break;
-    }
 </script>
 
 {#if icon === ''}
@@ -89,12 +94,12 @@
                     <img
                         style:--p-text-size={textSize}
                         src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                        alt={displayName} />
+                        alt={name || displayName} />
                 {/if}
             </div>
         {/if}
         <slot>
-            {displayName}
+            {name || displayName}
         </slot>
     </div>
 {/if}
diff --git a/src/routes/console/project-[project]/messaging/providers/create.svelte b/src/routes/console/project-[project]/messaging/providers/create.svelte
index 9b814ffb00..53cdf91a4a 100644
--- a/src/routes/console/project-[project]/messaging/providers/create.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/create.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
     import { Wizard } from '$lib/layout';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Provider from './wizard/provider.svelte';
-    import Configure from './wizard/configure.svelte';
+    import Settings from './wizard/settings.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
@@ -155,18 +154,14 @@
         }
     }
 
-    onDestroy(() => {
-        console.log('destroy');
-    });
-
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
         label: 'Proivder',
         component: Provider
     });
     stepsComponents.set(2, {
-        label: 'Configure',
-        component: Configure
+        label: 'Settings',
+        component: Settings
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
new file mode 100644
index 0000000000..f76d7baf6b
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { ImagePreview } from '$lib/components';
+
+    export let lines = [];
+    export let popoverImage: { src: { dark: string; light: string }; alt: string } | null = null;
+</script>
+
+<div class="u-flex-vertical u-gap-16">
+    {#each lines as line}
+        <p>{@html line}</p>
+    {/each}
+
+    {#if popoverImage}
+        <ImagePreview
+            darkSrc={popoverImage.src.dark}
+            lightSrc={popoverImage.src.light}
+            alt={popoverImage.alt} />
+    {/if}
+</div>
+
+<style>
+    div > p {
+        color: hsl(var(--color-neutral-50));
+
+        &:first-child {
+            color: hsl(var(--color-neutral-70));
+        }
+    }
+
+    :global(.theme-dark) div > p {
+        color: hsl(var(--color-neutral-20));
+
+        &:first-child {
+            color: hsl(var(--color-neutral-10));
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
index 2262f62ac1..e6e4f4a559 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
@@ -2,11 +2,158 @@
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
     import UpdateName from './updateName.svelte';
+    import UpdateSettings from './updateSettings.svelte';
     import UpdateStatus from './updateStatus.svelte';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { MessagingProviderType } from '@appwrite.io/console';
+    import { Providers } from '../../provider.svelte';
+    import { providers } from '../store';
+    import { provider as providerData } from './store';
+
+    let providerType: MessagingProviderType;
+    if (isValueOfStringEnum(MessagingProviderType, $providerData.type)) {
+        providerType = $providerData.type;
+    }
+
+    let provider: Providers;
+    if (isValueOfStringEnum(Providers, $providerData.provider)) {
+        provider = $providerData.provider;
+    }
+
+    let params: object = {};
+
+    $: switch (provider) {
+        case Providers.Twilio:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                accountSid: $providerData.credentials['accountSid'],
+                authToken: $providerData.credentials['authToken'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Msg91:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                from: $providerData.options['from'],
+                senderId: $providerData.credentials['senderId'],
+                authKey: $providerData.credentials['authKey']
+            };
+            break;
+        case Providers.Telesign:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                username: $providerData.credentials['username'],
+                password: $providerData.credentials['password'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Textmagic:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                username: $providerData.credentials['username'],
+                apiKey: $providerData.credentials['apiKey'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Vonage:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                apiKey: $providerData.credentials['apiKey'],
+                apiSecret: $providerData.credentials['apiSecret'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Mailgun:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                isEuRegion: false,
+                fromEmail: $providerData.options['fromEmail'],
+                fromName: $providerData.options['fromName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                replyToName: $providerData.options['replyToName'],
+                apiKey: $providerData.credentials['apiKey'],
+                domain: $providerData.credentials['domain']
+            };
+            break;
+        case Providers.Sendgrid:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                apiKey: $providerData.credentials['apiKey'],
+                fromEmail: $providerData.options['fromEmail'],
+                fromName: $providerData.options['fromName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                replyToName: $providerData.options['replyToName']
+            };
+            break;
+        case Providers.SMTP:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                host: $providerData.credentials['host'],
+                port: $providerData.credentials['port'],
+                username: $providerData.credentials['username'],
+                password: $providerData.credentials['password'],
+                fromName: $providerData.options['fromName'],
+                fromEmail: $providerData.options['fromEmail'],
+                replyToName: $providerData.options['replyToName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                encryption: $providerData.options['encryption'],
+                autoTLS: $providerData.options['autoTLS'],
+                mailer: $providerData.options['mailer']
+            };
+            break;
+        case Providers.FCM:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled
+            };
+            if ('serviceAccountJSON' in $providerData.credentials) {
+                const serviceAccountJSON = $providerData.credentials['serviceAccountJSON'];
+                if (typeof serviceAccountJSON === 'string') {
+                    params['serviceAccountJSON'] = serviceAccountJSON;
+                } else if (serviceAccountJSON instanceof Object) {
+                    params['serviceAccountJSON'] = JSON.stringify(serviceAccountJSON);
+                }
+            }
+            break;
+        case Providers.APNS:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                authKey: $providerData.credentials['authKey'],
+                authKeyId: $providerData.credentials['authKeyId'],
+                teamId: $providerData.credentials['teamId'],
+                bundleId: $providerData.credentials['bundleId']
+            };
+            break;
+    }
 </script>
 
 <Container>
     <UpdateStatus />
     <UpdateName />
+    <UpdateSettings
+        inputs={providers[providerType].providers[provider].configure}
+        providerId={$providerData.$id}
+        {providerType}
+        {provider}
+        {params} />
     <DangerZone />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts
index 441524d170..d4211320e9 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts
@@ -2,8 +2,4 @@ import { derived } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 
-export const provider = derived(
-    page,
-    // TODO: Set actual type
-    ($page) => $page.data.provider as Models.Provider
-);
+export const provider = derived(page, ($page) => $page.data.provider as Models.Provider);
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
new file mode 100644
index 0000000000..0b186d168a
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { ProviderInput } from '../store';
+    import { Providers, getProviderDisplayNameAndIcon } from '../../provider.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import SettingsFormList from '../settingsFormList.svelte';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
+
+    export let inputs: ProviderInput[];
+    export let providerType: MessagingProviderType;
+    export let provider: Providers;
+    export let providerId: string;
+    export let params: object;
+
+    let formValues: object = {};
+    let originalfiles: Record<string, FileList> = {};
+    let files: Record<string, FileList> = {};
+    let updated = false;
+    let newMemberModal = false;
+    let message = '';
+
+    const { displayName } = getProviderDisplayNameAndIcon(provider);
+
+    switch (providerType) {
+        case MessagingProviderType.Push:
+            message = 'notifications';
+            break;
+        case MessagingProviderType.Sms:
+            message = 'SMS';
+            break;
+        case MessagingProviderType.Email:
+            message = 'emails';
+            break;
+    }
+
+    onMount(() => {
+        for (const input of inputs) {
+            const value = params[input.name];
+            formValues[input.name] = value;
+            if (input.type === 'file' && typeof value == 'string' && value.length > 0) {
+                const dataTransfer = new DataTransfer();
+                const f = new File([value], `${input.name}.${input.allowedFileExtensions}`);
+                dataTransfer.items.add(f);
+                files[input.name] = dataTransfer.files;
+                originalfiles[input.name] = dataTransfer.files;
+            }
+        }
+    });
+
+    async function update() {
+        try {
+            const promises = [];
+            for (const [key, value] of Object.entries(files)) {
+                const promise = value[0].text().then((text) => {
+                    formValues[key] = text;
+                });
+                promises.push(promise);
+            }
+            await Promise.all(promises);
+            let response: Models.Provider;
+            switch (provider) {
+                case Providers.Twilio:
+                    response = await sdk.forProject.messaging.updateTwilioProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['accountSid'],
+                        formValues['authToken'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Msg91:
+                    response = await sdk.forProject.messaging.updateMsg91Provider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['senderId'],
+                        formValues['authKey'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Telesign:
+                    response = await sdk.forProject.messaging.updateTelesignProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['username'],
+                        formValues['password'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Textmagic:
+                    response = await sdk.forProject.messaging.updateTextmagicProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['username'],
+                        formValues['apiKey'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Vonage:
+                    response = await sdk.forProject.messaging.updateVonageProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['apiSecret'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Mailgun:
+                    response = await sdk.forProject.messaging.updateMailgunProvider(
+                        providerId,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['domain'],
+                        formValues['isEuRegion'],
+                        undefined,
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined
+                    );
+                    break;
+                case Providers.Sendgrid:
+                    response = await sdk.forProject.messaging.updateSendgridProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined
+                    );
+                    break;
+                case Providers.SMTP:
+                    response = await sdk.forProject.messaging.updateSmtpProvider(
+                        providerId,
+                        undefined,
+                        formValues['host'],
+                        formValues['port'] || undefined,
+                        formValues['username'] || undefined,
+                        formValues['password'] || undefined,
+                        formValues['encryption'],
+                        formValues['autoTLS'],
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined,
+                        undefined
+                    );
+                    break;
+                case Providers.FCM:
+                    response = await sdk.forProject.messaging.updateFcmProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        JSON.parse(formValues['serviceAccountJSON'])
+                    );
+                    break;
+                case Providers.APNS:
+                    response = await sdk.forProject.messaging.updateApnsProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['authKey'],
+                        formValues['authKeyId'],
+                        formValues['teamId'],
+                        formValues['bundleId']
+                    );
+                    break;
+            }
+            originalfiles = files;
+            await invalidate(Dependencies.MESSAGING_PROVIDER);
+            addNotification({
+                type: 'success',
+                message: `${response.name} has been updated`
+            });
+            trackEvent(Submit.MessagingProviderUpdate, {
+                provider: provider
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingProviderUpdate);
+        }
+    }
+
+    $: updated =
+        inputs
+            .filter((input) => input.type !== 'file')
+            .some((input) => formValues[input.name] !== params[input.name]) ||
+        Object.keys(files).some((key) => files[key] !== originalfiles[key]);
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid>
+        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
+            <Heading tag="h6" size="7">Settings</Heading>
+        </div>
+        <p>
+            Configure the settings to <Button
+                link
+                href={`https://appwrite.io/docs/products/messaging/providers/${provider}`}
+                external>enable {displayName}</Button> to send {message}, or <Button
+                link
+                on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the
+            provider settings.
+        </p>
+        <svelte:fragment slot="aside">
+            <SettingsFormList bind:files {inputs} bind:params={formValues} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <div class="u-flex u-flex-wrap u-gap-12">
+                <Button disabled={!updated} submit>Update</Button>
+            </div>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<CreateMember bind:showCreate={newMemberModal} />
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
index 03f9d6cc11..6e62a27fce 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
@@ -5,168 +5,24 @@
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
-    import { MessagingProviderType } from '@appwrite.io/console';
     import Provider, { Providers } from '../../provider.svelte';
     import ProviderType from '../../providerType.svelte';
-    import Update from '../update.svelte';
-    import { providerParams, providerType, provider as wizardProvider } from '../wizard/store';
-    import { provider } from './store';
+    import { provider as providerData } from './store';
 
     let enabled: boolean = null;
 
     onMount(() => {
-        enabled ??= $provider.enabled;
+        enabled ??= $providerData.enabled;
     });
 
-    function configure() {
-        if (!isValueOfStringEnum(MessagingProviderType, $provider.type)) {
-            throw new Error(`Invalid provider type: ${$provider.type}`);
-        }
-
-        if (!isValueOfStringEnum(Providers, $provider.provider)) {
-            throw new Error(`Invalid provider: ${$provider.provider}`);
-        }
-        $providerType = $provider.type;
-        $wizardProvider = $provider.provider;
-
-        switch ($wizardProvider) {
-            case Providers.Twilio:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    accountSid: $provider.credentials['accountSid'],
-                    authToken: $provider.credentials['authToken'],
-                    from: $provider.options['from']
-                };
-                break;
-            case Providers.Msg91:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    from: $provider.options['from'],
-                    senderId: $provider.credentials['senderId'],
-                    authKey: $provider.credentials['authKey']
-                };
-                break;
-            case Providers.Telesign:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    username: $provider.credentials['username'],
-                    password: $provider.credentials['password'],
-                    from: $provider.options['from']
-                };
-                break;
-            case Providers.Textmagic:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    username: $provider.credentials['username'],
-                    apiKey: $provider.credentials['apiKey'],
-                    from: $provider.options['from']
-                };
-                break;
-            case Providers.Vonage:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    apiKey: $provider.credentials['apiKey'],
-                    apiSecret: $provider.credentials['apiSecret'],
-                    from: $provider.options['from']
-                };
-                break;
-            case Providers.Mailgun:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    isEuRegion: false,
-                    fromEmail: $provider.options['fromEmail'],
-                    fromName: $provider.options['fromName'],
-                    replyToEmail: $provider.options['replyToEmail'],
-                    replyToName: $provider.options['replyToName'],
-                    apiKey: $provider.credentials['apiKey'],
-                    domain: $provider.credentials['domain']
-                };
-                break;
-            case Providers.Sendgrid:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    apiKey: $provider.credentials['apiKey'],
-                    fromEmail: $provider.options['fromEmail'],
-                    fromName: $provider.options['fromName'],
-                    replyToEmail: $provider.options['replyToEmail'],
-                    replyToName: $provider.options['replyToName']
-                };
-                break;
-            case Providers.SMTP:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    host: $provider.credentials['host'],
-                    port: $provider.credentials['port'],
-                    username: $provider.credentials['username'],
-                    password: $provider.credentials['password'],
-                    fromName: $provider.options['fromName'],
-                    fromEmail: $provider.options['fromEmail'],
-                    replyToName: $provider.options['replyToName'],
-                    replyToEmail: $provider.options['replyToEmail'],
-                    encryption: $provider.options['encryption'],
-                    autoTLS: $provider.options['autoTLS'],
-                    mailer: $provider.options['mailer']
-                };
-                break;
-            case Providers.FCM:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled
-                };
-                if ('serviceAccountJSON' in $provider.credentials) {
-                    const serviceAccountJSON = $provider.credentials['serviceAccountJSON'];
-                    if (typeof serviceAccountJSON === 'string') {
-                        $providerParams[$wizardProvider].serviceAccountJSON = serviceAccountJSON;
-                    } else if (serviceAccountJSON instanceof Object) {
-                        $providerParams[$wizardProvider].serviceAccountJSON =
-                            JSON.stringify(serviceAccountJSON);
-                    }
-                }
-                break;
-            case Providers.APNS:
-                $providerParams[$wizardProvider] = {
-                    providerId: $provider.$id,
-                    name: $provider.name,
-                    enabled: $provider.enabled,
-                    authKey: $provider.credentials['authKey'],
-                    authKeyId: $provider.credentials['authKeyId'],
-                    teamId: $provider.credentials['teamId'],
-                    bundleId: $provider.credentials['bundleId'],
-                    sandbox: $provider.options['sandbox']
-                };
-                break;
-        }
-
-        wizard.start(Update);
-    }
-
     async function updateStatus() {
         try {
             let response = { $id: '', name: '' };
-            const providerId = $provider.$id;
-            switch ($provider.provider) {
+            const providerId = $providerData.$id;
+            switch ($providerData.provider) {
                 case Providers.Twilio:
                     response = await sdk.forProject.messaging.updateTwilioProvider(
                         providerId,
@@ -258,7 +114,7 @@
                 message: `${response.name} has been ${enabled ? 'enabled' : 'disabled'}`
             });
             trackEvent(Submit.MessagingProviderUpdate, {
-                provider: $provider
+                provider: $providerData
             });
         } catch (error) {
             addNotification({
@@ -272,8 +128,8 @@
 
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-        <Provider provider={$provider.provider} size="l">
-            <Heading tag="h6" size="7">{$provider.name}</Heading>
+        <Provider provider={$providerData.provider} size="l">
+            <Heading tag="h6" size="7">{$providerData.name}</Heading>
         </Provider>
     </div>
     <svelte:fragment slot="aside">
@@ -285,17 +141,16 @@
                         label={enabled ? 'Enabled' : 'Disabled'}
                         bind:value={enabled} />
                 </ul>
-                <p class="title">Provider: <Provider noIcon provider={$provider.provider} /></p>
-                <p class="title">Channel: <ProviderType noIcon type={$provider.type} /></p>
-                <p>Created: {toLocaleDateTime($provider.$createdAt)}</p>
+                <p class="title">Provider: <Provider noIcon provider={$providerData.provider} /></p>
+                <p class="title">Channel: <ProviderType noIcon type={$providerData.type} /></p>
+                <p>Created: {toLocaleDateTime($providerData.$createdAt)}</p>
             </div>
         </div>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
         <div class="u-flex u-flex-wrap u-gap-12">
-            <Button secondary on:click={() => configure()}>Configure</Button>
-            <Button disabled={$provider.enabled === enabled} on:click={() => updateStatus()}
+            <Button disabled={$providerData.enabled === enabled} on:click={() => updateStatus()}
                 >Update</Button>
         </div>
     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
new file mode 100644
index 0000000000..470a3beb1a
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import {
+        FormList,
+        InputDomain,
+        InputEmail,
+        InputFile,
+        InputSelect,
+        InputPhone,
+        InputSwitch,
+        InputText,
+        InputPassword
+    } from '$lib/elements/forms';
+    import PopoverContent from './popoverContent.svelte';
+    import type {
+        ProviderInput,
+        TwilioProviderParams,
+        Msg91ProviderParams,
+        TelesignProviderParams,
+        TextmagicProviderParams,
+        VonageProviderParams,
+        MailgunProviderParams,
+        SendgridProviderParams,
+        SMTPProviderParams,
+        FCMProviderParams,
+        APNSProviderParams
+    } from './store';
+
+    export let files: Record<string, FileList>;
+    export let inputs: ProviderInput[];
+    export let params: Partial<
+        | TwilioProviderParams
+        | Msg91ProviderParams
+        | TelesignProviderParams
+        | TextmagicProviderParams
+        | VonageProviderParams
+        | MailgunProviderParams
+        | SendgridProviderParams
+        | SMTPProviderParams
+        | FCMProviderParams
+        | APNSProviderParams
+    >;
+</script>
+
+<FormList>
+    {#each inputs as input}
+        {@const popoverImage = input.popoverImage}
+        {#if input.type === 'text'}
+            <InputText
+                id={input.name}
+                label={input.label}
+                placeholder={input.placeholder}
+                required={!input.optional}
+                isPopoverDefined={input.popover !== undefined}
+                bind:value={params[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputText>
+        {:else if input.type === 'password'}
+            <InputPassword
+                id={input.name}
+                label={input.label}
+                placeholder={input.placeholder}
+                required={!input.optional}
+                showPasswordButton
+                isPopoverDefined={input.popover !== undefined}
+                bind:value={params[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputPassword>
+        {:else if input.type === 'email'}
+            <InputEmail
+                id={input.name}
+                label={input.label}
+                placeholder={input.placeholder}
+                required={!input.optional}
+                isPopoverDefined={input.popover !== undefined}
+                bind:value={params[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputEmail>
+        {:else if input.type === 'domain'}
+            <InputDomain
+                id={input.name}
+                label={input.label}
+                placeholder={input.placeholder}
+                required={!input.optional}
+                isPopoverDefined={input.popover !== undefined}
+                bind:value={params[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputDomain>
+        {:else if input.type === 'phone'}
+            <InputPhone
+                id={input.name}
+                label={input.label}
+                placeholder={input.placeholder}
+                required={!input.optional}
+                isPopoverDefined={input.popover !== undefined}
+                bind:value={params[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputPhone>
+        {:else if input.type === 'file'}
+            <InputFile
+                label={input.label}
+                allowedFileExtensions={input.allowedFileExtensions}
+                required={!input.optional}
+                isPopoverDefined={input.popover !== undefined}
+                bind:files={files[input.name]}>
+                <svelte:fragment slot="popover">
+                    <PopoverContent lines={input.popover} {popoverImage} />
+                </svelte:fragment>
+            </InputFile>
+        {:else if input.type === 'switch'}
+            <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
+                <svelte:fragment slot="description">
+                    {input.description}
+                </svelte:fragment>
+            </InputSwitch>
+        {:else if input.type === 'select'}
+            <InputSelect
+                label={input.label}
+                id={input.name}
+                options={input.options}
+                required={!input.optional}
+                bind:value={params[input.name]} />
+        {/if}
+    {/each}
+</FormList>
diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index f828e6f857..9d5a46c7d6 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -11,6 +11,19 @@ export const columns = writable<Column[]>([
     { id: 'enabled', title: 'Status', type: 'boolean', show: true }
 ]);
 
+export type ProviderInput = {
+    label: string;
+    name: string;
+    type: 'text' | 'password' | 'phone' | 'email' | 'domain' | 'file' | 'switch' | 'select';
+    placeholder?: string;
+    description?: string;
+    popover?: string[];
+    popoverImage?: { src: { light: string; dark: string }; alt: string };
+    allowedFileExtensions?: string[];
+    optional?: boolean;
+    options?: { label: string; value: string | number | boolean }[];
+};
+
 type ProvidersMap = {
     [key in MessagingProviderType]: {
         name: string;
@@ -23,26 +36,7 @@ type ProvidersMap = {
                 title: string;
                 description: string;
                 needAHand?: string[];
-                configure: {
-                    label: string;
-                    name: string;
-                    type:
-                        | 'text'
-                        | 'password'
-                        | 'phone'
-                        | 'email'
-                        | 'domain'
-                        | 'file'
-                        | 'switch'
-                        | 'select';
-                    placeholder?: string;
-                    description?: string;
-                    popover?: string[];
-                    popoverImage?: { src: { light: string; dark: string }; alt: string };
-                    allowedFileExtensions?: string[];
-                    optional?: boolean;
-                    options?: { label: string; value: string | number | boolean }[];
-                }[];
+                configure: ProviderInput[];
             };
         };
     };
@@ -548,3 +542,96 @@ export const providers: ProvidersMap = {
         }
     }
 };
+
+type ProviderParams = {
+    providerId: string;
+    name: string;
+    enabled: boolean;
+};
+
+/**
+ * SMS providers
+ */
+export type TwilioProviderParams = ProviderParams & {
+    accountSid: string;
+    authToken: string;
+    from: string;
+};
+
+export type Msg91ProviderParams = ProviderParams & {
+    from: string;
+    senderId: string;
+    authKey: string;
+};
+
+export type TelesignProviderParams = ProviderParams & {
+    from: string;
+    username: string;
+    password: string;
+};
+
+export type TextmagicProviderParams = ProviderParams & {
+    from: string;
+    username: string;
+    apiKey: string;
+};
+
+export type VonageProviderParams = ProviderParams & {
+    from: string;
+    apiKey: string;
+    apiSecret: string;
+};
+
+/**
+ * Email providers
+ */
+export type MailgunProviderParams = ProviderParams & {
+    fromEmail: string;
+    fromName: string;
+    replyToEmail: string;
+    replyToName: string;
+    isEuRegion: boolean;
+    apiKey: string;
+    domain: string;
+};
+
+export type SendgridProviderParams = ProviderParams & {
+    fromEmail: string;
+    fromName: string;
+    replyToEmail: string;
+    replyToName: string;
+    apiKey: string;
+};
+
+export type SMTPProviderParams = ProviderParams & {
+    fromEmail: string;
+    fromName: string;
+    replyToEmail: string;
+    replyToName: string;
+    host: string;
+    port: number;
+    username: string;
+    password: string;
+    encryption: SmtpEncryption;
+    autoTLS: boolean;
+    mailer: string;
+};
+
+/**
+ * Push providers
+ */
+export type FCMProviderParams = ProviderParams & {
+    serviceAccountJSON: string;
+};
+
+export type APNSProviderParams = ProviderParams & {
+    authKey: string;
+    authKeyId: string;
+    teamId: string;
+    bundleId: string;
+    sandbox: boolean;
+};
+
+export type MQTTProviderParams = ProviderParams & {
+    serverKey: string;
+};
diff --git a/src/routes/console/project-[project]/messaging/providers/update.svelte b/src/routes/console/project-[project]/messaging/providers/update.svelte
deleted file mode 100644
index 4ec2896b4a..0000000000
--- a/src/routes/console/project-[project]/messaging/providers/update.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import Configure from './wizard/configure.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { project } from '../../store';
-    import { wizard } from '$lib/stores/wizard';
-    import { provider, providerParams } from './wizard/store';
-    import { Providers } from '../provider.svelte';
-    import { Dependencies } from '$lib/constants';
-    import type { Models } from '@appwrite.io/console';
-
-    async function update() {
-        try {
-            let response: Models.Provider;
-            const providerId = $providerParams[$provider].providerId;
-            switch ($provider) {
-                case Providers.Twilio:
-                    response = await sdk.forProject.messaging.updateTwilioProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].accountSid,
-                        $providerParams[$provider].authToken,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Msg91:
-                    response = await sdk.forProject.messaging.updateMsg91Provider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].senderId,
-                        $providerParams[$provider].authKey,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Telesign:
-                    response = await sdk.forProject.messaging.updateTelesignProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].username,
-                        $providerParams[$provider].password,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Textmagic:
-                    response = await sdk.forProject.messaging.updateTextmagicProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].username,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Vonage:
-                    response = await sdk.forProject.messaging.updateVonageProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].apiSecret,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Mailgun:
-                    response = await sdk.forProject.messaging.updateMailgunProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].domain,
-                        $providerParams[$provider].isEuRegion,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined
-                    );
-                    break;
-                case Providers.Sendgrid:
-                    response = await sdk.forProject.messaging.updateSendgridProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined
-                    );
-                    break;
-                case Providers.SMTP:
-                    response = await sdk.forProject.messaging.updateSmtpProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].host,
-                        $providerParams[$provider].port || undefined,
-                        $providerParams[$provider].username || undefined,
-                        $providerParams[$provider].password || undefined,
-                        $providerParams[$provider].encryption,
-                        $providerParams[$provider].autoTLS,
-                        $providerParams[$provider].mailer || undefined,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined,
-                        $providerParams[$provider].enabled
-                    );
-                    break;
-                case Providers.FCM:
-                    response = await sdk.forProject.messaging.updateFcmProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        JSON.parse($providerParams[$provider].serviceAccountJSON)
-                    );
-                    break;
-                case Providers.APNS:
-                    response = await sdk.forProject.messaging.updateApnsProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].authKey,
-                        $providerParams[$provider].authKeyId,
-                        $providerParams[$provider].teamId,
-                        $providerParams[$provider].bundleId,
-                        $providerParams[$provider].sandbox
-                    );
-                    break;
-            }
-            await invalidate(Dependencies.MESSAGING_PROVIDER);
-            wizard.hide();
-            addNotification({
-                type: 'success',
-                message: `${response.name} has been updated`
-            });
-            trackEvent(Submit.MessagingProviderUpdate, {
-                provider: $provider
-            });
-            await goto(
-                `${base}/console/project-${$project.$id}/messaging/providers/provider-${response.$id}`
-            );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingProviderUpdate);
-        }
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Configure',
-        component: Configure
-    });
-</script>
-
-<Wizard title="Update provider" steps={stepsComponents} on:finish={update} finalAction="Update" />
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
index d5e4949912..ec43fac469 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
@@ -13,8 +13,6 @@
     let id: string = null;
 
     async function beforeSubmit() {
-        console.log($provider);
-
         switch ($provider) {
             case Providers.Twilio:
                 $providerParams[$provider] = {
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
similarity index 54%
rename from src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
rename to src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
index ec119c419a..57908ad4b1 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
@@ -1,20 +1,9 @@
 <script lang="ts">
-    import {
-        FormList,
-        InputDomain,
-        InputEmail,
-        InputFile,
-        InputSelect,
-        InputSwitch,
-        InputText,
-        InputPassword
-    } from '$lib/elements/forms';
-    import InputPhone from '$lib/elements/forms/inputPhone.svelte';
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
     import { providers } from '../store';
     import { providerType, provider, providerParams } from './store';
-    import { ImagePreview } from '$lib/components';
+    import SettingsFormList from '../settingsFormList.svelte';
     import { newMemberModal } from '$lib/stores/organization';
     import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
     import Provider from '../../provider.svelte';
@@ -58,130 +47,14 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Configure</svelte:fragment>
+    <svelte:fragment slot="title">Settings</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Set up the credentials below to enable {providers[$providerType].providers[$provider].title}
         for sending
         {providers[$providerType].text}.
     </svelte:fragment>
-    <FormList>
-        {#each inputs as input}
-            {@const popoverImage = input.popoverImage}
-            {#if input.type === 'text'}
-                <InputText
-                    id={input.name}
-                    label={input.label}
-                    placeholder={input.placeholder}
-                    required={!input.optional}
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="popover">
-                        {@html input.popover?.join('<br/><br/>')}
-                        {#if popoverImage}
-                            <br />
-                            <br />
-                            <ImagePreview
-                                darkSrc={popoverImage.src.dark}
-                                lightSrc={popoverImage.src.light}
-                                alt={popoverImage.alt} />
-                        {/if}
-                    </svelte:fragment>
-                </InputText>
-            {:else if input.type === 'password'}
-                <InputPassword
-                    id={input.name}
-                    label={input.label}
-                    placeholder={input.placeholder}
-                    required={!input.optional}
-                    showPasswordButton
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="popover">
-                        {@html input.popover?.join('<br/><br/>')}
-                    </svelte:fragment>
-                </InputPassword>
-            {:else if input.type === 'email'}
-                <InputEmail
-                    id={input.name}
-                    label={input.label}
-                    placeholder={input.placeholder}
-                    required={!input.optional}
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="popover">
-                        <p class="body-text-2 u-margin-block-end-16">
-                            {@html input.popover?.join('<br/><br/>')}
-                        </p>
-                    </svelte:fragment>
-                </InputEmail>
-            {:else if input.type === 'domain'}
-                <InputDomain
-                    id={input.name}
-                    label={input.label}
-                    placeholder={input.placeholder}
-                    required={!input.optional}
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="popover">
-                        <p class="body-text-2 u-margin-block-end-16">
-                            {@html input.popover?.join('<br/><br/>')}
-                        </p>
-                    </svelte:fragment>
-                </InputDomain>
-            {:else if input.type === 'phone'}
-                <InputPhone
-                    id={input.name}
-                    label={input.label}
-                    placeholder={input.placeholder}
-                    required={!input.optional}
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="popover">
-                        <p class="body-text-2 u-margin-block-end-16">
-                            {@html input.popover?.join('<br/><br/>')}
-                        </p>
-                    </svelte:fragment>
-                </InputPhone>
-            {:else if input.type === 'file'}
-                <InputFile
-                    label={input.label}
-                    allowedFileExtensions={input.allowedFileExtensions}
-                    required={!input.optional}
-                    isPopoverDefined={input.popover !== undefined}
-                    bind:files={files[input.name]}>
-                    <svelte:fragment slot="popover">
-                        <p class="body-text-2 u-margin-block-end-16">
-                            {@html input.popover?.join('<br/><br/>')}
-                            {#if popoverImage}
-                                <br />
-                                <br />
-                                <ImagePreview
-                                    darkSrc={popoverImage.src.dark}
-                                    lightSrc={popoverImage.src.light}
-                                    alt={popoverImage.alt} />
-                            {/if}
-                        </p>
-                    </svelte:fragment>
-                </InputFile>
-            {:else if input.type === 'switch'}
-                <InputSwitch
-                    label={input.label}
-                    id={input.name}
-                    bind:value={$providerParams[$provider][input.name]}>
-                    <svelte:fragment slot="description">
-                        {input.description}
-                    </svelte:fragment>
-                </InputSwitch>
-            {:else if input.type === 'select'}
-                <InputSelect
-                    label={input.label}
-                    id={input.name}
-                    options={input.options}
-                    required={!input.optional}
-                    bind:value={$providerParams[$provider][input.name]} />
-            {/if}
-        {/each}
-    </FormList>
+
+    <SettingsFormList bind:files {inputs} bind:params={$providerParams[$provider]} />
 
     <div class="need-a-hand u-flex-vertical u-gap-8">
         <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/store.ts b/src/routes/console/project-[project]/messaging/providers/wizard/store.ts
index 4ea4d8c4d2..41741b3ceb 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/store.ts
@@ -1,102 +1,18 @@
+import type { MessagingProviderType } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
 import type { Providers } from '../../provider.svelte';
-import type { MessagingProviderType, SmtpEncryption } from '@appwrite.io/console';
-
-type ProviderParams = {
-    providerId: string;
-    name: string;
-    enabled: boolean;
-};
-
-/**
- * SMS providers
- */
-
-export type TwilioProviderParams = ProviderParams & {
-    accountSid: string;
-    authToken: string;
-    from: string;
-};
-
-export type Msg91ProviderParams = ProviderParams & {
-    from: string;
-    senderId: string;
-    authKey: string;
-};
-
-export type TelesignProviderParams = ProviderParams & {
-    from: string;
-    username: string;
-    password: string;
-};
-
-export type TextmagicProviderParams = ProviderParams & {
-    from: string;
-    username: string;
-    apiKey: string;
-};
-
-export type VonageProviderParams = ProviderParams & {
-    from: string;
-    apiKey: string;
-    apiSecret: string;
-};
-
-/**
- * Email providers
- */
-
-export type MailgunProviderParams = ProviderParams & {
-    fromEmail: string;
-    fromName: string;
-    replyToEmail: string;
-    replyToName: string;
-    isEuRegion: boolean;
-    apiKey: string;
-    domain: string;
-};
-
-export type SendgridProviderParams = ProviderParams & {
-    fromEmail: string;
-    fromName: string;
-    replyToEmail: string;
-    replyToName: string;
-    apiKey: string;
-};
-
-export type SMTPProviderParams = ProviderParams & {
-    fromEmail: string;
-    fromName: string;
-    replyToEmail: string;
-    replyToName: string;
-    host: string;
-    port: number;
-    username: string;
-    password: string;
-    encryption: SmtpEncryption;
-    autoTLS: boolean;
-    mailer: string;
-};
-
-/**
- * Push providers
- */
-
-export type FCMProviderParams = ProviderParams & {
-    serviceAccountJSON: string;
-};
-
-export type APNSProviderParams = ProviderParams & {
-    authKey: string;
-    authKeyId: string;
-    teamId: string;
-    bundleId: string;
-    sandbox: boolean;
-};
-
-export type MQTTProviderParams = ProviderParams & {
-    serverKey: string;
-};
+import type {
+    APNSProviderParams,
+    FCMProviderParams,
+    MailgunProviderParams,
+    Msg91ProviderParams,
+    SMTPProviderParams,
+    SendgridProviderParams,
+    TelesignProviderParams,
+    TextmagicProviderParams,
+    TwilioProviderParams,
+    VonageProviderParams
+} from '../store';
 
 export const providerType = writable<MessagingProviderType>(null);
 export const provider = writable<Providers>(null);