feat: modernize ui (#381)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/authorize/+page.svelte

@@ -78,15 +78,17 @@
 </script>
 
 <svelte:head>
-	<title>{m.sign_in_to({name: client.name})}</title>
+	<title>{m.sign_in_to({ name: client.name })}</title>
 </svelte:head>
 
 {#if client == null}
 	<p>{m.client_not_found()}</p>
 {:else}
-	<SignInWrapper showAlternativeSignInMethodButton>
+	<SignInWrapper animate showAlternativeSignInMethodButton>
 		<ClientProviderImages {client} {success} error={!!errorMessage} />
-		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">{m.sign_in_to({name: client.name})}</h1>
+		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
+			{m.sign_in_to({ name: client.name })}
+		</h1>
 		{#if errorMessage}
 			<p class="text-muted-foreground mb-10 mt-2">
 				{errorMessage}.
@@ -110,7 +112,11 @@
 					<Card.Content data-testid="scopes">
 						<div class="flex flex-col gap-3">
 							{#if scope!.includes('email')}
-								<ScopeItem icon={LucideMail} name={m.email()} description={m.view_your_email_address()} />
+								<ScopeItem
+									icon={LucideMail}
+									name={m.email()}
+									description={m.view_your_email_address()}
+								/>
 							{/if}
 							{#if scope!.includes('profile')}
 								<ScopeItem
@@ -132,7 +138,8 @@
 			</div>
 		{/if}
 		<div class="flex w-full justify-stretch gap-2">
-			<Button onclick={() => history.back()} class="w-full" variant="secondary">{m.cancel()}</Button>
+			<Button onclick={() => history.back()} class="w-full" variant="secondary">{m.cancel()}</Button
+			>
 			{#if !errorMessage}
 				<Button class="w-full" {isLoading} on:click={authorize}>{m.sign_in()}</Button>
 			{:else}

frontend/src/routes/login/+page.svelte

@@ -36,12 +36,12 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper showAlternativeSignInMethodButton>
+<SignInWrapper animate showAlternativeSignInMethodButton>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>
 	<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
-		{m.sign_in_to_appname({ appName: $appConfigStore.appName})}
+		{m.sign_in_to_appname({ appName: $appConfigStore.appName })}
 	</h1>
 	{#if error}
 		<p class="text-muted-foreground mt-2" in:fade>

frontend/src/routes/logout/+page.svelte

@@ -26,7 +26,7 @@
 	<title>{m.logout()}</title>
 </svelte:head>
 
-<SignInWrapper>
+<SignInWrapper animate>
 	<div class="flex justify-center">
 		<div class="bg-muted rounded-2xl p-3">
 			<Logo class="h-10 w-10" />
@@ -35,7 +35,9 @@
 	<h1 class="font-playfair mt-5 text-4xl font-bold">{m.sign_out()}</h1>
 
 	<p class="text-muted-foreground mt-2">
-		{@html m.do_you_want_to_sign_out_of_pocketid_with_the_account({ username: $userStore?.username ?? '' })}
+		{@html m.do_you_want_to_sign_out_of_pocketid_with_the_account({
+			username: $userStore?.username ?? ''
+		})}
 	</p>
 	<div class="mt-10 flex w-full justify-stretch gap-2">
 		<Button class="w-full" variant="secondary" onclick={() => history.back()}>{m.cancel()}</Button>

frontend/src/routes/settings/+layout.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import userStore from '$lib/stores/user-store';
-	import { LucideExternalLink } from 'lucide-svelte';
-	import type { Snippet } from 'svelte';
-	import type { LayoutData } from './$types';
+	import { page } from '$app/state';
+	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import userStore from '$lib/stores/user-store';
+	import { LucideExternalLink, LucideSettings } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
+	import type { LayoutData } from './$types';
 
 	let {
 		children,
@@ -14,60 +16,79 @@
 		data: LayoutData;
 	} = $props();
 
-	const { versionInformation } = data;
+	const { versionInformation, user } = data;
 
-	let links = $state([
+	const links = [
 		{ href: '/settings/account', label: m.my_account() },
-		{ href: '/settings/audit-log', label: m.audit_log() }
-	]);
+		{ href: '/settings/audit-log', label: m.audit_log() },		
+	];
 
-	if ($userStore?.isAdmin) {
-		links = [
-			// svelte-ignore state_referenced_locally
-			...links,
-			{ href: '/settings/admin/users', label: m.users() },
-			{ href: '/settings/admin/user-groups', label: m.user_groups() },
-			{ href: '/settings/admin/oidc-clients', label: m.oidc_clients() },
-			{ href: '/settings/admin/api-keys', label: m.api_keys() },
-			{ href: '/settings/admin/application-configuration', label: m.application_configuration() }
-		];
+	const adminLinks = [
+		{ href: '/settings/admin/users', label: m.users() },
+		{ href: '/settings/admin/user-groups', label: m.user_groups() },
+		{ href: '/settings/admin/oidc-clients', label: m.oidc_clients() },
+		{ href: '/settings/admin/api-keys', label: m.api_keys() },
+		{ href: '/settings/admin/application-configuration', label: m.application_configuration() }
+	];
+
+	if (user?.isAdmin || $userStore?.isAdmin) {
+		links.push(...adminLinks);
 	}
 </script>
 
 <section>
 	<div class="bg-muted/40 flex min-h-[calc(100vh-64px)] w-full flex-col justify-between">
 		<main
-			class="mx-auto flex w-full max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row"
+			in:fade={{ duration: 300 }}
+			class="mx-auto flex w-full max-w-[1640px] flex-col gap-x-8 gap-y-8 overflow-hidden p-4 md:p-8 lg:flex-row"
 		>
 			<div class="min-w-[200px] xl:min-w-[250px]">
-				<div class="mx-auto grid w-full gap-2">
-					<h1 class="mb-5 text-3xl font-semibold">{m.settings()}</h1>
+				<div in:fly={{ x: -15, duration: 300 }} class="sticky top-6">
+					<div class="mx-auto grid w-full gap-2">
+						<h1 class="mb-4 flex items-center gap-2 text-2xl font-semibold">
+							<LucideSettings class="h-5 w-5" />
+							{m.settings()}
+						</h1>
+					</div>
+					<nav class="text-muted-foreground grid gap-2 text-sm">
+						{#each links as { href, label }, i}
+							<a
+								{href}
+								class={`animate-fade-in ${
+									page.url.pathname.startsWith(href)
+										? 'text-primary bg-card rounded-md px-3 py-1.5 font-medium shadow-sm transition-all'
+										: 'hover:text-foreground hover:bg-muted/70 rounded-md px-3 py-1.5 transition-all hover:-translate-y-[2px] hover:shadow-sm'
+								}`}
+								style={`animation-delay: ${150 + i * 75}ms;`}
+							>
+								{label}
+							</a>
+						{/each}
+						{#if $userStore?.isAdmin && versionInformation.isUpToDate === false}
+							<a
+								href="https://github.com/pocket-id/pocket-id/releases/latest"
+								target="_blank"
+								class="animate-fade-in hover:text-foreground hover:bg-muted/70 mt-1 flex items-center gap-2 rounded-md px-3 py-1.5 text-orange-500 transition-all hover:-translate-y-[2px] hover:shadow-sm"
+								style={`animation-delay: ${150 + links.length * 75}ms;`}
+							>
+								{m.update_pocket_id()}
+								<LucideExternalLink class="my-auto inline-block h-3 w-3" />
+							</a>
+						{/if}
+					</nav>
 				</div>
-				<nav class="text-muted-foreground grid gap-4 text-sm">
-					{#each links as { href, label }}
-						<a {href} class={$page.url.pathname.startsWith(href) ? 'text-primary font-bold' : ''}>
-							{label}
-						</a>
-					{/each}
-					{#if $userStore?.isAdmin && versionInformation.isUpToDate === false}
-						<a
-							href="https://github.com/pocket-id/pocket-id/releases/latest"
-							target="_blank"
-							class="flex items-center gap-2"
-						>
-							{m.update_pocket_id()} <LucideExternalLink class="my-auto inline-block h-3 w-3" />
-						</a>
-					{/if}
-				</nav>
 			</div>
-			<div class="flex w-full flex-col gap-5 overflow-x-hidden">
-				{@render children()}
+			<div class="flex w-full flex-col gap-4 overflow-hidden">
+				<FadeWrapper>
+					{@render children()}
+				</FadeWrapper>
 			</div>
 		</main>
-		<div class="flex flex-col items-center">
+		<div class="animate-fade-in flex flex-col items-center" style="animation-delay: 400ms;">
 			<p class="text-muted-foreground py-3 text-xs">
-				{m.powered_by()} <a
-					class="text-foreground"
+				{m.powered_by()}
+				<a
+					class="text-foreground transition-all hover:underline"
 					href="https://github.com/pocket-id/pocket-id"
 					target="_blank">Pocket ID</a
 				>

frontend/src/routes/settings/account/+page.svelte

@@ -10,9 +10,14 @@
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast, getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import { startRegistration } from '@simplewebauthn/browser';
-	import { LucideAlertTriangle } from 'lucide-svelte';
+	import {
+		KeyRound,
+		Languages,
+		LucideAlertTriangle,
+		RectangleEllipsis,
+		UserCog
+	} from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
-	import ProfilePictureSettings from '../../../lib/components/form/profile-picture-settings.svelte';
 	import AccountForm from './account-form.svelte';
 	import LocalePicker from './locale-picker.svelte';
 	import LoginCodeModal from './login-code-modal.svelte';
@@ -28,15 +33,6 @@
 	const userService = new UserService();
 	const webauthnService = new WebAuthnService();
 
-	async function resetProfilePicture() {
-		await userService
-			.resetCurrentUserProfilePicture()
-			.then(() =>
-				toast.success('Profile picture has been reset. It may take a few minutes to update.')
-			)
-			.catch(axiosErrorToast);
-	}
-
 	async function updateAccount(user: UserCreate) {
 		let success = true;
 		await userService
@@ -50,13 +46,6 @@
 		return success;
 	}
 
-	async function updateProfilePicture(image: File) {
-		await userService
-			.updateCurrentUsersProfilePicture(image)
-			.then(() => toast.success(m.profile_picture_updated_successfully()))
-			.catch(axiosErrorToast);
-	}
-
 	async function createPasskey() {
 		try {
 			const opts = await webauthnService.getRegistrationOptions();
@@ -76,94 +65,119 @@
 </svelte:head>
 
 {#if passkeys.length == 0}
-	<Alert.Root variant="warning">
+	<Alert.Root variant="warning" class="flex gap-3">
 		<LucideAlertTriangle class="size-4" />
-		<Alert.Title>{m.passkey_missing()}</Alert.Title>
-		<Alert.Description
-			>{m.please_provide_a_passkey_to_prevent_losing_access_to_your_account()}</Alert.Description
-		>
+		<div>
+			<Alert.Title class="font-semibold">{m.passkey_missing()}</Alert.Title>
+			<Alert.Description class="text-sm">
+				{m.please_provide_a_passkey_to_prevent_losing_access_to_your_account()}
+			</Alert.Description>
+		</div>
 	</Alert.Root>
 {:else if passkeys.length == 1}
-	<Alert.Root variant="warning" dismissibleId="single-passkey">
+	<Alert.Root variant="warning" dismissibleId="single-passkey" class="flex gap-3">
 		<LucideAlertTriangle class="size-4" />
-		<Alert.Title>{m.single_passkey_configured()}</Alert.Title>
-		<Alert.Description>{m.it_is_recommended_to_add_more_than_one_passkey()}</Alert.Description>
+		<div>
+			<Alert.Title class="font-semibold">{m.single_passkey_configured()}</Alert.Title>
+			<Alert.Description class="text-sm">
+				{m.it_is_recommended_to_add_more_than_one_passkey()}
+			</Alert.Description>
+		</div>
 	</Alert.Root>
 {/if}
 
+<!-- Account details card -->
 <fieldset
 	disabled={!$appConfigStore.allowOwnAccountEdit ||
 		(!!account.ldapId && $appConfigStore.ldapEnabled)}
 >
 	<Card.Root>
 		<Card.Header>
-			<Card.Title>{m.account_details()}</Card.Title>
+			<Card.Title>
+				<UserCog class="text-primary/80 h-5 w-5" />
+				{m.account_details()}
+			</Card.Title>
 		</Card.Header>
 		<Card.Content>
-			<AccountForm {account} callback={updateAccount} />
+			<AccountForm
+				{account}
+				userId={account.id}
+				callback={updateAccount}
+				isLdapUser={!!account.ldapId}
+			/>
 		</Card.Content>
 	</Card.Root>
 </fieldset>
 
-<Card.Root>
-	<Card.Content class="pt-6">
-		<ProfilePictureSettings
-			userId={account.id}
-			isLdapUser={!!account.ldapId}
-			updateCallback={updateProfilePicture}
-			resetCallback={resetProfilePicture}
-		/>
-	</Card.Content>
-</Card.Root>
-
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.passkeys()}</Card.Title>
-				<Card.Description class="mt-1">
-					{m.manage_your_passkeys_that_you_can_use_to_authenticate_yourself()}
-				</Card.Description>
+<!-- Passkey management card -->
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<KeyRound class="text-primary/80 h-5 w-5" />
+						{m.passkeys()}
+					</Card.Title>
+					<Card.Description>
+						{m.manage_your_passkeys_that_you_can_use_to_authenticate_yourself()}
+					</Card.Description>
+				</div>
+				<Button variant="outline" class="ml-3" on:click={createPasskey}>
+					{m.add_passkey()}
+				</Button>
 			</div>
-			<Button size="sm" class="ml-3" on:click={createPasskey}>{m.add_passkey()}</Button>
-		</div>
-	</Card.Header>
-	{#if passkeys.length != 0}
-		<Card.Content>
-			<PasskeyList bind:passkeys />
-		</Card.Content>
-	{/if}
-</Card.Root>
+		</Card.Header>
+		{#if passkeys.length != 0}
+			<Card.Content>
+				<PasskeyList bind:passkeys />
+			</Card.Content>
+		{/if}
+	</Card.Root>
+</div>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.login_code()}</Card.Title>
-				<Card.Description class="mt-1">
-					{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
-				</Card.Description>
+<!-- Login code card -->
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<RectangleEllipsis class="text-primary/80 h-5 w-5" />
+						{m.login_code()}
+					</Card.Title>
+					<Card.Description>
+						{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
+					</Card.Description>
+				</div>
+				<Button variant="outline" on:click={() => (showLoginCodeModal = true)}>
+					{m.create()}
+				</Button>
 			</div>
-			<Button size="sm" class="ml-auto" on:click={() => (showLoginCodeModal = true)}
-				>{m.create()}</Button
-			>
-		</div>
-	</Card.Header>
-</Card.Root>
+		</Card.Header>
+	</Card.Root>
+</div>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.language()}</Card.Title>
-				<Card.Description class="mt-1">
-					{m.select_the_language_you_want_to_use()}
-				</Card.Description>
+<!-- Language selection card -->
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<Languages class="text-primary/80 h-5 w-5" />
+						{m.language()}
+					</Card.Title>
+
+					<Card.Description>
+						{m.select_the_language_you_want_to_use()}
+					</Card.Description>
+				</div>
+				<LocalePicker />
 			</div>
-			<LocalePicker />
-		</div>
-	</Card.Header>
-</Card.Root>
+		</Card.Header>
+	</Card.Root>
+</div>
 
 <RenamePasskeyModal
 	bind:passkey={passkeyToRename}

frontend/src/routes/settings/account/account-form.svelte

@@ -1,21 +1,32 @@
 <script lang="ts">
 	import FormInput from '$lib/components/form/form-input.svelte';
+	import ProfilePictureSettings from '$lib/components/form/profile-picture-settings.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
 	import type { UserCreate } from '$lib/types/user.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { createForm } from '$lib/utils/form-util';
+	import { BookUser } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';
 
 	let {
 		callback,
-		account
+		account,
+		userId,
+		isLdapUser = false
 	}: {
 		account: UserCreate;
+		userId: string;
 		callback: (user: UserCreate) => Promise<boolean>;
+		isLdapUser?: boolean;
 	} = $props();
 
 	let isLoading = $state(false);
 
+	const userService = new UserService();
+
 	const formSchema = z.object({
 		firstName: z.string().min(1).max(50),
 		lastName: z.string().min(1).max(50),
@@ -23,44 +34,70 @@
 			.string()
 			.min(2)
 			.max(30)
-			.regex(
-				/^[a-z0-9_@.-]+$/,
-				m.username_can_only_contain()
-			),
+			.regex(/^[a-z0-9_@.-]+$/, m.username_can_only_contain()),
 		email: z.string().email(),
 		isAdmin: z.boolean()
 	});
 	type FormSchema = typeof formSchema;
 
 	const { inputs, ...form } = createForm<FormSchema>(formSchema, account);
+
 	async function onSubmit() {
 		const data = form.validate();
 		if (!data) return;
 		isLoading = true;
 		await callback(data);
-		// Reset form if user was successfully created
 		isLoading = false;
 	}
+
+	async function updateProfilePicture(image: File) {
+		await userService
+			.updateProfilePicture(userId, image)
+			.then(() => toast.success(m.profile_picture_updated_successfully()))
+			.catch(axiosErrorToast);
+	}
+
+	async function resetProfilePicture() {
+		await userService
+			.resetProfilePicture(userId)
+			.then(() => toast.success(m.profile_picture_has_been_reset()))
+			.catch(axiosErrorToast);
+	}
 </script>
 
-<form onsubmit={onSubmit}>
-	<div class="flex flex-col gap-3 sm:flex-row">
-		<div class="w-full">
-			<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+<form onsubmit={onSubmit} class="space-y-6">
+	<!-- Profile Picture Section -->
+	<ProfilePictureSettings
+		{userId}
+		{isLdapUser}
+		updateCallback={updateProfilePicture}
+		resetCallback={resetProfilePicture}
+	/>
+
+	<!-- Divider -->
+	<hr class="border-border" />
+
+	<!-- User Information -->
+	<div>
+		<div class="flex flex-col gap-3 sm:flex-row">
+			<div class="w-full">
+				<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+			</div>
+			<div class="w-full">
+				<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+			</div>
 		</div>
-		<div class="w-full">
-			<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+		<div class="mt-3 flex flex-col gap-3 sm:flex-row">
+			<div class="w-full">
+				<FormInput label={m.email()} bind:input={$inputs.email} />
+			</div>
+			<div class="w-full">
+				<FormInput label={m.username()} bind:input={$inputs.username} />
+			</div>
 		</div>
 	</div>
-	<div class="mt-3 flex flex-col gap-3 sm:flex-row">
-		<div class="w-full">
-			<FormInput label={m.email()} bind:input={$inputs.email} />
-		</div>
-		<div class="w-full">
-			<FormInput label={m.username()} bind:input={$inputs.username} />
-		</div>
-	</div>
-	<div class="mt-5 flex justify-end">
+
+	<div class="flex justify-end pt-2">
 		<Button {isLoading} type="submit">{m.save()}</Button>
 	</div>
 </form>

frontend/src/routes/settings/account/passkey-list.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
-	import { Button } from '$lib/components/ui/button';
-	import { Separator } from '$lib/components/ui/separator';
+	import GlassRowItem from '$lib/components/glass-row-item.svelte';
+	import { m } from '$lib/paraglide/messages';
 	import WebauthnService from '$lib/services/webauthn-service';
 	import type { Passkey } from '$lib/types/passkey.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideKeyRound, LucidePencil, LucideTrash } from 'lucide-svelte';
+	import { LucideKeyRound } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import RenamePasskeyModal from './rename-passkey-modal.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { passkeys = $bindable() }: { passkeys: Passkey[] } = $props();
 
@@ -37,38 +36,18 @@
 	}
 </script>
 
-<div class="flex flex-col">
-	{#each passkeys as passkey, i}
-		<div class="flex justify-between">
-			<div class="flex items-center">
-				<LucideKeyRound class="mr-4 inline h-6 w-6" />
-				<div>
-					<p>{passkey.name}</p>
-					<p class="text-xs text-muted-foreground">
-						{m.added_on()} {new Date(passkey.createdAt).toLocaleDateString()}
-					</p>
-				</div>
-			</div>
-			<div>
-				<Button
-					on:click={() => (passkeyToRename = passkey)}
-					size="sm"
-					variant="outline"
-					aria-label={m.rename()}><LucidePencil class="h-3 w-3" /></Button
-				>
-				<Button
-					on:click={() => deletePasskey(passkey)}
-					size="sm"
-					variant="outline"
-					aria-label={m.delete()}><LucideTrash class="h-3 w-3 text-red-500" /></Button
-				>
-			</div>
-		</div>
-		{#if i !== passkeys.length - 1}
-			<Separator class="my-2" />
-		{/if}
+<div class="space-y-3">
+	{#each passkeys as passkey}
+		<GlassRowItem
+			label={passkey.name}
+			description={m.added_on() + ' ' + new Date(passkey.createdAt).toLocaleDateString()}
+			icon={LucideKeyRound}
+			onRename={() => (passkeyToRename = passkey)}
+			onDelete={() => deletePasskey(passkey)}
+		/>
 	{/each}
 </div>
+
 <RenamePasskeyModal
 	bind:passkey={passkeyToRename}
 	callback={async () => (passkeys = await webauthnService.listCredentials())}

frontend/src/routes/settings/admin/api-keys/+page.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import { m } from '$lib/paraglide/messages';
 	import ApiKeyService from '$lib/services/api-key-service';
 	import type { ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus } from 'lucide-svelte';
+	import { LucideMinus, ShieldEllipsis, ShieldPlus } from 'lucide-svelte';
 	import { slide } from 'svelte/transition';
 	import ApiKeyDialog from './api-key-dialog.svelte';
 	import ApiKeyForm from './api-key-form.svelte';
 	import ApiKeyList from './api-key-list.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let apiKeys = $state(data.apiKeys);
@@ -39,38 +39,48 @@
 	<title>{m.api_keys()}</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.create_api_key()}</Card.Title>
-				<Card.Description>{m.add_a_new_api_key_for_programmatic_access()}</Card.Description>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<ShieldPlus class="text-primary/80 h-5 w-5" />
+						{m.create_api_key()}
+					</Card.Title>
+					<Card.Description>{m.add_a_new_api_key_for_programmatic_access()}</Card.Description>
+				</div>
+				{#if !expandAddApiKey}
+					<Button on:click={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
+				{:else}
+					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddApiKey = false)}>
+						<LucideMinus class="h-5 w-5" />
+					</Button>
+				{/if}
 			</div>
-			{#if !expandAddApiKey}
-				<Button on:click={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
-			{:else}
-				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddApiKey = false)}>
-					<LucideMinus class="h-5 w-5" />
-				</Button>
-			{/if}
-		</div>
-	</Card.Header>
-	{#if expandAddApiKey}
-		<div transition:slide>
-			<Card.Content>
-				<ApiKeyForm callback={createApiKey} />
-			</Card.Content>
-		</div>
-	{/if}
-</Card.Root>
+		</Card.Header>
+		{#if expandAddApiKey}
+			<div transition:slide>
+				<Card.Content>
+					<ApiKeyForm callback={createApiKey} />
+				</Card.Content>
+			</div>
+		{/if}
+	</Card.Root>
+</div>
 
-<Card.Root class="mt-6">
-	<Card.Header>
-		<Card.Title>{m.manage_api_keys()}</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<ApiKeyList {apiKeys} requestOptions={apiKeysRequestOptions} />
-	</Card.Content>
-</Card.Root>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>
+				<ShieldEllipsis class="text-primary/80 h-5 w-5" />
+				{m.manage_api_keys()}
+			</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<ApiKeyList {apiKeys} requestOptions={apiKeysRequestOptions} />
+		</Card.Content>
+	</Card.Root>
+</div>
 
 <ApiKeyDialog bind:apiKeyResponse />

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
+	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideImage, Mail, SlidersHorizontal, UserSearch } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
 	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
 	import AppConfigLdapForm from './forms/app-config-ldap-form.svelte';
 	import UpdateApplicationImages from './update-application-images.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let appConfig = $state(data.appConfig);
@@ -56,26 +57,41 @@
 	<title>{m.application_configuration()}</title>
 </svelte:head>
 
-<CollapsibleCard id="application-configuration-general" title={m.general()} defaultExpanded>
-	<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
-</CollapsibleCard>
+<div>
+	<CollapsibleCard
+		id="application-configuration-general"
+		icon={SlidersHorizontal}
+		title={m.general()}
+		defaultExpanded
+	>
+		<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
+	</CollapsibleCard>
+</div>
 
-<CollapsibleCard
-	id="application-configuration-email"
-	title={m.email()}
-	description={m.enable_email_notifications_to_alert_users_when_a_login_is_detected_from_a_new_device_or_location()}
->
-	<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
-</CollapsibleCard>
+<div>
+	<CollapsibleCard
+		id="application-configuration-email"
+		icon={Mail}
+		title={m.email()}
+		description={m.enable_email_notifications_to_alert_users_when_a_login_is_detected_from_a_new_device_or_location()}
+	>
+		<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
+	</CollapsibleCard>
+</div>
 
-<CollapsibleCard
-	id="application-configuration-ldap"
-	title={m.ldap()}
-	description={m.configure_ldap_settings_to_sync_users_and_groups_from_an_ldap_server()}
->
-	<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
-</CollapsibleCard>
+<div>
+	<CollapsibleCard
+		id="application-configuration-ldap"
+		icon={UserSearch}
+		title={m.ldap()}
+		description={m.configure_ldap_settings_to_sync_users_and_groups_from_an_ldap_server()}
+	>
+		<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
+	</CollapsibleCard>
+</div>
 
-<CollapsibleCard id="application-configuration-images" title={m.images()}>
-	<UpdateApplicationImages callback={updateImages} />
-</CollapsibleCard>
+<div>
+	<CollapsibleCard id="application-configuration-images" icon={LucideImage} title={m.images()}>
+		<UpdateApplicationImages callback={updateImages} />
+	</CollapsibleCard>
+</div>

frontend/src/routes/settings/admin/oidc-clients/+page.svelte

@@ -2,17 +2,17 @@
 	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import clientSecretStore from '$lib/stores/client-secret-store';
 	import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus } from 'lucide-svelte';
+	import { LucideMinus, ShieldCheck, ShieldPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import OIDCClientForm from './oidc-client-form.svelte';
 	import OIDCClientList from './oidc-client-list.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let clients = $state(data.clients);
@@ -43,36 +43,50 @@
 	<title>{m.oidc_clients()}</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.create_oidc_client()}</Card.Title>
-				<Card.Description>{m.add_a_new_oidc_client_to_appname({ appName: $appConfigStore.appName})}</Card.Description>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<ShieldPlus class="text-primary/80 h-5 w-5" />
+						{m.create_oidc_client()}
+					</Card.Title>
+					<Card.Description
+						>{m.add_a_new_oidc_client_to_appname({
+							appName: $appConfigStore.appName
+						})}</Card.Description
+					>
+				</div>
+				{#if !expandAddClient}
+					<Button on:click={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
+				{:else}
+					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddClient = false)}>
+						<LucideMinus class="h-5 w-5" />
+					</Button>
+				{/if}
 			</div>
-			{#if !expandAddClient}
-				<Button on:click={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
-			{:else}
-				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddClient = false)}>
-					<LucideMinus class="h-5 w-5" />
-				</Button>
-			{/if}
-		</div>
-	</Card.Header>
-	{#if expandAddClient}
-		<div transition:slide>
-			<Card.Content>
-				<OIDCClientForm callback={createOIDCClient} />
-			</Card.Content>
-		</div>
-	{/if}
-</Card.Root>
+		</Card.Header>
+		{#if expandAddClient}
+			<div transition:slide>
+				<Card.Content>
+					<OIDCClientForm callback={createOIDCClient} />
+				</Card.Content>
+			</div>
+		{/if}
+	</Card.Root>
+</div>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>{m.manage_oidc_clients()}</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<OIDCClientList {clients} requestOptions={clientsRequestOptions} />
-	</Card.Content>
-</Card.Root>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>
+				<ShieldCheck class="text-primary/80 h-5 w-5" />
+				{m.manage_oidc_clients()}
+			</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<OIDCClientList {clients} requestOptions={clientsRequestOptions} />
+		</Card.Content>
+	</Card.Root>
+</div>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte

@@ -26,7 +26,7 @@
 
 	async function deleteClient(client: OidcClient) {
 		openConfirmDialog({
-			title: m.delete_name({name: client.name}),
+			title: m.delete_name({ name: client.name }),
 			message: m.are_you_sure_you_want_to_delete_this_oidc_client(),
 			confirm: {
 				label: m.delete(),
@@ -58,12 +58,14 @@
 	{#snippet rows({ item })}
 		<Table.Cell class="w-8 font-medium">
 			{#if item.hasLogo}
-				<div class="h-8 w-8">
-					<img
-						class="m-auto max-h-full max-w-full object-contain"
-						src="/api/oidc/clients/{item.id}/logo"
-						alt={m.name_logo({name: item.name})}
-					/>
+				<div class="bg-secondary rounded-2xl p-3">
+					<div class="h-8 w-8">
+						<img
+							class="m-auto max-h-full max-w-full object-contain"
+							src="/api/oidc/clients/{item.id}/logo"
+							alt={m.name_logo({ name: item.name })}
+						/>
+					</div>
 				</div>
 			{/if}
 		</Table.Cell>
@@ -75,8 +77,11 @@
 				variant="outline"
 				aria-label={m.edit()}><LucidePencil class="h-3 w-3 " /></Button
 			>
-			<Button on:click={() => deleteClient(item)} size="sm" variant="outline" aria-label={m.delete()}
-				><LucideTrash class="h-3 w-3 text-red-500" /></Button
+			<Button
+				on:click={() => deleteClient(item)}
+				size="sm"
+				variant="outline"
+				aria-label={m.delete()}><LucideTrash class="h-3 w-3 text-red-500" /></Button
 			>
 		</Table.Cell>
 	{/snippet}

frontend/src/routes/settings/admin/user-groups/+page.svelte

@@ -2,16 +2,15 @@
 	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import { m } from '$lib/paraglide/messages';
 	import UserGroupService from '$lib/services/user-group-service';
-	import type { Paginated } from '$lib/types/pagination.type';
-	import type { UserGroupCreate, UserGroupWithUserCount } from '$lib/types/user-group.type';
+	import type { UserGroupCreate } from '$lib/types/user-group.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus } from 'lucide-svelte';
+	import { LucideMinus, UserCog, UserPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import UserGroupForm from './user-group-form.svelte';
 	import UserGroupList from './user-group-list.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let userGroups = $state(data.userGroups);
@@ -40,36 +39,47 @@
 	<title>{m.user_groups()}</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.create_user_group()}</Card.Title>
-				<Card.Description>{m.create_a_new_group_that_can_be_assigned_to_users()}</Card.Description>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<UserPlus class="text-primary/80 h-5 w-5" />
+						{m.create_user_group()}
+					</Card.Title>
+					<Card.Description>{m.create_a_new_group_that_can_be_assigned_to_users()}</Card.Description
+					>
+				</div>
+				{#if !expandAddUserGroup}
+					<Button on:click={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
+				{:else}
+					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
+						<LucideMinus class="h-5 w-5" />
+					</Button>
+				{/if}
 			</div>
-			{#if !expandAddUserGroup}
-				<Button on:click={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
-			{:else}
-				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
-					<LucideMinus class="h-5 w-5" />
-				</Button>
-			{/if}
-		</div>
-	</Card.Header>
-	{#if expandAddUserGroup}
-		<div transition:slide>
-			<Card.Content>
-				<UserGroupForm callback={createUserGroup} />
-			</Card.Content>
-		</div>
-	{/if}
-</Card.Root>
+		</Card.Header>
+		{#if expandAddUserGroup}
+			<div transition:slide>
+				<Card.Content>
+					<UserGroupForm callback={createUserGroup} />
+				</Card.Content>
+			</div>
+		{/if}
+	</Card.Root>
+</div>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>{m.manage_user_groups()}</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<UserGroupList {userGroups} requestOptions={userGroupsRequestOptions} />
-	</Card.Content>
-</Card.Root>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>
+				<UserCog class="text-primary/80 h-5 w-5" />
+				{m.manage_user_groups()}
+			</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<UserGroupList {userGroups} requestOptions={userGroupsRequestOptions} />
+		</Card.Content>
+	</Card.Root>
+</div>

frontend/src/routes/settings/admin/users/+page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus } from 'lucide-svelte';
+	import { LucideMinus, UserPen, UserPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import UserForm from './user-form.svelte';
 	import UserList from './user-list.svelte';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let users = $state(data.users);
@@ -39,36 +39,50 @@
 	<title>{m.users()}</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<div class="flex items-center justify-between">
-			<div>
-				<Card.Title>{m.create_user()}</Card.Title>
-				<Card.Description>{m.add_a_new_user_to_appname({ appName: $appConfigStore.appName })}.</Card.Description>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<UserPlus class="text-primary/80 h-5 w-5" />
+						{m.create_user()}
+					</Card.Title>
+					<Card.Description
+						>{m.add_a_new_user_to_appname({
+							appName: $appConfigStore.appName
+						})}.</Card.Description
+					>
+				</div>
+				{#if !expandAddUser}
+					<Button on:click={() => (expandAddUser = true)}>{m.add_user()}</Button>
+				{:else}
+					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUser = false)}>
+						<LucideMinus class="h-5 w-5" />
+					</Button>
+				{/if}
 			</div>
-			{#if !expandAddUser}
-				<Button on:click={() => (expandAddUser = true)}>{m.add_user()}</Button>
-			{:else}
-				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUser = false)}>
-					<LucideMinus class="h-5 w-5" />
-				</Button>
-			{/if}
-		</div>
-	</Card.Header>
-	{#if expandAddUser}
-		<div transition:slide>
-			<Card.Content>
-				<UserForm callback={createUser} />
-			</Card.Content>
-		</div>
-	{/if}
-</Card.Root>
+		</Card.Header>
+		{#if expandAddUser}
+			<div transition:slide>
+				<Card.Content>
+					<UserForm callback={createUser} />
+				</Card.Content>
+			</div>
+		{/if}
+	</Card.Root>
+</div>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>{m.manage_users()}</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<UserList {users} requestOptions={usersRequestOptions} />
-	</Card.Content>
-</Card.Root>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>
+				<UserPen class="text-primary/80 h-5 w-5" />
+				{m.manage_users()}
+			</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<UserList {users} requestOptions={usersRequestOptions} />
+		</Card.Content>
+	</Card.Root>
+</div>

frontend/src/routes/settings/audit-log/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { m } from '$lib/paraglide/messages';
+	import { LogsIcon } from 'lucide-svelte';
 	import AuditLogList from './audit-log-list.svelte';
 
 	let { data } = $props();
-	let { auditLogs } = data;
 	let auditLogsRequestOptions = $state(data.auditLogsRequestOptions);
 </script>
 
@@ -12,14 +12,17 @@
 	<title>{m.audit_log()}</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>{m.audit_log()}</Card.Title>
-		<Card.Description class="mt-1"
-			>{m.see_your_account_activities_from_the_last_3_months()}</Card.Description
-		>
-	</Card.Header>
-	<Card.Content>
-		<AuditLogList auditLogs={data.auditLogs} requestOptions={auditLogsRequestOptions} />
-	</Card.Content>
-</Card.Root>
+<div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>
+				<LogsIcon class="text-primary/80 h-5 w-5" />
+				{m.audit_log()}
+			</Card.Title>
+			<Card.Description>{m.see_your_account_activities_from_the_last_3_months()}</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<AuditLogList auditLogs={data.auditLogs} requestOptions={auditLogsRequestOptions} />
+		</Card.Content>
+	</Card.Root>
+</div>