diff --git a/package-lock.json b/package-lock.json
index c0272c726..74d4a1f5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/appwrite-console": "^6.0.0",
+                "@aw-labs/appwrite-console": "^10.0.0",
                 "@aw-labs/icons": "0.0.0-66",
                 "@aw-labs/ui": "0.0.0-66",
                 "@popperjs/core": "^2.11.6",
@@ -71,9 +71,9 @@
             }
         },
         "node_modules/@aw-labs/appwrite-console": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
-            "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
+            "integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -7782,9 +7782,9 @@
             }
         },
         "@aw-labs/appwrite-console": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
-            "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
+            "integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index ec0f46155..9a2617532 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/appwrite-console": "^6.0.0",
+        "@aw-labs/appwrite-console": "^10.0.0",
         "@aw-labs/icons": "0.0.0-66",
         "@aw-labs/ui": "0.0.0-66",
         "@popperjs/core": "^2.11.6",
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 1204ec24c..4b124012c 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { Alert } from '$lib/components';
 
     export let show = false;
@@ -13,6 +13,10 @@
 
     const dispatch = createEventDispatcher();
 
+    onMount(() => {
+        if (show) openModal();
+    });
+
     function handleBLur(event: MouseEvent) {
         if (event.target === dialog) {
             closeModal();
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 7b3f87d5f..64b254b00 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -7,12 +7,8 @@ import Okta from '../../routes/console/project-[project]/authentication/_oktaOAu
 import Auth0 from '../../routes/console/project-[project]/authentication/_auth0OAuth.svelte';
 import Main from '../../routes/console/project-[project]/authentication/_mainOAuth.svelte';
 
-export type Provider = {
-    name: string;
+export type Provider = Models.Provider & {
     icon: string;
-    active: boolean;
-    id: string | null;
-    secret: string | null;
     docs?: string;
     component?: typeof SvelteComponent;
 };
@@ -22,279 +18,122 @@ export type Providers = {
 };
 
 const setProviders = (project: Models.Project): Provider[] => {
-    return [
-        {
-            name: 'Amazon',
-            icon: 'amazon',
-            active: false,
-            id: project?.providerAmazonAppid,
-            secret: project?.providerAmazonSecret,
-            docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
-            component: Main
-        },
-        {
-            name: 'Apple',
-            icon: 'apple',
-            active: false,
-            id: project?.providerAppleAppid,
-            secret: project?.providerAppleSecret,
-            docs: 'https://developer.apple.com/',
-            component: Apple
-        },
-        {
-            name: 'Auth0',
-            icon: 'auth0',
-            active: false,
-            id: project?.providerAuth0Appid,
-            secret: project?.providerAuth0Secret,
-            docs: 'https://auth0.com/developers',
-            component: Auth0
-        },
-        {
-            name: 'Bitbucket',
-            icon: 'bitBucket',
-            active: false,
-            id: project?.providerBitbucketAppid,
-            secret: project?.providerBitbucketSecret,
-            docs: 'https://developer.atlassian.com/bitbucket',
-            component: Main
-        },
-        {
-            name: 'Bitly',
-            icon: 'bitly',
-            active: false,
-            id: project?.providerBitlyAppid,
-            secret: project?.providerBitlySecret,
-            docs: 'https://dev.bitly.com/v4_documentation.html',
-            component: Main
-        },
-        {
-            name: 'Box',
-            icon: 'box',
-            active: false,
-            id: project?.providerBoxAppid,
-            secret: project?.providerBoxSecret,
-            docs: 'https://developer.box.com/reference/',
-            component: Main
-        },
-        {
-            name: 'Discord',
-            icon: 'discord',
-            active: false,
-            id: project?.providerDiscordAppid,
-            secret: project?.providerDiscordSecret,
-            docs: 'https://discordapp.com/developers/docs/topics/oauth2',
-            component: Main
-        },
-        {
-            name: 'Dropbox',
-            icon: 'dropbox',
-            active: false,
-            id: project?.providerDropboxAppid,
-            secret: project?.providerDropboxSecret,
-            docs: 'https://www.dropbox.com/developers/documentation',
-            component: Main
-        },
-        {
-            name: 'Facebook',
-            icon: 'facebook',
-            active: false,
-            id: project?.providerFacebookAppid,
-            secret: project?.providerFacebookSecret,
-            docs: 'https://developers.facebook.com/',
-            component: Main
-        },
-        {
-            name: 'Github',
-            icon: 'github',
-            active: false,
-            id: project?.providerGithubAppid,
-            secret: project?.providerGithubSecret,
-            docs: 'https://developer.github.com/',
-            component: Main
-        },
-        {
-            name: 'Gitlab',
-            icon: 'gitlab',
-            active: false,
-            id: project?.providerGitlabAppid,
-            secret: project?.providerGitlabSecret,
-            docs: 'https://docs.gitlab.com/ee/api/',
-            component: Main
-        },
-        {
-            name: 'Google',
-            icon: 'google',
-            active: false,
-            id: project?.providerGoogleAppid,
-            secret: project?.providerGoogleSecret,
-            docs: 'https://support.google.com/googleapi/answer/6158849',
-            component: Main
-        },
-        {
-            name: 'Linkedin',
-            icon: 'linkedin',
-            active: false,
-            id: project?.providerLinkedinAppid,
-            secret: project?.providerLinkedinSecret,
-            docs: 'https://developer.linkedin.com/',
-            component: Main
-        },
-        {
-            name: 'Microsoft',
-            icon: 'microsoft',
-            active: false,
-            id: project?.providerMicrosoftAppid,
-            secret: project?.providerMicrosoftSecret,
-            docs: 'https://developer.microsoft.com/en-us/',
-            component: Microsoft
-        },
-        {
-            name: 'Notion',
-            icon: 'notion',
-            active: false,
-            id: project?.providerNotionAppid,
-            secret: project?.providerNotionSecret,
-            docs: 'https://developers.notion.com/docs',
-            component: Main
-        },
-        {
-            name: 'Okta',
-            icon: 'okta',
-            active: false,
-            id: project?.providerOktaAppid,
-            secret: project?.providerOktaSecret,
-            docs: 'https://developer.okta.com/',
-            component: Okta
-        },
-        {
-            name: 'Paypal',
-            icon: 'paypal',
-            active: false,
-            id: project?.providerPaypalAppid,
-            secret: project?.providerPaypalSecret,
-            docs: 'https://developer.paypal.com/docs/api/overview/',
-            component: Main
-        },
-        {
-            name: 'Paypal (sandbox)',
-            icon: 'paypal',
-            active: false,
-            id: project?.providerPaypalSandboxAppid,
-            secret: project?.providerPaypalSandboxSecret,
-            docs: 'https://developer.paypal.com/docs/api/overview/',
-            component: Main
-        },
-        {
-            name: 'Salesforce',
-            icon: 'salesforce',
-            active: false,
-            id: project?.providerSalesforceAppid,
-            secret: project?.providerSalesforceSecret,
-            docs: 'https://developer.salesforce.com/docs/',
-            component: Main
-        },
-        {
-            name: 'Slack',
-            icon: 'slack',
-            active: false,
-            id: project?.providerSlackAppid,
-            secret: project?.providerSlackSecret,
-            docs: 'https://api.slack.com/',
-            component: Main
-        },
-        {
-            name: 'Spotify',
-            icon: 'spotify',
-            active: false,
-            id: project?.providerSpotifyAppid,
-            secret: project?.providerSpotifySecret,
-            docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
-            component: Main
-        },
-        {
-            name: 'Stripe',
-            icon: 'stripe',
-            active: false,
-            id: project?.providerStripeAppid,
-            secret: project?.providerStripeSecret,
-            docs: 'https://stripe.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Tradeshift',
-            icon: 'tradeshift',
-            active: false,
-            id: project?.providerTradeshiftAppid,
-            secret: project?.providerTradeshiftSecret,
-            docs: 'https://developers.tradeshift.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Tradeshift(sandbox)',
-            icon: 'tradeshift',
-            active: false,
-            id: project?.providerTradeshiftBoxAppid,
-            secret: project?.providerTradeshiftBoxSecret,
-            docs: 'https://developers.tradeshift.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Twitch',
-            icon: 'twitch',
-            active: false,
-            id: project?.providerTwitchAppid,
-            secret: project?.providerTwitchSecret,
-            docs: 'https://dev.twitch.tv/docs/authentication',
-            component: Main
-        },
+    return (
+        project?.providers.map((n) => {
+            let docs: Provider['docs'];
+            let icon: Provider['icon'] = n.name.toLowerCase();
+            let component: Provider['component'] = Main;
 
-        {
-            name: 'Wordpress',
-            icon: 'wordpress',
-            active: false,
-            id: project?.providerWordpressAppid,
-            secret: project?.providerWordpressSecret,
-            docs: 'https://developer.wordpress.com/docs/oauth2/',
-            component: Main
-        },
-        {
-            name: 'Yahoo',
-            icon: 'yahoo',
-            active: false,
-            id: project?.providerYahooAppid,
-            secret: project?.providerYahooSecret,
-            docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
-            component: Main
-        },
-        {
-            name: 'Yammer',
-            icon: 'ms_yammer',
-            active: false,
-            id: project?.providerYammerAppid,
-            secret: project?.providerYammerSecret,
-            docs: 'https://developer.yammer.com/docs/oauth-2',
-            component: Main
-        },
-        {
-            name: 'Yandex',
-            icon: 'yandex',
-            active: false,
-            id: project?.providerYandexAppid,
-            secret: project?.providerYandexSecret,
-            docs: 'https://tech.yandex.com/oauth/',
-            component: Main
-        },
-        {
-            name: 'Zoom',
-            icon: 'zoom',
-            active: false,
-            id: project?.providerZoomAppid,
-            secret: project?.providerZoomSecret,
-            docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
-            component: Main
-        }
-    ];
+            switch (n.name.toLowerCase()) {
+                case 'amazon':
+                    docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
+                    break;
+                case 'apple':
+                    docs = 'https://developer.apple.com/';
+                    component = Apple;
+                    break;
+                case 'auth0':
+                    docs = 'https://auth0.com/developers';
+                    component = Auth0;
+                    break;
+                case 'bitbucket':
+                    docs = 'https://developer.atlassian.com/bitbucket';
+                    break;
+                case 'bitly':
+                    docs = 'https://dev.bitly.com/v4_documentation.html';
+                    break;
+                case 'box':
+                    docs = 'https://developer.box.com/reference/';
+                    break;
+                case 'discord':
+                    docs = 'https://discordapp.com/developers/docs/topics/oauth2';
+                    break;
+                case 'dropbox':
+                    docs = 'https://www.dropbox.com/developers/documentation';
+                    break;
+                case 'facebook':
+                    docs = 'https://developers.facebook.com/';
+                    break;
+                case 'github':
+                    docs = 'https://developer.github.com';
+                    break;
+                case 'gitlab':
+                    docs = 'https://docs.gitlab.com/ee/api/';
+                    break;
+                case 'google':
+                    docs = 'https://support.google.com/googleapi/answer/6158849';
+                    break;
+                case 'linkedin':
+                    docs = 'https://developer.linkedin.com/';
+                    break;
+                case 'microsoft':
+                    docs = 'https://developer.microsoft.com/en-us/';
+                    component = Microsoft;
+                    break;
+                case 'notion':
+                    docs = 'https://developers.notion.com/docs';
+                    break;
+                case 'okta':
+                    docs = 'https://developer.okta.com';
+                    component = Okta;
+                    break;
+                case 'paypal':
+                    docs = 'https://developer.paypal.com/docs/api/overview/';
+                    break;
+                case 'paypalsandbox':
+                    icon = 'paypal';
+                    docs = 'https://developer.paypal.com/docs/api/overview/';
+                    break;
+                case 'salesforce':
+                    docs = 'https://developer.salesforce.com/docs/';
+                    break;
+                case 'slack':
+                    docs = 'https://api.slack.com/';
+                    break;
+                case 'spotify':
+                    docs =
+                        'https://developer.spotify.com/documentation/general/guides/authorization-guide/';
+                    break;
+                case 'stripe':
+                    docs = 'https://stripe.com/docs/api';
+                    break;
+                case 'tradeshift':
+                    docs = 'https://developers.tradeshift.com/docs/api';
+                    break;
+                case 'tradeshiftbox':
+                    icon = 'tradeshift';
+                    docs = 'https://developers.tradeshift.com/docs/api';
+                    break;
+                case 'twitch':
+                    docs = 'https://dev.twitch.tv/docs/authentication';
+                    break;
+                case 'wordpress':
+                    docs = 'https://developer.wordpress.com/docs/oauth2/';
+                    break;
+                case 'yahoo':
+                    docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/';
+                    break;
+                case 'yammer':
+                    docs = 'https://developer.yammer.com/docs/oauth-2';
+                    break;
+                case 'yandex':
+                    docs = 'https://tech.yandex.com/oauth/';
+                    break;
+                case 'zoom':
+                    docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
+                    break;
+                default:
+                    break;
+            }
+
+            return {
+                ...n,
+                icon,
+                docs,
+                component
+            };
+        }) ?? []
+    );
 };
 
 function createOAuthProviders() {
diff --git a/src/routes/console/onboarding/+page.svelte b/src/routes/console/onboarding/+page.svelte
index c3a81f1eb..bd2ee0a67 100644
--- a/src/routes/console/onboarding/+page.svelte
+++ b/src/routes/console/onboarding/+page.svelte
@@ -19,7 +19,12 @@
         try {
             loading = true;
             const org = await createOrganization();
-            const project = await sdkForConsole.projects.create(id ?? ID.unique(), name, org.$id);
+            const project = await sdkForConsole.projects.create(
+                id ?? ID.unique(),
+                name,
+                org.$id,
+                'default'
+            );
             await invalidate(Dependencies.ACCOUNT);
             goto(`/console/project-${project.$id}`);
         } catch ({ message }) {
diff --git a/src/routes/console/organization-[organization]/createProject.svelte b/src/routes/console/organization-[organization]/createProject.svelte
index 953552594..49bfa66f9 100644
--- a/src/routes/console/organization-[organization]/createProject.svelte
+++ b/src/routes/console/organization-[organization]/createProject.svelte
@@ -18,7 +18,12 @@
 
     const create = async () => {
         try {
-            const project = await sdkForConsole.projects.create(id ?? 'unique()', name, teamId);
+            const project = await sdkForConsole.projects.create(
+                id ?? 'unique()',
+                name,
+                teamId,
+                'default'
+            );
             dispatch('created', project);
             addNotification({
                 type: 'success',
diff --git a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
index 97f64f1ba..9cb8457b3 100644
--- a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
@@ -7,18 +7,17 @@
     import type { Provider } from '$lib/stores/oauth-providers';
     import { onMount } from 'svelte';
 
-    export let showModal = false;
     export let provider: Provider;
 
-    let id: string = null;
-    let active = false;
+    let appId: string = null;
+    let enabled = false;
     let keyID: string = null;
     let teamID: string = null;
     let p8: string = null;
 
     onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
         if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
     });
 
@@ -30,17 +29,17 @@
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                id,
-                secret
+                appId,
+                secret,
+                enabled
             );
-            provider.active = active;
-            provider.id = id;
+            provider.enabled = enabled;
+            provider.appId = appId;
             provider.secret = secret;
-            showModal = false;
             addNotification({
                 type: 'success',
                 message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
+                    provider.enabled ? 'enabled' : 'disabled'
                 }`
             });
         } catch ({ message }) {
@@ -51,7 +50,7 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+<Modal {error} on:submit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -61,13 +60,13 @@
                 visit the docs.
             </a>
         </p>
-        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
         <InputText
             id="bundleID"
             label="Bundle ID"
             autofocus={true}
             placeholder="com.company.appname"
-            bind:value={id} />
+            bind:value={appId} />
         <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
         <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
         <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
@@ -83,12 +82,12 @@
         </div>
     </FormList>
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
             disabled={(secret === provider.secret &&
-                active === provider.active &&
-                id === provider.id) ||
-                !(id && keyID && teamID && p8)}
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && keyID && teamID && p8)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
index b5c85478b..5951ee4b4 100644
--- a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
@@ -7,18 +7,17 @@
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
 
-    export let showModal = false;
     export let provider: Provider;
 
-    let id: string = null;
-    let active = false;
+    let appId: string = null;
+    let enabled = false;
     let clientSecret: string = null;
     let auth0Domain: string = null;
     let error: string;
 
     onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
     });
 
@@ -28,17 +27,17 @@
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                id,
-                secret
+                appId,
+                secret,
+                enabled
             );
-            provider.active = active;
-            provider.id = id;
+            provider.enabled = enabled;
+            provider.appId = appId;
             provider.secret = secret;
-            showModal = false;
             addNotification({
                 type: 'success',
                 message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
+                    provider.enabled ? 'enabled' : 'disabled'
                 }`
             });
         } catch ({ message }) {
@@ -52,7 +51,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" bind:show={showModal} on:submit={update}>
+<Modal {error} size="big" show on:submit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -61,13 +60,13 @@
             <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
-        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
         <InputText
             id="clientID"
             label="Client ID"
             autofocus={true}
             placeholder="Enter ID"
-            bind:value={id} />
+            bind:value={appId} />
         <InputPassword
             id="secret"
             label="Client Secret"
@@ -92,12 +91,12 @@
         </div>
     </FormList>
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
             disabled={(secret === provider.secret &&
-                active === provider.active &&
-                id === provider.id) ||
-                !(id && clientSecret && auth0Domain)}
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && auth0Domain)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
index 88b5272cf..aac505801 100644
--- a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
@@ -7,38 +7,39 @@
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
 
-    export let showModal = false;
     export let provider: Provider;
 
     const projectId = $page.params.project;
 
-    let active = false;
-    let id: string = null;
+    let enabled = false;
+    let appId: string = null;
     let secret: string = null;
 
     onMount(() => {
-        active ??= provider.active;
-        id ??= provider.id;
+        enabled ??= provider.enabled;
+        appId ??= provider.appId;
         secret ??= provider.secret;
     });
+
     let error: string;
 
     const update = async () => {
+        console.log(provider);
         try {
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                id,
-                secret
+                appId,
+                secret,
+                enabled
             );
-            provider.active = active;
-            provider.id = id;
+            provider.enabled = enabled;
+            provider.appId = appId;
             provider.secret = secret;
-            showModal = false;
             addNotification({
                 type: 'success',
                 message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
+                    provider.enabled ? 'enabled' : 'disabled'
                 }`
             });
         } catch ({ message }) {
@@ -47,7 +48,7 @@
     };
 </script>
 
-<Modal {error} size="big" bind:show={showModal} on:submit={update}>
+<Modal {error} size="big" show on:submit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -56,13 +57,13 @@
             <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
-        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
         <InputText
             id="appID"
             label="App ID"
             autofocus={true}
             placeholder="Enter ID"
-            bind:value={id} />
+            bind:value={appId} />
         <InputPassword
             id="secret"
             label="App Secret"
@@ -82,11 +83,13 @@
         </div>
     </FormList>
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={!id ||
+            disabled={!appId ||
                 !secret ||
-                (id === provider.id && secret === provider.secret && active === provider.active)}
+                (appId === provider.appId &&
+                    secret === provider.secret &&
+                    enabled === provider.enabled)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
index 84338c5e4..9bbe76a12 100644
--- a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
@@ -7,18 +7,17 @@
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
 
-    export let showModal = false;
     export let provider: Provider;
 
-    let id: string = null;
-    let active = false;
+    let appId: string = null;
+    let enabled = false;
     let clientSecret: string = null;
     let tenantID: string = null;
     let error: string;
 
     onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
     });
 
@@ -29,18 +28,18 @@
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                id,
-                secret
+                appId,
+                secret,
+                enabled
             );
-            provider.active = active;
-            provider.id = id;
+            provider.enabled = enabled;
+            provider.appId = appId;
             provider.secret = secret;
 
-            showModal = false;
             addNotification({
                 type: 'success',
                 message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
+                    provider.enabled ? 'enabled' : 'disabled'
                 }`
             });
         } catch ({ message }) {
@@ -52,7 +51,7 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+<Modal {error} on:submit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -62,13 +61,13 @@
                 visit the docs.
             </a>
         </p>
-        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
         <InputText
             id="appID"
             label="Application (client) ID"
             autofocus={true}
             placeholder="Enter ID"
-            bind:value={id} />
+            bind:value={appId} />
         <InputPassword
             id="secret"
             label="Client Secret"
@@ -93,12 +92,12 @@
         </div>
     </FormList>
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
             disabled={(secret === provider.secret &&
-                active === provider.active &&
-                id === provider.id) ||
-                !(id && clientSecret && tenantID)}
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && tenantID)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
index 6b2bac5d7..1b9c66f89 100644
--- a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
@@ -7,18 +7,17 @@
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
 
-    export let showModal = false;
     export let provider: Provider;
 
-    let id: string = null;
-    let active = false;
+    let appId: string = null;
+    let enabled = false;
     let clientSecret: string = null;
     let oktaDomain: string = null;
     let authorizationServerId: string = null;
 
     onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
         if (provider.secret)
             ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
     });
@@ -32,17 +31,16 @@
             await sdkForConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
-                id,
+                appId,
                 secret
             );
