diff --git a/package-lock.json b/package-lock.json
index 7821344f6..9f180e3ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,9 +6,9 @@
         "": {
             "name": "@appwrite/console",
             "dependencies": {
-                "@appwrite.io/console": "^0.6.2",
-                "@appwrite.io/pink": "0.11.0",
-                "@appwrite.io/pink-icons": "0.11.0",
+                "@appwrite.io/console": "^0.6.1",
+                "@appwrite.io/pink": "^0.19.0",
+                "@appwrite.io/pink-icons": "^0.19.0",
                 "@popperjs/core": "^2.11.8",
                 "@sentry/svelte": "^7.66.0",
                 "@sentry/tracing": "^7.66.0",
@@ -162,19 +162,19 @@
             "integrity": "sha512-3qYknuFwhvTN2GnPB8G1w5DgxfVorGtfj4uuEaXbTmMUmjA8fHaW5VkJriuUxCi6/TpxDxqV/hhEkdoXL+5H4w=="
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.11.0.tgz",
-            "integrity": "sha512-0/ztJxeV6Cy1FnXy2ClLELzDnR4eRtGAhQ24napCg0VwOFevSIc0S7jcRrWVyA6WRuwex4eGiEn2JeYMTq70Xg==",
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.19.0.tgz",
+            "integrity": "sha512-b5yJCtkqRfikgqpi6rxN0je7FkLdvtSPQ3XNW49yLN7euHHuMr74qj8XvWrvv41ilikanvvUWUD2C8PLvmOy8Q==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "0.11.0",
+                "@appwrite.io/pink-icons": "0.19.0",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.11.2"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.11.0.tgz",
-            "integrity": "sha512-FOvP87m4S17QRQPrLzsSlwrbIeJNJi5RliGUQYONIhmI0PiwE4Xm5LXFE+NqFYsR56w2X3jYdJIHdIdZlH3XjA=="
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.19.0.tgz",
+            "integrity": "sha512-qXzIQrY9OVFUJ7/qCf5oRJqJEJ+ECQpzlU0JiLycbPnu/nbq+pbaFDPma+7cTHsaD8znRC8X+a7P22JNrsN0rg=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.24.2",
diff --git a/package.json b/package.json
index 611b69f8d..c615a8592 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,9 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "^0.6.2",
-        "@appwrite.io/pink": "0.11.0",
-        "@appwrite.io/pink-icons": "0.11.0",
+        "@appwrite.io/console": "^0.6.1",
+        "@appwrite.io/pink": "^0.19.0",
+        "@appwrite.io/pink-icons": "^0.19.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d23cc3f30..b3a9e5d23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,14 +9,14 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: ^0.6.2
+        specifier: ^0.6.1
         version: 0.6.2
       '@appwrite.io/pink':
-        specifier: 0.11.0
-        version: 0.11.0
+        specifier: ^0.19.0
+        version: 0.19.0
       '@appwrite.io/pink-icons':
-        specifier: 0.11.0
-        version: 0.11.0
+        specifier: ^0.19.0
+        version: 0.19.0
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -200,11 +200,11 @@ packages:
   '@appwrite.io/console@0.6.2':
     resolution: {integrity: sha512-3qYknuFwhvTN2GnPB8G1w5DgxfVorGtfj4uuEaXbTmMUmjA8fHaW5VkJriuUxCi6/TpxDxqV/hhEkdoXL+5H4w==}
 
-  '@appwrite.io/pink-icons@0.11.0':
-    resolution: {integrity: sha512-FOvP87m4S17QRQPrLzsSlwrbIeJNJi5RliGUQYONIhmI0PiwE4Xm5LXFE+NqFYsR56w2X3jYdJIHdIdZlH3XjA==}
+  '@appwrite.io/pink-icons@0.19.0':
+    resolution: {integrity: sha512-qXzIQrY9OVFUJ7/qCf5oRJqJEJ+ECQpzlU0JiLycbPnu/nbq+pbaFDPma+7cTHsaD8znRC8X+a7P22JNrsN0rg==}
 
-  '@appwrite.io/pink@0.11.0':
-    resolution: {integrity: sha512-0/ztJxeV6Cy1FnXy2ClLELzDnR4eRtGAhQ24napCg0VwOFevSIc0S7jcRrWVyA6WRuwex4eGiEn2JeYMTq70Xg==}
+  '@appwrite.io/pink@0.19.0':
+    resolution: {integrity: sha512-b5yJCtkqRfikgqpi6rxN0je7FkLdvtSPQ3XNW49yLN7euHHuMr74qj8XvWrvv41ilikanvvUWUD2C8PLvmOy8Q==}
 
   '@babel/code-frame@7.23.5':
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
@@ -3205,11 +3205,11 @@ snapshots:
 
   '@appwrite.io/console@0.6.2': {}
 
-  '@appwrite.io/pink-icons@0.11.0': {}
+  '@appwrite.io/pink-icons@0.19.0': {}
 
-  '@appwrite.io/pink@0.11.0':
+  '@appwrite.io/pink@0.19.0':
     dependencies:
-      '@appwrite.io/pink-icons': 0.11.0
+      '@appwrite.io/pink-icons': 0.19.0
       normalize.css: 8.0.1
       the-new-css-reset: 1.11.2
 
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 93119dbbb..744a4e351 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -157,6 +157,7 @@ export enum Submit {
     AccountAuthenticatorDelete = 'submit_account_authenticator_delete',
     AccountRecoveryCodesCreate = 'submit_account_recovery_codes_create',
     AccountRecoveryCodesUpdate = 'submit_account_recovery_codes_update',
+    AccountDeleteIdentity = 'submit_account_delete_identity',
     UserCreate = 'submit_user_create',
     UserDelete = 'submit_user_delete',
     UserUpdateEmail = 'submit_user_update_email',
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index ba87e0e38..b8cb07ebd 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -118,8 +118,8 @@
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
     .tippy-user .tippy-box {
-        --p-drop-bg-color: var(--color-neutral-500);
-        --p-drop-border-color: var(--color-neutral-200);
+        --p-drop-bg-color: var(--color-neutral-105);
+        --p-drop-border-color: var(--color-neutral-85);
 
         body.theme-light & {
             --p-drop-bg-color: var(--color-neutral-0);
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index fd4a80b82..9a5f63e7c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -4,6 +4,7 @@ export const INTERVAL = 5 * 60000; // default interval to check for feedback
 
 export enum Dependencies {
     FACTORS = 'dependency:factors',
+    IDENTITIES = 'dependency:identities',
     CREDIT = 'dependency:credit',
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 8d08dffdb..2cb2ddd3f 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,6 +1,4 @@
-import type { Models } from '@appwrite.io/console';
 import type { SvelteComponent } from 'svelte';
-import { writable } from 'svelte/store';
 import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte';
 import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte';
 import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte';
@@ -11,176 +9,240 @@ import Microsoft from '../../routes/console/project-[project]/auth/(providers)/m
 import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte';
 import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte';
 
-export type Provider = Models.AuthProvider & {
+export type Provider = {
+    name: string;
     icon: string;
     docs?: string;
-    component?: typeof SvelteComponent<unknown>;
+    component: typeof SvelteComponent<unknown>;
 };
 
-export type Providers = {
-    providers: Provider[];
+export const oAuthProviders: Record<string, Provider> = {
+    amazon: {
+        name: 'Amazon',
+        icon: 'amazon',
+        docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
+        component: Main
+    },
+    apple: {
+        name: 'Apple',
+        icon: 'apple',
+        docs: 'https://developer.apple.com/',
+        component: Apple
+    },
+    auth0: {
+        name: 'Auth0',
+        icon: 'auth0',
+        docs: 'https://auth0.com/developers',
+        component: Auth0
+    },
+    authentik: {
+        name: 'Authentik',
+        icon: 'authentik',
+        docs: 'https://goauthentik.io/integrations/sources/oauth/',
+        component: Authentik
+    },
+    autodesk: {
+        name: 'Autodesk',
+        icon: 'autodesk',
+        docs: 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/',
+        component: Main
+    },
+    bitbucket: {
+        name: 'Bitbucket',
+        icon: 'bitbucket',
+        docs: 'https://developer.atlassian.com/bitbucket',
+        component: Main
+    },
+    bitly: {
+        name: 'Bitly',
+        icon: 'bitly',
+        docs: 'https://dev.bitly.com/v4_documentation.html',
+        component: Main
+    },
+    box: {
+        name: 'Box',
+        icon: 'box',
+        docs: 'https://developer.box.com/reference/',
+        component: Main
+    },
+    dailymotion: {
+        name: 'Dailymotion',
+        icon: 'dailymotion',
+        docs: 'https://developers.dailymotion.com/api/',
+        component: Main
+    },
+    discord: {
+        name: 'Discord',
+        icon: 'discord',
+        docs: 'https://discordapp.com/developers/docs/topics/oauth2',
+        component: Main
+    },
+    disqus: {
+        name: 'Disqus',
+        icon: 'disqus',
+        docs: 'https://disqus.com/api/docs/auth/',
+        component: Main
+    },
+    dropbox: {
+        name: 'Dropbox',
+        icon: 'dropbox',
+        docs: 'https://www.dropbox.com/developers/documentation',
+        component: Main
+    },
+    etsy: {
+        name: 'Etsy',
+        icon: 'etsy',
+        docs: 'https://developers.etsy.com/',
+        component: Main
+    },
+    facebook: {
+        name: 'Facebook',
+        icon: 'facebook',
+        docs: 'https://developers.facebook.com/',
+        component: Main
+    },
+    github: {
+        name: 'GitHub',
+        icon: 'github',
+        docs: 'https://developer.github.com',
+        component: Main
+    },
+    gitlab: {
+        name: 'GitLab',
+        icon: 'gitlab',
+        docs: 'https://docs.gitlab.com/ee/api/',
+        component: GitLab
+    },
+    google: {
+        name: 'Google',
+        icon: 'google',
+        docs: 'https://support.google.com/googleapi/answer/6158849',
+        component: Google
+    },
+    linkedin: {
+        name: 'LinkedIn',
+        icon: 'linkedin',
+        docs: 'https://developer.linkedin.com/',
+        component: Main
+    },
+    microsoft: {
+        name: 'Microsoft',
+        icon: 'microsoft',
+        docs: 'https://developer.microsoft.com/en-us/',
+        component: Microsoft
+    },
+    notion: {
+        name: 'Notion',
+        icon: 'notion',
+        docs: 'https://developers.notion.com/docs',
+        component: Main
+    },
+    oidc: {
+        name: 'OIDC',
+        icon: 'oidc',
+        docs: 'https://openid.net/connect/faq/',
+        component: Oidc
+    },
+    okta: {
+        name: 'Okta',
+        icon: 'okta',
+        docs: 'https://developer.okta.com',
+        component: Okta
+    },
+    paypal: {
+        name: 'Paypal',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    paypalsandbox: {
+        name: 'Paypal Sandbox',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    podio: {
+        name: 'Podio',
+        icon: 'podio',
+        docs: 'https://developers.podio.com/doc/oauth-authorization',
+        component: Main
+    },
+    salesforce: {
+        name: 'Salesforce',
+        icon: 'salesforce',
+        docs: 'https://developer.salesforce.com/docs/',
+        component: Main
+    },
+    slack: {
+        name: 'Slack',
+        icon: 'slack',
+        docs: 'https://api.slack.com/',
+        component: Main
+    },
+    spotify: {
+        name: 'Spotify',
+        icon: 'spotify',
+        docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
+        component: Main
+    },
+    stripe: {
+        name: 'Stripe',
+        icon: 'stripe',
+        docs: 'https://stripe.com/docs/api',
+        component: Main
+    },
+    tradeshift: {
+        name: 'Tradeshift',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    tradeshiftBox: {
+        name: 'Tradeshift Sandbox',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    twitch: {
+        name: 'Twitch',
+        icon: 'twitch',
+        docs: 'https://dev.twitch.tv/docs/auth',
+        component: Main
+    },
+    wordpress: {
+        name: 'Wordpress',
+        icon: 'wordpress',
+        docs: 'https://developer.wordpress.com/docs/oauth2/',
+        component: Main
+    },
+    yahoo: {
+        name: 'Yahoo',
+        icon: 'yahoo',
+        docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
+        component: Main
+    },
+    yammer: {
+        name: 'Yammer',
+        icon: 'yammer',
+        docs: 'https://developer.yammer.com/docs/oauth-2',
+        component: Main
+    },
+    yandex: {
+        name: 'Yandex',
+        icon: 'yandex',
+        docs: 'https://tech.yandex.com/oauth/',
+        component: Main
+    },
+    zoho: {
+        name: 'Zoho',
+        icon: 'zoho',
+        docs: 'https://www.zoho.com/crm/developer/docs/api/oauth-overview.html',
+        component: Main
+    },
+    zoom: {
+        name: 'Zoom',
+        icon: 'zoom',
+        docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
+        component: Main
+    }
 };
-
-const setProviders = (project: Models.Project): Provider[] => {
-    return (
-        project?.oAuthProviders.map((n) => {
-            let docs: Provider['docs'];
-            let icon: Provider['icon'] = n.key.toLowerCase();
-            let component: Provider['component'] = Main;
-
-            switch (n.key.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 'authentik':
-                    docs = 'https://goauthentik.io/integrations/sources/oauth/';
-                    component = Authentik;
-                    break;
-                case 'autodesk':
-                    docs = 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/';
-                    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 'dailymotion':
-                    docs = 'https://developers.dailymotion.com/api/';
-                    break;
-                case 'discord':
-                    docs = 'https://discordapp.com/developers/docs/topics/oauth2';
-                    break;
-                case 'disqus':
-                    docs = 'https://disqus.com/api/docs/auth/';
-                    break;
-                case 'dropbox':
-                    docs = 'https://www.dropbox.com/developers/documentation';
-                    break;
-                case 'etsy':
-                    docs = 'https://developers.etsy.com/';
-                    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/';
-                    component = GitLab;
-                    break;
-                case 'google':
-                    docs = 'https://support.google.com/googleapi/answer/6158849';
-                    component = Google;
-                    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 'oidc':
-                    docs = 'https://openid.net/connect/faq/';
-                    component = Oidc;
-                    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 'podio':
-                    docs = 'https://developers.podio.com/doc/oauth-authorization';
-                    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/auth';
-                    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 'zoho':
-                    docs = 'https://www.zoho.com/accounts/protocol/oauth/sign-in-using-zoho.html';
-                    break;
-                case 'zoom':
-                    docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
-                    break;
-                default:
-                    break;
-            }
-
-            return {
-                ...n,
-                icon,
-                docs,
-                component
-            };
-        }) ?? []
-    );
-};
-
-function createOAuthProviders() {
-    const { subscribe, set } = writable<Providers>({
-        providers: setProviders(null)
-    });
-    return {
-        subscribe,
-        set,
-        load: (project: Models.Project) => {
-            const providers = setProviders(project);
-
-            set({ providers });
-        }
-    };
-}
-
-export const OAuthProviders = createOAuthProviders();
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index bcc19f123..08a18f119 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -7,10 +7,6 @@
             variables[variable.name] = variable.value ?? '';
         });
 
-        if (!runtime) {
-            runtime = template.runtimes[0].name;
-        }
-
         templateStore.set(template);
         templateConfig.set({
             $id: null,
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 7da879c82..536d32b94 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -57,7 +57,7 @@
                 id="runtime"
                 placeholder="Select runtime"
                 required
-                disabled={options.length <= 1}
+                disabled={options.length < 1}
                 {options}
                 bind:value={$templateConfig.runtime} />
         {/await}
diff --git a/src/routes/console/account/+layout.ts b/src/routes/console/account/+layout.ts
index 2341ee3c0..1c993bedf 100644
--- a/src/routes/console/account/+layout.ts
+++ b/src/routes/console/account/+layout.ts
@@ -6,9 +6,18 @@ import { Dependencies } from '$lib/constants';
 
 export const load: LayoutLoad = async ({ depends }) => {
     depends(Dependencies.FACTORS);
+    depends(Dependencies.IDENTITIES);
+
+    const promises = [
+        sdk.forConsole.account.listMfaFactors(),
+        sdk.forConsole.account.listIdentities()
+    ];
+
+    const [factors, identities] = await Promise.all(promises);
 
     return {
-        factors: await sdk.forConsole.account.listMfaFactors(),
+        factors,
+        identities,
         header: Header,
         breadcrumbs: Breadcrumbs
     };
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index 1006770d8..b3cbe4f57 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -5,12 +5,14 @@
     import UpdateEmail from './updateEmail.svelte';
     import DeleteAccount from './deleteAccount.svelte';
     import UpdateMfa from './updateMfa.svelte';
+    import Identities from './identities.svelte';
 </script>
 
 <Container>
     <UpdateName />
     <UpdateEmail />
     <UpdatePassword />
+    <Identities />
     <UpdateMfa />
     <DeleteAccount />
 </Container>
diff --git a/src/routes/console/account/identities.svelte b/src/routes/console/account/identities.svelte
new file mode 100644
index 000000000..44ad5b772
--- /dev/null
+++ b/src/routes/console/account/identities.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { identities } from './store';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
+    import EmptySearch from '$lib/components/emptySearch.svelte';
+
+    async function deleteIdentity(id: string) {
+        try {
+            await sdk.forConsole.account.deleteIdentity(id);
+            addNotification({
+                message: 'Identity has been deleted',
+                type: 'success'
+            });
+            await invalidate(Dependencies.IDENTITIES);
+            trackEvent(Submit.AccountDeleteIdentity);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.AccountDeleteIdentity);
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7">Identities</Heading>
+    <p class="text">
+        Identities are your connected GitHub accounts. You can sign in using these accounts.
+    </p>
+
+    <svelte:fragment slot="aside">
+        {#if $identities.length === 0}
+            <EmptySearch hidePagination>
+                <div class="u-text-center">
+                    No identities are currently available. Once you sign in via GitHub, you'll see
+                    it here.
+                </div>
+            </EmptySearch>
+        {:else}
+            <Table noMargin noStyles>
+                <TableHeader>
+                    <TableCellHead width={100}>Provider</TableCellHead>
+                    <TableCellHead>Email</TableCellHead>
+                    <TableCellHead>Created At</TableCellHead>
+                    <TableCellHead>Expiry Date</TableCellHead>
+                    <TableCellHead width={40} />
+                </TableHeader>
+                <TableBody>
+                    {#each $identities as identity (identity.$id)}
+                        {@const provider = oAuthProviders[identity.provider]}
+                        <TableRow>
+                            <TableCell title="Provider">
+                                <div class="u-flex u-gap-8 u-cross-center">
+                                    <div class="avatar is-size-small">
+                                        <span
+                                            class={`icon-${provider.icon}`}
+                                            style="font-size: var(--icon-size-medium)!important" />
+                                    </div>
+                                    {provider.name}
+                                </div>
+                            </TableCell>
+                            <TableCellText title="Email">
+                                {identity.providerEmail}
+                            </TableCellText>
+                            <TableCellText title="Created at">
+                                {toLocaleDateTime(identity.$createdAt)}
+                            </TableCellText>
+                            <TableCellText title="Expiry date">
+                                {toLocaleDateTime(identity.providerAccessTokenExpiry)}
+                            </TableCellText>
+                            <TableCell title="Remove">
+                                <Button
+                                    text
+                                    class="is-only-icon"
+                                    on:click={() => deleteIdentity(identity.$id)}
+                                    ><span class="icon-trash" aria-hidden="true" /></Button>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+        {/if}
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/console/account/store.ts b/src/routes/console/account/store.ts
index e5638c575..362054d6f 100644
--- a/src/routes/console/account/store.ts
+++ b/src/routes/console/account/store.ts
@@ -6,3 +6,7 @@ export const factors = derived(
     page,
     ($page) => $page.data.factors as Models.MfaFactors & { recoveryCode: boolean }
 );
+export const identities = derived(
+    page,
+    ($page) => $page.data.identities.identities as Models.Identity[]
+);
diff --git a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
index 982422b3f..2d34598f5 100644
--- a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,11 +19,13 @@
     let teamID: string = null;
     let p8: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
index 0607180a5..26ae7296e 100644
--- a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let auth0Domain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
index f7d6dcd37..e6b99f2b4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let authentikDomain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, authentikDomain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
index 95f80675e..dc1dd71a4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let endpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, endpoint } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -43,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
index defd59038..9ddfdb74f 100644
--- a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
index 184fcd00c..0e38ff2e6 100644
--- a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
index 7fd451af5..8df2259fc 100644
--- a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,15 +18,15 @@
     let clientSecret: string = null;
     let tenantID: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
-
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
index f00f07e30..0c6565f19 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -20,6 +21,7 @@
     let tokenEndpoint: string = null;
     let userinfoEndpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     // secret is valid if clientSecret is set and either wellKnownEndpoint or all of the other endpoints are set
     $: isValidSecret =
@@ -38,6 +40,7 @@
                 userinfoEndpoint
             } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -67,7 +70,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
index 6e23ca60c..3f73d9d13 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,6 +19,7 @@
     let oktaDomain: string = null;
     let authorizationServerId: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
@@ -25,6 +27,7 @@
         if (provider.secret) {
             ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -49,7 +52,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index 610733117..50ec182c4 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -8,18 +8,15 @@
     import { app } from '$lib/stores/app';
     import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { addNotification } from '$lib/stores/notifications';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { OAuthProviders } from '$lib/stores/oauth-providers';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
     import { project } from '../../store';
 
     const projectId = $page.params.project;
     let showProvider = false;
 
-    $: {
-        authMethods.load($project);
-        OAuthProviders.load($project);
-    }
+    let selectedProvider: Models.AuthProvider | null = null;
 
     async function authUpdate(box: AuthMethod) {
         try {
@@ -42,10 +39,10 @@
         }
     }
 
-    let selectedProvider: Provider | null = null;
+    $: authMethods.load($project);
 </script>
 
-{#if $authMethods && $OAuthProviders}
+{#if $authMethods && $project}
     <Container>
         <CardGrid>
             <Heading tag="h2" size="7">Auth methods</Heading>
@@ -67,34 +64,37 @@
         <section class="common-section">
             <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
             <ul class="grid-box common-section">
-                {#each $OAuthProviders.providers
+                {#each $project.oAuthProviders
                     .filter((p) => p.name !== 'Mock')
                     .sort((a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1)) as provider}
-                    <li class="grid-box-item">
-                        <button
-                            class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
-                            on:click={() => {
-                                selectedProvider = provider;
-                                showProvider = true;
-                                trackEvent(`click_select_provider`, {
-                                    provider: provider.key.toLowerCase()
-                                });
-                            }}>
-                            <div class="avatar">
-                                <img
-                                    height="20"
-                                    width="20"
-                                    src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
-                                    alt={provider.name} />
-                            </div>
-                            <p class="u-margin-block-start-8">{provider.name}</p>
-                            <div class="u-margin-block-start-24">
-                                <Pill success={provider.enabled}>
-                                    {provider.enabled ? 'enabled' : 'disabled'}
-                                </Pill>
-                            </div>
-                        </button>
-                    </li>
+                    {@const oAuthProvider = oAuthProviders[provider.key]}
+                    {#if oAuthProvider}
+                        <li class="grid-box-item">
+                            <button
+                                class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
+                                on:click={() => {
+                                    selectedProvider = provider;
+                                    showProvider = true;
+                                    trackEvent(`click_select_provider`, {
+                                        provider: provider.key.toLowerCase()
+                                    });
+                                }}>
+                                <div class="avatar">
+                                    <img
+                                        height="20"
+                                        width="20"
+                                        src={`/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
+                                        alt={provider.name} />
+                                </div>
+                                <p class="u-margin-block-start-8">{provider.name}</p>
+                                <div class="u-margin-block-start-24">
+                                    <Pill success={provider.enabled}>
+                                        {provider.enabled ? 'enabled' : 'disabled'}
+                                    </Pill>
+                                </div>
+                            </button>
+                        </li>
+                    {/if}
                 {/each}
             </ul>
         </section>
@@ -102,8 +102,9 @@
 {/if}
 
 {#if selectedProvider && showProvider}
+    {@const oAuthProvider = oAuthProviders[selectedProvider.key]}
     <svelte:component
-        this={selectedProvider.component}
+        this={oAuthProvider.component}
         bind:provider={selectedProvider}
         bind:show={showProvider}
         on:close={() => {
diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts
index dade0a767..5ada36747 100644
--- a/src/routes/console/project-[project]/auth/updateOAuth.ts
+++ b/src/routes/console/project-[project]/auth/updateOAuth.ts
@@ -3,13 +3,12 @@ import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 import { Dependencies } from '$lib/constants';
 import { isValueOfStringEnum } from '$lib/helpers/types';
 import { addNotification } from '$lib/stores/notifications';
-import type { Provider } from '$lib/stores/oauth-providers';
 import { sdk } from '$lib/stores/sdk';
-import { OAuthProvider } from '@appwrite.io/console';
+import { OAuthProvider, type Models } from '@appwrite.io/console';
 
 type Args = {
     projectId: string;
-    provider: Provider;
+    provider: Models.AuthProvider;
     appId: string;
     secret: string;
     enabled: boolean;
diff --git a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
index 1d62ab264..841db0487 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
@@ -20,8 +20,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import type { Column } from '$lib/helpers/types';
-    import { OAuthProviders, type Provider } from '$lib/stores/oauth-providers';
-    import { project } from '$routes/console/project-[project]/store';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
 
     export let columns: Column[];
@@ -30,7 +29,6 @@
     let selectedIds: string[] = [];
     let showDelete = false;
     let deleting = false;
-    let providerLookup: Record<string, Provider> = {};
 
     async function handleDelete() {
         showDelete = false;
@@ -58,12 +56,6 @@
             showDelete = false;
         }
     }
-
-    $: OAuthProviders.load($project);
-    $: providerLookup = $OAuthProviders.providers.reduce((acc, provider) => {
-        acc[provider.key] = provider;
-        return acc;
-    }, {});
 </script>
 
 <TableScroll>
@@ -93,7 +85,7 @@
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'provider'}
-                            {@const provider = providerLookup[identity[column.id]]}
+                            {@const provider = oAuthProviders[identity[column.id]]}
                             <TableCellText title={column.title} width={column.width}>
                                 <div class="u-inline-flex u-cross-center u-gap-8">
                                     <div class="avatar is-size-small">