diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte
index 5d3fc0b898..6bb7693a26 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/frontend/src/lib/components/Login.svelte
@@ -7,6 +7,7 @@
 	import Okta from '$lib/components/icons/brands/Okta.svelte'
 	import Auth0 from '$lib/components/icons/brands/Auth0.svelte'
 	import NextcloudIcon from '$lib/components/icons/NextcloudIcon.svelte'
+	import PocketIdIcon from '$lib/components/icons/PocketIdIcon.svelte'
 
 	import { OauthService, UserService, WorkspaceService } from '$lib/gen'
 	import { usersWorkspaceStore, workspaceStore, userStore } from '$lib/stores'
@@ -76,6 +77,11 @@
 			type: 'nextcloud',
 			name: 'Nextcloud',
 			icon: NextcloudIcon
+		},
+		{
+			type: 'pocketid',
+			name: 'Pocket ID',
+			icon: PocketIdIcon
 		}
 	] as const
 
diff --git a/frontend/src/lib/components/PocketIdSetting.svelte b/frontend/src/lib/components/PocketIdSetting.svelte
index 22deb8a70e..25f58357d3 100644
--- a/frontend/src/lib/components/PocketIdSetting.svelte
+++ b/frontend/src/lib/components/PocketIdSetting.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
@@ -10,24 +11,27 @@
 	// Initialize org from existing config or empty string
 	let org = $state(value?.connect_config?.auth_url?.replace('/authorize', '') ?? '')
 
-	// Update configs when org changes
+	// Update configs when org changes - use untrack to avoid infinite loop
 	$effect(() => {
-		if (value && org) {
-			value = {
-				...value,
-				connect_config: {
-					auth_url: `${org}/authorize`,
-					token_url: `${org}/api/oidc/token`,
-					scopes: ['openid', 'profile', 'email']
-				},
-				login_config: {
-					auth_url: `${org}/authorize`,
-					token_url: `${org}/api/oidc/token`,
-					userinfo_url: `${org}/api/oidc/userinfo`,
-					scopes: ['openid', 'profile', 'email']
+		const currentOrg = org
+		untrack(() => {
+			if (value && currentOrg) {
+				value = {
+					...value,
+					connect_config: {
+						auth_url: `${currentOrg}/authorize`,
+						token_url: `${currentOrg}/api/oidc/token`,
+						scopes: ['openid', 'profile', 'email']
+					},
+					login_config: {
+						auth_url: `${currentOrg}/authorize`,
+						token_url: `${currentOrg}/api/oidc/token`,
+						userinfo_url: `${currentOrg}/api/oidc/userinfo`,
+						scopes: ['openid', 'profile', 'email']
+					}
 				}
 			}
-		}
+		})
 	})
 
 	function handleToggle(e: CustomEvent<boolean>) {
@@ -44,15 +48,18 @@
 <div class="flex flex-col gap-1">
 	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center">
-		<div class="w-[120px]"><IconedResourceType name={'pocketid'} after={true} /></div>
+		<div class="w-[120px]"><IconedResourceType name="pocketid" after={true} /></div>
 		<Toggle checked={enabled} on:change={handleToggle} />
 	</label>
 	{#if enabled}
 		<div class="border rounded p-4 flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Pocket ID Url</span>
-				<span class="text-secondary font-normal text-xs">{'POCKET_ID_URL/authorize'}</span>
-				<TextInput inputProps={{ type: 'text', placeholder: 'https://id.example.com' }} bind:value={org} />
+				<span class="text-secondary font-normal text-xs">POCKET_ID_URL/authorize</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'https://id.example.com' }}
+					bind:value={org}
+				/>
 			</label>
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
diff --git a/frontend/src/lib/components/icons/PocketIdIcon.svelte b/frontend/src/lib/components/icons/PocketIdIcon.svelte
index c1d98755ce..b02259b09e 100644
--- a/frontend/src/lib/components/icons/PocketIdIcon.svelte
+++ b/frontend/src/lib/components/icons/PocketIdIcon.svelte
@@ -1,12 +1,24 @@
 <script lang="ts">
 	interface Props {
-		height?: string;
-		width?: string;
+		size?: number
+		height?: number
+		width?: number
+		class?: string
 	}
 
-	let { height = '24px', width = '24px' }: Props = $props();
+	let {
+		size = undefined,
+		height: heightProp = 24,
+		width: widthProp = 24,
+		class: clazz = ''
+	}: Props = $props()
+
+	const { width, height } = $derived(
+		size ? { width: size, height: size } : { width: widthProp, height: heightProp }
+	)
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} fill="currentColor">
-	<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {width} {height} class={clazz}>
+	<circle cx="256" cy="256" r="256" fill="#fff"/>
+	<path d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z" fill="#191919"/>
 </svg>