-            provider.active = active;
-            provider.id = id;
+            provider.enabled = enabled;
+            provider.appId = appId;
             provider.secret = secret;
-            showModal = false;
             addNotification({
                 type: 'success',
                 message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
+                    provider.enabled ? 'enabled' : 'disabled'
                 }`
             });
         } catch ({ message }) {
@@ -56,7 +54,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+<Modal {error} on:submit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -65,13 +63,13 @@
             <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
-        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
         <InputText
             id="appID"
             label="Client ID"
             autofocus={true}
             placeholder="Enter ID"
-            bind:value={id} />
+            bind:value={appId} />
         <InputPassword
             id="secret"
             label="Client Secret"
@@ -102,12 +100,12 @@
         </div>
     </FormList>
     <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
             disabled={(secret === provider.secret &&
-                active === provider.active &&
-                id === provider.id) ||
-                !(id && clientSecret && oktaDomain && authorizationServerId)}
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && oktaDomain && authorizationServerId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/console/project-[project]/authentication/settings/+page.svelte b/src/routes/console/project-[project]/authentication/settings/+page.svelte
index 00e4029cc..d209725f2 100644
--- a/src/routes/console/project-[project]/authentication/settings/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/settings/+page.svelte
@@ -15,7 +15,6 @@
     import { page } from '$app/stores';
 
     const projectId = $page.params.project;
-    let showModal = false;
 
     onMount(async () => {
         authMethods.load($project);
@@ -56,9 +55,7 @@
                                 label={box.label}
                                 id={box.method}
                                 bind:value={box.value}
-                                on:change={() => {
-                                    authUpdate(box);
-                                }} />
+                                on:change={() => authUpdate(box)} />
                         {/each}
                     </ul>
                 </form>
@@ -72,7 +69,6 @@
                         class="card u-flex u-flex-vertical u-cross-center"
                         on:click={() => {
                             selectedProvider = provider;
-                            showModal = true;
                         }}
                         use:event={{
                             name: 'console_users',
@@ -91,8 +87,8 @@
                         </div>
                         <p class="u-margin-block-start-8">{provider.name}</p>
                         <div class="u-margin-block-start-24">
-                            <Pill success={provider.active}>
-                                {provider.active ? 'enabled' : 'disabled'}
+                            <Pill success={provider.enabled}>
+                                {provider.enabled ? 'enabled' : 'disabled'}
                             </Pill>
                         </div>
                     </button>
@@ -105,6 +101,7 @@
 {#if selectedProvider}
     <svelte:component
         this={selectedProvider.component}
-        provider={selectedProvider}
-        bind:showModal />
+        bind:provider={selectedProvider}
+        on:close={() => (selectedProvider = null)}
+        showModal />
 {/if}
diff --git a/static/icons/dark/color/ms_yammer.svg b/static/icons/dark/color/yammer.svg
similarity index 100%
rename from static/icons/dark/color/ms_yammer.svg
rename to static/icons/dark/color/yammer.svg
diff --git a/static/icons/dark/grayscale/ms_yammer.svg b/static/icons/dark/grayscale/yammer.svg
similarity index 100%
rename from static/icons/dark/grayscale/ms_yammer.svg
rename to static/icons/dark/grayscale/yammer.svg
diff --git a/static/icons/light/color/ms_yammer.svg b/static/icons/light/color/yammer.svg
similarity index 100%
rename from static/icons/light/color/ms_yammer.svg
rename to static/icons/light/color/yammer.svg
diff --git a/static/icons/light/grayscale/ms_yammer.svg b/static/icons/light/grayscale/yammer.svg
similarity index 100%
rename from static/icons/light/grayscale/ms_yammer.svg
rename to static/icons/light/grayscale/yammer.svg