feat(ui): modern shadcn/ui theme with violet accent across all pages

Add shadcn/ui (Radix + Tailwind 4) components, zinc/violet theme tokens and self-hosted Inter. New header with user menu, Steam cover art, skeletons and toasts. Replace @mdi/font with lucide-react. Fix: top-owned list on the landing page only showed with top-played entries; numbers use the app language.

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>tobeplayed-frontend</title>
+    <title>Game Log</title>
   </head>
   <body>
     <div id="root"></div>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package.json

@@ -10,16 +10,22 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
     "@hookform/resolvers": "^3.10.0",
-    "@mdi/font": "~7.4.47",
     "@tailwindcss/vite": "~4.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "i18next": "~26.4.2",
     "i18next-http-backend": "~3.0.6",
+    "lucide-react": "^1.48.0",
+    "radix-ui": "^1.6.7",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.88.0",
     "react-i18next": "~17.0.15",
     "react-router-dom": "~7.18.4",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {
@@ -27,6 +33,7 @@
     "autoprefixer": "~10.6.1",
     "postcss": "~8.5.28",
     "tailwindcss": "~4.3.3",
+    "tw-animate-css": "^1.4.0",
     "vite": "^8.3.0",
     "vitest": "^5.0.1"
   }

public/i18n/de.json

@@ -32,7 +32,7 @@
     "TITLE": "Einstellungen",
     "LOADING": "Einstellungen werden geladen …",
     "ACCOUNT": "Konto",
-    "PREFERENCES": "Einstellungen",
+    "PREFERENCES": "Darstellung & Sprache",
     "STEAM": "Steam",
     "EMAIL": "Email",
     "ROLE": "Rolle",
@@ -72,7 +72,9 @@
     "STEAM_GAMES": "Steam Spiele",
     "NO_STEAM_ID": "Keine Steam-ID hinterlegt – jetzt in den Einstellungen eintragen",
     "MOST_PLAYED": "Meistgespielt",
-    "SHOW_ALL": "Alle anzeigen"
+    "SHOW_ALL": "Alle anzeigen",
+    "TO_LIBRARY": "Zur Bibliothek",
+    "WELCOME_BACK": "Willkommen zurück"
   },
   "LIBRARY": {
     "TITLE": "Spielebibliothek",
@@ -138,6 +140,10 @@
     "DASHBOARD": "Dashboard",
     "LIBRARY": "Bibliothek",
     "SETTINGS": "Einstellungen",
-    "TO_DASHBOARD": "Zum Dashboard"
+    "TO_DASHBOARD": "Zum Dashboard",
+    "MENU": "Menü",
+    "LANGUAGE": "Sprache",
+    "DARK_MODE": "Dunkles Design",
+    "LIGHT_MODE": "Helles Design"
   }
 }

public/i18n/en.json

@@ -72,7 +72,9 @@
     "STEAM_GAMES": "Steam Games",
     "NO_STEAM_ID": "No Steam ID saved yet – add it in the settings",
     "MOST_PLAYED": "Most played",
-    "SHOW_ALL": "Show all"
+    "SHOW_ALL": "Show all",
+    "TO_LIBRARY": "Go to library",
+    "WELCOME_BACK": "Welcome back"
   },
   "LIBRARY": {
     "TITLE": "Game Library",
@@ -138,6 +140,10 @@
     "DASHBOARD": "Dashboard",
     "LIBRARY": "Library",
     "SETTINGS": "Settings",
-    "TO_DASHBOARD": "Go to dashboard"
+    "TO_DASHBOARD": "Go to dashboard",
+    "MENU": "Menu",
+    "LANGUAGE": "Language",
+    "DARK_MODE": "Dark mode",
+    "LIGHT_MODE": "Light mode"
   }
 }

src/App.jsx

@@ -1,4 +1,4 @@
-import {Link, NavLink, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
+import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {useEffect, useState} from 'react';
 
@@ -10,17 +10,13 @@ import RegistrationPage from './pages/RegistrationPage.jsx';
 import SettingsPage from './pages/SettingsPage.jsx';
 import GameLibrary from './pages/GameLibrary.jsx';
 import GameDetail from './pages/GameDetail.jsx';
-import {usePreferences} from './context/PreferencesContext.jsx';
+import AppHeader from './components/AppHeader.jsx';
+import {Toaster} from '@/components/ui/sonner';
+import {TooltipProvider} from '@/components/ui/tooltip';
 import {getValidToken} from './utils/auth.js';
 
-const navLinkClass = ({isActive}) =>
-    `flex items-center gap-1 text-sm font-bold transition-colors ${
-        isActive ? 'text-blue-600 dark:text-blue-400' : 'text-slate-600 dark:text-slate-300 hover:text-blue-500'
-    }`;
-
 function App() {
-    const {t, i18n} = useTranslation();
-    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+    const {t} = useTranslation();
     const [isAuthenticated, setIsAuthenticated] = useState(false);
 
     // Hooks for routing
@@ -31,10 +27,6 @@ function App() {
         setIsAuthenticated(!!getValidToken());
     }, [location]);
 
-    const toggleLanguage = () => {
-        setLanguage(i18n.language === 'de' ? 'en' : 'de');
-    };
-
     const handleLogout = () => {
         localStorage.removeItem('tbp_jwt');
         setIsAuthenticated(false);
@@ -42,52 +34,9 @@ function App() {
     };
 
     return (
-        <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
-            <header className="px-3 py-3 sm:p-4 flex justify-between items-center gap-3 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
-                <Link to={isAuthenticated ? '/dashboard' : '/'} className="font-black text-blue-600 dark:text-blue-500 text-xl sm:text-2xl flex items-center tracking-tight whitespace-nowrap">
-                    <i className="mdi mdi-controller mr-1 sm:mr-2 text-2xl sm:text-3xl"></i> Game Log
-                </Link>
-
-                {isAuthenticated && (
-                    <nav className="flex gap-4 sm:gap-6 items-center">
-                        <NavLink to="/dashboard" className={navLinkClass}>
-                            <i className="mdi mdi-view-dashboard text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.DASHBOARD')}</span>
-                        </NavLink>
-                        <NavLink to="/library" className={navLinkClass}>
-                            <i className="mdi mdi-gamepad-variant text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.LIBRARY')}</span>
-                        </NavLink>
-                        <NavLink to="/settings" className={navLinkClass}>
-                            <i className="mdi mdi-cog text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.SETTINGS')}</span>
-                        </NavLink>
-                    </nav>
-                )}
-
-                <div className="flex gap-3 sm:gap-5 items-center">
-                    <button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
-                        {i18n.language.toUpperCase()}
-                    </button>
-                    <button onClick={() => {
-                        setDarkMode(!isDarkMode);
-                    }} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
-                        <i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
-                    </button>
-                    {isAuthenticated ? (
-                        <>
-                            <button onClick={handleLogout} title={t('MAIN.LOGOUT')} className="bg-red-600 hover:bg-red-500 text-white px-3 sm:px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
-                                <i className="mdi mdi-logout sm:hidden"></i>
-                                <span className="hidden sm:inline">{t('MAIN.LOGOUT')}</span>
-                            </button>
-                        </>
-                    ) : (
-                        <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
-                            {t('MAIN.LOGIN')}
-                        </Link>
-                    )}
-                </div>
-            </header>
+        <TooltipProvider>
+            <div className="min-h-screen flex flex-col bg-background text-foreground font-sans">
+                <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
 
                 <main className="grow flex flex-col">
                     <Routes>
@@ -102,12 +51,14 @@ function App() {
                     </Routes>
                 </main>
 
-            <footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
-                <Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
+                <footer className="border-t py-6 text-center text-sm text-muted-foreground">
+                    <Link to="/impressum" className="font-medium hover:text-foreground transition-colors">
                         {t('IMPRINT.TITLE')}
                     </Link>
                 </footer>
             </div>
+            <Toaster richColors position="bottom-right"/>
+        </TooltipProvider>
     );
 }
 

src/components/AppHeader.jsx

@@ -0,0 +1,98 @@
+import {Link, NavLink} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {Gamepad2, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun, UserRound} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {usePreferences} from '@/context/PreferencesContext.jsx';
+import {cn} from '@/lib/utils';
+
+const NAV_ITEMS = [
+    {to: '/dashboard', labelKey: 'NAV.DASHBOARD', Icon: LayoutDashboard},
+    {to: '/library', labelKey: 'NAV.LIBRARY', Icon: Library},
+];
+
+const navLinkClass = ({isActive}) => cn(
+    'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+    isActive
+        ? 'bg-accent text-accent-foreground'
+        : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+);
+
+export default function AppHeader({isAuthenticated, onLogout}) {
+    const {t, i18n} = useTranslation();
+    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+
+    const toggleLanguage = () => setLanguage(i18n.language === 'de' ? 'en' : 'de');
+    const toggleTheme = () => setDarkMode(!isDarkMode);
+    const ThemeIcon = isDarkMode ? Sun : Moon;
+
+    return (
+        <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="mx-auto flex h-16 max-w-5xl items-center gap-2 px-4 md:px-8">
+                <Link to={isAuthenticated ? '/dashboard' : '/'} className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
+                    <span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                        <Gamepad2 className="size-5"/>
+                    </span>
+                    <span className="text-lg">Game Log</span>
+                </Link>
+
+                {isAuthenticated && (
+                    <nav className="flex items-center gap-1">
+                        {NAV_ITEMS.map(({to, labelKey, Icon}) => (
+                            <NavLink key={to} to={to} className={navLinkClass} title={t(labelKey)}>
+                                <Icon className="size-4"/>
+                                <span className="hidden sm:inline">{t(labelKey)}</span>
+                            </NavLink>
+                        ))}
+                    </nav>
+                )}
+
+                <div className="ml-auto flex items-center gap-1">
+                    {isAuthenticated ? (
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="icon" aria-label={t('NAV.MENU')}>
+                                    <UserRound className="size-5"/>
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-52">
+                                <DropdownMenuItem asChild>
+                                    <Link to="/settings"><Settings/>{t('NAV.SETTINGS')}</Link>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={toggleLanguage}>
+                                    <Languages/>{t('NAV.LANGUAGE')}: {i18n.language.toUpperCase()}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={toggleTheme}>
+                                    <ThemeIcon/>{t(isDarkMode ? 'NAV.LIGHT_MODE' : 'NAV.DARK_MODE')}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator/>
+                                <DropdownMenuItem variant="destructive" onSelect={onLogout}>
+                                    <LogOut/>{t('MAIN.LOGOUT')}
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    ) : (
+                        <>
+                            <Button variant="ghost" size="sm" onClick={toggleLanguage}>
+                                {i18n.language.toUpperCase()}
+                            </Button>
+                            <Button variant="ghost" size="icon" onClick={toggleTheme} aria-label={t(isDarkMode ? 'NAV.LIGHT_MODE' : 'NAV.DARK_MODE')}>
+                                <ThemeIcon className="size-5"/>
+                            </Button>
+                            <Button asChild className="ml-1">
+                                <Link to="/login">{t('MAIN.LOGIN')}</Link>
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

src/components/AuthLayout.jsx

@@ -0,0 +1,27 @@
+import {Gamepad2} from 'lucide-react';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+
+/**
+ * Centered card for the login and registration forms.
+ */
+export default function AuthLayout({title, description, children, footer}) {
+    return (
+        <div className="relative flex grow items-center justify-center px-4 py-12">
+            <div className="pointer-events-none absolute inset-x-0 top-0 h-80 bg-gradient-to-b from-primary/15 to-transparent"/>
+            <Card className="relative w-full max-w-md">
+                <CardHeader className="items-center text-center">
+                    <span className="mx-auto mb-2 flex size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+                        <Gamepad2 className="size-6"/>
+                    </span>
+                    <CardTitle className="text-2xl">{title}</CardTitle>
+                    {description && <CardDescription>{description}</CardDescription>}
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    {children}
+                    {footer && <p className="text-center text-sm text-muted-foreground">{footer}</p>}
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/FeedbackAlert.jsx

@@ -0,0 +1,14 @@
+import {CircleAlert, CircleCheck} from 'lucide-react';
+
+import {Alert, AlertDescription} from '@/components/ui/alert';
+
+export default function FeedbackAlert({message, isError}) {
+    if (!message) return null;
+    const Icon = isError ? CircleAlert : CircleCheck;
+    return (
+        <Alert variant={isError ? 'destructive' : 'default'}>
+            <Icon className={isError ? undefined : 'text-emerald-500'}/>
+            <AlertDescription>{message}</AlertDescription>
+        </Alert>
+    );
+}

src/components/FormField.jsx

@@ -0,0 +1,15 @@
+import {Label} from '@/components/ui/label';
+
+/**
+ * Label, input and the translated validation error of one form field.
+ * `error` is a react-hook-form field error whose message is an i18n key.
+ */
+export default function FormField({id, label, error, t, children}) {
+    return (
+        <div className="space-y-2">
+            <Label htmlFor={id}>{label}</Label>
+            {children}
+            {error && <p className="text-sm text-destructive">{t(error.message)}</p>}
+        </div>
+    );
+}

src/components/GameCover.jsx

@@ -0,0 +1,30 @@
+import {useState} from 'react';
+import {Gamepad2} from 'lucide-react';
+
+import {cn} from '@/lib/utils';
+import {coverUrl} from '@/utils/games.js';
+
+/**
+ * Steam store header (460x215). Falls back to a neutral tile when the app has no header image.
+ */
+export default function GameCover({appid, className}) {
+    const [failed, setFailed] = useState(false);
+
+    return (
+        <div className={cn('aspect-[460/215] overflow-hidden rounded-md bg-muted', className)}>
+            {failed ? (
+                <div className="flex size-full items-center justify-center text-muted-foreground">
+                    <Gamepad2 className="size-1/3 max-h-8"/>
+                </div>
+            ) : (
+                <img
+                    src={coverUrl(appid)}
+                    alt=""
+                    loading="lazy"
+                    className="size-full object-cover"
+                    onError={() => setFailed(true)}
+                />
+            )}
+        </div>
+    );
+}

src/components/StatCard.jsx

@@ -1,4 +1,7 @@
 import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+
+import {Card} from '@/components/ui/card';
 
 function useCountUp(target, durationMs = 1600) {
     const [value, setValue] = useState(0);
@@ -22,19 +25,20 @@ function useCountUp(target, durationMs = 1600) {
     return value;
 }
 
-export default function StatCard({label, value, icon, suffix}) {
+export default function StatCard({label, value, icon: Icon, suffix}) {
+    const {i18n} = useTranslation();
     const animated = useCountUp(value);
     return (
-        <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
-            {icon && (
-                <i className={`mdi ${icon} text-3xl text-blue-600 dark:text-blue-400 mb-2`}></i>
+        <Card className="gap-3 p-5">
+            {Icon && (
+                <span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <Icon className="size-4"/>
+                </span>
             )}
-            <div className="text-4xl font-black text-slate-900 dark:text-white tabular-nums">
-                {animated.toLocaleString()}{suffix ?? ''}
-            </div>
-            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mt-2 text-center">
-                {label}
-            </div>
+            <div className="text-3xl font-bold tracking-tight tabular-nums">
+                {animated.toLocaleString(i18n.language)}{suffix ?? ''}
             </div>
+            <div className="text-sm text-muted-foreground">{label}</div>
+        </Card>
     );
 }

src/components/SteamGameCount.jsx

@@ -1,43 +1,45 @@
-import React, {useState, useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
+import {ArrowRight, Gamepad2} from 'lucide-react';
+
+import {Card} from '@/components/ui/card';
+
+const DURATION_MS = 1000;
 
 const SteamGameCount = ({targetCount}) => {
     const {t} = useTranslation();
     const [count, setCount] = useState(0);
 
     useEffect(() => {
+        let frame;
         let startTime;
-        const duration = 1000;
-        const startCount = 0;
-
         const animate = (timestamp) => {
-            if (!startTime) startTime = timestamp;
-            const progress = Math.min((timestamp - startTime) / duration, 1);
-
-            const currentCount = Math.floor(progress * (targetCount - startCount) + startCount);
-            setCount(currentCount);
-
+            startTime ??= timestamp;
+            const progress = Math.min((timestamp - startTime) / DURATION_MS, 1);
+            setCount(Math.floor(progress * targetCount));
             if (progress < 1) {
-                requestAnimationFrame(animate);
+                frame = requestAnimationFrame(animate);
             }
         };
-
-        requestAnimationFrame(animate);
+        frame = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(frame);
     }, [targetCount]);
 
     return (
-        <Link
-            to="/library"
-            className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
-        >
-            <div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
-                {count}
+        <Card className="relative justify-between overflow-hidden p-6">
+            <div className="absolute -right-6 -top-6 size-32 rounded-full bg-primary/10"/>
+            <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <Gamepad2 className="size-5"/>
             </div>
-            <div className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
-                {t('DASHBOARD.STEAM_GAMES')}
+            <div>
+                <div className="text-5xl font-bold tracking-tight tabular-nums">{count}</div>
+                <div className="mt-1 text-sm text-muted-foreground">{t('DASHBOARD.STEAM_GAMES')}</div>
             </div>
+            <Link to="/library" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
+                {t('DASHBOARD.TO_LIBRARY')} <ArrowRight className="size-4"/>
             </Link>
+        </Card>
     );
 };
 

src/components/SyncStatusBadge.jsx

@@ -1,4 +1,5 @@
 import {useTranslation} from 'react-i18next';
+import {CircleAlert, CircleCheck, RefreshCw} from 'lucide-react';
 
 const formatRelative = (iso, locale) => {
     if (!iso) return null;
@@ -16,8 +17,8 @@ export default function SyncStatusBadge({status, lastSyncedAt, isRunning}) {
 
     if (isRunning) {
         return (
-            <div className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
-                <i className="mdi mdi-sync mdi-spin"></i>
+            <div className="flex items-center gap-2 text-sm text-primary">
+                <RefreshCw className="size-4 animate-spin"/>
                 <span>{t('LIBRARY.SYNCING')}</span>
             </div>
         );
@@ -25,8 +26,8 @@ export default function SyncStatusBadge({status, lastSyncedAt, isRunning}) {
 
     if (status === 'FAILED') {
         return (
-            <div className="flex items-center gap-2 text-sm text-red-600 dark:text-red-400">
-                <i className="mdi mdi-alert-circle"></i>
+            <div className="flex items-center gap-2 text-sm text-destructive">
+                <CircleAlert className="size-4"/>
                 <span>{t('LIBRARY.SYNC_FAILED')}</span>
             </div>
         );
@@ -34,8 +35,8 @@ export default function SyncStatusBadge({status, lastSyncedAt, isRunning}) {
 
     if (lastSyncedAt) {
         return (
-            <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
-                <i className="mdi mdi-check-circle"></i>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <CircleCheck className="size-4 text-emerald-500"/>
                 <span>{t('LIBRARY.LAST_SYNCED', {when: formatRelative(lastSyncedAt, i18n.language)})}</span>
             </div>
         );

src/components/ui/alert.jsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/badge.jsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+import { Slot } from "radix-ui"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+import { Slot } from "radix-ui"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.jsx

@@ -0,0 +1,112 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dropdown-menu.jsx

@@ -0,0 +1,249 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+function DropdownMenu({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/input.jsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Input({
+  className,
+  type,
+  ...props
+}) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.jsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Label as LabelPrimitive } from "radix-ui"
+
+function Label({
+  className,
+  ...props
+}) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/select.jsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+function Select({
+  ...props
+}) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/separator.jsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/skeleton.jsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/ui/sonner.jsx

@@ -0,0 +1,43 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { usePreferences } from "@/context/PreferencesContext.jsx"
+import { Toaster as Sonner } from "sonner";
+
+const Toaster = ({
+  ...props
+}) => {
+  const { isDarkMode } = usePreferences()
+  const theme = isDarkMode ? "dark" : "light"
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)"
+        }
+      }
+      {...props}
+    />
+  );
+}
+
+export { Toaster }

src/components/ui/switch.jsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

src/components/ui/tooltip.jsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/hooks/useForceSync.js

@@ -1,18 +1,18 @@
 import {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
 
 const RELOAD_DELAY_MS = 4000;
 
 /**
- * Starts a library sync (POST /api/library/sync) and calls onStarted after a short delay,
- * so the caller can reload once Steam data has arrived.
+ * Starts a library sync (POST /api/library/sync), reports the result as a toast and calls
+ * onStarted after a short delay, so the caller can reload once Steam data has arrived.
  */
 export default function useForceSync(onStarted) {
     const {t} = useTranslation();
     const navigate = useNavigate();
     const [busy, setBusy] = useState(false);
-    const [message, setMessage] = useState(null);
 
     const trigger = async () => {
         const token = localStorage.getItem('tbp_jwt');
@@ -21,7 +21,6 @@ export default function useForceSync(onStarted) {
             return;
         }
         setBusy(true);
-        setMessage(null);
         try {
             const response = await fetch(`${import.meta.env.VITE_CORE_API_URL}/api/library/sync`, {
                 method: 'POST',
@@ -29,22 +28,22 @@ export default function useForceSync(onStarted) {
             });
             if (response.status === 429) {
                 const json = await response.json().catch(() => ({}));
-                setMessage(t('LIBRARY.SYNC_COOLDOWN', {seconds: json.retryAfterSeconds ?? 60}));
+                toast.warning(t('LIBRARY.SYNC_COOLDOWN', {seconds: json.retryAfterSeconds ?? 60}));
                 return;
             }
             if (!response.ok) {
-                setMessage(t('LIBRARY.SYNC_FAILED'));
+                toast.error(t('LIBRARY.SYNC_FAILED'));
                 return;
             }
-            setMessage(t('LIBRARY.SYNC_STARTED'));
+            toast.success(t('LIBRARY.SYNC_STARTED'));
             setTimeout(onStarted, RELOAD_DELAY_MS);
         } catch (err) {
             console.error('sync trigger error:', err);
-            setMessage(t('INFO.ERROR.NETWORK_FAILURE'));
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
         } finally {
             setBusy(false);
         }
     };
 
-    return {trigger, busy, message};
+    return {trigger, busy};
 }

src/lib/utils.js

@@ -0,0 +1,6 @@
+import {clsx} from 'clsx';
+import {twMerge} from 'tailwind-merge';
+
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

src/main.jsx

@@ -5,7 +5,6 @@ import App from './App.jsx';
 import {PreferencesProvider} from './context/PreferencesContext.jsx';
 import './i18n';
 import './style.css';
-import '@mdi/font/css/materialdesignicons.css';
 
 createRoot(document.getElementById('root')).render(
     <StrictMode>

src/pages/Dashboard.jsx

@@ -1,18 +1,23 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
+import {ArrowRight, Hash, Link2, RefreshCw, Trophy} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+import GameCover from '../components/GameCover.jsx';
 import SteamGameCount from '../components/SteamGameCount';
 import SyncStatusBadge from '../components/SyncStatusBadge.jsx';
 import useLibrarySync from '../hooks/useLibrarySync.js';
 import useForceSync from '../hooks/useForceSync.js';
-import {formatPlaytime, iconUrl} from '../utils/games.js';
+import {formatPlaytime} from '../utils/games.js';
 
 const TOP_GAMES = 5;
 // The games endpoint accepts only the page sizes 20, 40 and 80.
 const TOP_GAMES_URL = '/api/library/games?page=0&size=20&sort=playtimeMinutes%2Cdesc';
 
-const cardClass = 'bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700';
-
 const authHeaders = () => ({
     'Authorization': `Bearer ${localStorage.getItem('tbp_jwt')}`,
     'Content-Type': 'application/json',
@@ -101,120 +106,123 @@ const Dashboard = () => {
     const forceSync = useForceSync(reloadLibrary);
 
     if (isLoading) {
-        return (
-            <div className="py-24 text-center text-slate-600 dark:text-slate-300">
-                {t('DASHBOARD.LOADING')}
-            </div>
-        );
+        return <DashboardSkeleton/>;
     }
 
     if (error) {
         return (
-            <div className="py-24 text-center text-red-500">
+            <div className="py-24 text-center text-destructive">
                 {error}
             </div>
         );
     }
 
     const syncBusy = forceSync.busy || sync.isRunning;
+    const maxMinutes = topGames[0]?.playtimeMinutes || 1;
 
     return (
         <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
-            <section className={`${cardClass} p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4`}>
-                <div className="min-w-0">
-                    <h1 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white truncate">
+            <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+                <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-transparent"/>
+                <div className="relative min-w-0">
+                    <p className="text-sm font-medium text-muted-foreground">{t('DASHBOARD.WELCOME_BACK')}</p>
+                    <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight truncate">
                         {t('DASHBOARD.HELLO')} {userData?.email?.split('@')[0]} 👋
                     </h1>
                     {hasSteamId ? (
-                        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
-                            <i className="mdi mdi-steam mr-1"></i>
-                            {t('SETTINGS.STEAM_ID')}: <span className="font-mono">{userData.steamId}</span>
-                        </p>
+                        <Badge variant="outline" className="mt-3 gap-1.5 font-mono text-muted-foreground">
+                            <Hash className="size-3"/>
+                            {userData.steamId}
+                        </Badge>
                     ) : (
-                        <Link to="/settings" className="mt-2 inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline">
-                            <i className="mdi mdi-steam mr-1"></i>
-                            {t('DASHBOARD.NO_STEAM_ID')}
-                        </Link>
+                        <Button asChild variant="link" className="mt-2 h-auto p-0">
+                            <Link to="/settings"><Link2 className="size-4"/>{t('DASHBOARD.NO_STEAM_ID')}</Link>
+                        </Button>
                     )}
                 </div>
 
                 {hasSteamId && (
-                    <div className="flex flex-col items-start md:items-end gap-2 shrink-0">
+                    <div className="relative flex flex-col items-start md:items-end gap-3 shrink-0">
                         <SyncStatusBadge
                             status={sync.status}
                             lastSyncedAt={sync.lastSyncedAt}
                             isRunning={sync.isRunning}
                         />
-                        <button
-                            type="button"
-                            onClick={forceSync.trigger}
-                            disabled={syncBusy}
-                            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 hover:bg-blue-500 text-white shadow-md shadow-blue-500/20 transition-colors disabled:opacity-50"
-                        >
-                            <i className={`mdi mdi-sync ${syncBusy ? 'mdi-spin' : ''}`}></i>
+                        <Button onClick={forceSync.trigger} disabled={syncBusy}>
+                            <RefreshCw className={syncBusy ? 'animate-spin' : ''}/>
                             {t('LIBRARY.RESYNC')}
-                        </button>
-                        {forceSync.message && (
-                            <span className="text-xs text-slate-500 dark:text-slate-400">{forceSync.message}</span>
-                        )}
+                        </Button>
                     </div>
                 )}
-            </section>
+            </Card>
 
             {hasSteamId && (
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                     <SteamGameCount targetCount={steamData.count}/>
 
-                    <section className={`${cardClass} md:col-span-2 flex flex-col`}>
-                        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700">
-                            <h2 className="font-bold text-slate-900 dark:text-white">
-                                <i className="mdi mdi-trophy-outline mr-2 text-amber-500"></i>
+                    <Card className="md:col-span-2 gap-0 py-0">
+                        <div className="flex items-center justify-between px-5 py-4 border-b">
+                            <h2 className="flex items-center gap-2 font-semibold">
+                                <Trophy className="size-4 text-amber-500"/>
                                 {t('DASHBOARD.MOST_PLAYED')}
                             </h2>
-                            <Link to="/library" className="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">
-                                {t('DASHBOARD.SHOW_ALL')} <i className="mdi mdi-arrow-right"></i>
-                            </Link>
+                            <Button asChild variant="ghost" size="sm">
+                                <Link to="/library">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
+                            </Button>
                         </div>
 
                         {topGames.length === 0 ? (
-                            <p className="px-5 py-8 text-center text-sm text-slate-500 dark:text-slate-400">
+                            <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                                 {sync.isRunning ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
                             </p>
                         ) : (
-                            <ol className="divide-y divide-slate-200 dark:divide-slate-700">
-                                {topGames.map((g, index) => {
-                                    const icon = iconUrl(g.appid, g.imgIconUrl);
-                                    return (
+                            <ol className="divide-y">
+                                {topGames.map((g, index) => (
                                     <li key={g.appid}>
                                         <Link
                                             to={`/library/${g.appid}`}
-                                                className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
+                                            className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 transition-colors hover:bg-muted/50"
                                         >
-                                                <span className="w-5 text-right text-sm font-bold text-slate-400 dark:text-slate-500 tabular-nums">
-                                                    {index + 1}.
+                                            <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">
+                                                {index + 1}
                                             </span>
-                                                {icon ? (
-                                                    <img src={icon} alt="" className="w-8 h-8 rounded" loading="lazy"/>
-                                                ) : (
-                                                    <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
-                                                )}
-                                                <span className="flex-1 min-w-0 truncate text-slate-900 dark:text-white">
+                                            <GameCover appid={g.appid} className="w-16 sm:w-24 shrink-0"/>
+                                            <div className="min-w-0 flex-1">
+                                                <div className="truncate font-medium group-hover:text-primary transition-colors">
                                                     {g.name ?? `App ${g.appid}`}
-                                                </span>
-                                                <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
+                                                </div>
+                                                <div className="mt-2 h-1.5 rounded-full bg-muted">
+                                                    <div
+                                                        className="h-full rounded-full bg-primary"
+                                                        style={{width: `${Math.max(2, (g.playtimeMinutes / maxMinutes) * 100)}%`}}
+                                                    />
+                                                </div>
+                                            </div>
+                                            <span className="w-12 sm:w-14 text-right text-sm font-medium text-muted-foreground tabular-nums">
                                                 {formatPlaytime(g.playtimeMinutes)}
                                             </span>
                                         </Link>
                                     </li>
-                                    );
-                                })}
+                                ))}
                             </ol>
                         )}
-                    </section>
+                    </Card>
                 </div>
             )}
         </div>
     );
 };
 
+function DashboardSkeleton() {
+    return (
+        <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
+            <Skeleton className="h-40 rounded-xl"/>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <Skeleton className="h-64 rounded-xl"/>
+                <Skeleton className="h-64 rounded-xl md:col-span-2"/>
+            </div>
+        </div>
+    );
+}
+
 export default Dashboard;

src/pages/GameDetail.jsx

@@ -1,7 +1,15 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {formatPlaytime, iconUrl} from '../utils/games.js';
+import {ArrowLeft, Clock, ExternalLink, ShieldOff, Trophy} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+import {cn} from '@/lib/utils';
+import GameCover from '../components/GameCover.jsx';
+import {formatPlaytime} from '../utils/games.js';
 
 const formatUnlockedAt = (instant, locale) => {
     if (!instant) return '';
@@ -80,169 +88,129 @@ export default function GameDetail() {
         });
     }, [data]);
 
+    const stats = data ? [
+        [t('GAME_DETAIL.UNLOCKED'), data.achievementsUnlocked],
+        [t('GAME_DETAIL.REMAINING'), data.achievementsRemaining],
+        [t('GAME_DETAIL.COMPLETION'), `${data.completionPercent}%`],
+    ] : [];
+
     return (
-        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
-            <div className="max-w-4xl mx-auto space-y-6">
-                <button
-                    type="button"
-                    onClick={() => navigate(-1)}
-                    className="inline-flex items-center gap-2 text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors"
-                >
-                    <i className="mdi mdi-arrow-left"></i> {t('GAME_DETAIL.BACK')}
-                </button>
+        <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
+            <Button variant="ghost" size="sm" className="-ml-2" onClick={() => navigate(-1)}>
+                <ArrowLeft/>{t('GAME_DETAIL.BACK')}
+            </Button>
 
             {isLoading && (
-                    <div className="text-center text-slate-600 dark:text-slate-300 py-12">
-                        {t('GAME_DETAIL.LOADING')}
+                <div className="space-y-6">
+                    <Skeleton className="h-52 rounded-xl"/>
+                    <Skeleton className="h-40 rounded-xl"/>
                 </div>
             )}
 
             {error && !isLoading && (
-                    <div className="text-center text-red-500 py-12">
-                        {error}
-                        <div className="mt-4">
-                            <Link to="/library" className="text-blue-500 hover:underline">
-                                {t('GAME_DETAIL.BACK_TO_LIBRARY')}
-                            </Link>
-                        </div>
+                <div className="py-12 text-center text-destructive space-y-4">
+                    <p>{error}</p>
+                    <Button asChild variant="outline"><Link to="/library">{t('GAME_DETAIL.BACK_TO_LIBRARY')}</Link></Button>
                 </div>
             )}
 
             {!isLoading && !error && data && (
                 <>
-                        <header className="flex items-center gap-4 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
-                            {iconUrl(data.appid, data.imgIconUrl) ? (
-                                <img
-                                    src={iconUrl(data.appid, data.imgIconUrl)}
-                                    alt=""
-                                    className="w-16 h-16 rounded"
-                                    loading="lazy"
-                                />
-                            ) : (
-                                <div className="w-16 h-16 rounded bg-slate-200 dark:bg-slate-700"/>
-                            )}
-                            <div className="flex-1">
-                                <h1 className="text-2xl font-bold text-slate-900 dark:text-white truncate">
+                    <Card className="relative overflow-hidden p-0 gap-0 md:flex-row">
+                        <GameCover appid={data.appid} className="w-full rounded-none md:w-96 md:shrink-0"/>
+                        <div className="flex flex-1 flex-col justify-between gap-4 p-6">
+                            <div>
+                                <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
                                     {data.name ?? `App ${data.appid}`}
                                 </h1>
-                                <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                                <Badge variant="secondary" className="mt-3 tabular-nums">
+                                    <Clock className="size-3"/>
                                     {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(data.playtimeMinutes)})}
-                                </p>
+                                </Badge>
                             </div>
-                            <a
-                                href={`https://store.steampowered.com/app/${data.appid}`}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline whitespace-nowrap"
-                            >
-                                {t('GAME_DETAIL.OPEN_IN_STEAM')} <i className="mdi mdi-open-in-new"></i>
+                            <Button asChild variant="outline" size="sm" className="self-start">
+                                <a href={`https://store.steampowered.com/app/${data.appid}`} target="_blank" rel="noopener noreferrer">
+                                    {t('GAME_DETAIL.OPEN_IN_STEAM')}<ExternalLink/>
                                 </a>
-                        </header>
+                            </Button>
+                        </div>
+                    </Card>
 
                     {!data.hasAchievements && (
-                            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 text-center text-slate-500 dark:text-slate-400">
+                        <Card className="items-center py-10 text-center text-sm text-muted-foreground">
+                            <Trophy className="size-8"/>
                             {t('GAME_DETAIL.NO_ACHIEVEMENTS')}
-                            </div>
+                        </Card>
                     )}
 
                     {data.hasAchievements && !data.statsVisible && (
-                            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 text-center text-slate-500 dark:text-slate-400">
-                                <i className="mdi mdi-shield-lock text-3xl block mb-2"></i>
+                        <Card className="items-center py-10 text-center text-sm text-muted-foreground">
+                            <ShieldOff className="size-8"/>
                             {t('GAME_DETAIL.STATS_HIDDEN')}
-                            </div>
+                        </Card>
                     )}
 
                     {data.hasAchievements && data.statsVisible && (
                         <>
-                                <section className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-4">
+                            <Card className="p-6 gap-5">
                                 <div className="flex items-baseline justify-between">
-                                        <h2 className="text-lg font-bold text-slate-900 dark:text-white">
+                                    <h2 className="flex items-center gap-2 text-lg font-semibold">
+                                        <Trophy className="size-4 text-amber-500"/>
                                         {t('GAME_DETAIL.ACHIEVEMENTS')}
                                     </h2>
-                                        <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
+                                    <span className="text-sm text-muted-foreground tabular-nums">
                                         {data.achievementsUnlocked} / {data.achievementsTotal}
-                                            {' · '}
-                                            {data.completionPercent}%
                                     </span>
                                 </div>
-                                    <div className="w-full h-3 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden">
+                                <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
                                     <div
-                                            className="h-full bg-blue-500 transition-all"
+                                        className="h-full rounded-full bg-primary transition-all"
                                         style={{width: `${Math.min(100, data.completionPercent)}%`}}
                                     />
                                 </div>
-                                    <div className="grid grid-cols-3 gap-3 text-center text-sm">
-                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
-                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
-                                                {data.achievementsUnlocked}
+                                <div className="grid grid-cols-3 gap-3 text-center">
+                                    {stats.map(([label, value]) => (
+                                        <div key={label} className="rounded-lg bg-muted/50 p-3">
+                                            <div className="text-2xl font-bold tabular-nums">{value}</div>
+                                            <div className="text-xs text-muted-foreground">{label}</div>
                                         </div>
-                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                                                {t('GAME_DETAIL.UNLOCKED')}
+                                    ))}
                                 </div>
-                                        </div>
-                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
-                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
-                                                {data.achievementsRemaining}
-                                            </div>
-                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                                                {t('GAME_DETAIL.REMAINING')}
-                                            </div>
-                                        </div>
-                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
-                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
-                                                {data.completionPercent}%
-                                            </div>
-                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                                                {t('GAME_DETAIL.COMPLETION')}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </section>
+                            </Card>
 
-                                <section className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                             <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                                        {sortedAchievements.map((a) => (
+                                {sortedAchievements.map((a) => {
+                                    const icon = a.unlocked ? a.iconUrl : a.iconGrayUrl;
+                                    return (
                                         <li
                                             key={a.apiName}
-                                                className={`flex items-start gap-3 p-3 rounded-lg border ${
-                                                    a.unlocked
-                                                        ? 'border-blue-200 dark:border-blue-700 bg-blue-50/50 dark:bg-blue-900/20'
-                                                        : 'border-slate-200 dark:border-slate-700 opacity-70'
-                                                }`}
-                                            >
-                                                {a.unlocked ? (
-                                                    a.iconUrl
-                                                        ? <img src={a.iconUrl} alt="" className="w-12 h-12 rounded"/>
-                                                        : <div className="w-12 h-12 rounded bg-slate-200 dark:bg-slate-700"/>
-                                                ) : (
-                                                    a.iconGrayUrl
-                                                        ? <img src={a.iconGrayUrl} alt="" className="w-12 h-12 rounded grayscale"/>
-                                                        : <div className="w-12 h-12 rounded bg-slate-200 dark:bg-slate-700"/>
+                                            className={cn(
+                                                'flex items-start gap-3 rounded-xl border bg-card p-3',
+                                                a.unlocked ? 'border-primary/40' : 'opacity-60',
                                             )}
-                                                <div className="flex-1 min-w-0">
-                                                    <div className="font-semibold text-slate-900 dark:text-white truncate">
-                                                        {a.displayName ?? a.apiName}
-                                                    </div>
+                                        >
+                                            {icon
+                                                ? <img src={icon} alt="" className={cn('size-12 rounded-md', !a.unlocked && 'grayscale')}/>
+                                                : <div className="size-12 rounded-md bg-muted"/>}
+                                            <div className="min-w-0 flex-1">
+                                                <div className="truncate font-medium">{a.displayName ?? a.apiName}</div>
                                                 {a.description && (
-                                                        <div className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
-                                                            {a.description}
-                                                        </div>
+                                                    <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{a.description}</div>
                                                 )}
                                                 {a.unlocked && a.unlockedAt && (
-                                                        <div className="text-xs text-blue-600 dark:text-blue-400 mt-1 tabular-nums">
+                                                    <div className="mt-1 text-xs text-primary tabular-nums">
                                                         {formatUnlockedAt(a.unlockedAt, i18n.language)}
                                                     </div>
                                                 )}
                                             </div>
                                         </li>
-                                        ))}
+                                    );
+                                })}
                             </ul>
-                                </section>
                         </>
                     )}
                 </>
             )}
         </div>
-        </div>
     );
 }

src/pages/GameLibrary.jsx

@@ -4,7 +4,15 @@ import {useTranslation} from 'react-i18next';
 import useLibrarySync from '../hooks/useLibrarySync.js';
 import SyncStatusBadge from '../components/SyncStatusBadge.jsx';
 import useForceSync from '../hooks/useForceSync.js';
-import {formatPlaytime, iconUrl} from '../utils/games.js';
+import {formatPlaytime} from '../utils/games.js';
+import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, Library, RefreshCw} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {Skeleton} from '@/components/ui/skeleton';
+import GameCover from '../components/GameCover.jsx';
 
 const PAGE_SIZES = [20, 40, 80];
 const DEFAULT_SIZE = 20;
@@ -87,12 +95,12 @@ export default function GameLibrary() {
         setSearchParams(params);
     };
 
-    const onSizeChange = (event) => {
-        updateParams({size: event.target.value, page: 0});
+    const onSizeChange = (value) => {
+        updateParams({size: value, page: 0});
     };
 
-    const onSortChange = (event) => {
-        updateParams({sort: event.target.value, page: 0});
+    const onSortChange = (value) => {
+        updateParams({sort: value, page: 0});
     };
 
     const goToPage = (target) => {
@@ -100,142 +108,117 @@ export default function GameLibrary() {
         updateParams({page: target});
     };
 
-    const {trigger: triggerSync, busy: syncBusy, message: syncMessage} = useForceSync(load);
+    const {trigger: triggerSync, busy: syncBusy} = useForceSync(load);
+
+    const syncing = syncBusy || sync.isRunning;
+    const ready = !isLoading && !error;
 
     return (
-        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
-            <div className="max-w-4xl mx-auto space-y-6">
-                <div className="flex items-center justify-between flex-wrap gap-4">
-                    <div className="flex flex-col gap-1">
-                        <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-                            {t('LIBRARY.TITLE')}
-                        </h1>
-                        <div className="flex items-center gap-3 flex-wrap">
+        <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
+            <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                <div className="space-y-2">
+                    <h1 className="text-3xl font-bold tracking-tight">{t('LIBRARY.TITLE')}</h1>
+                    <div className="flex flex-wrap items-center gap-3">
                         <SyncStatusBadge
                             status={sync.status}
                             lastSyncedAt={sync.lastSyncedAt}
                             isRunning={sync.isRunning}
                         />
-                            <button
-                                type="button"
-                                onClick={triggerSync}
-                                disabled={syncBusy || sync.isRunning}
-                                className="inline-flex items-center gap-1 text-xs font-bold text-blue-600 dark:text-blue-400 hover:text-blue-500 disabled:opacity-50"
-                            >
-                                <i className={`mdi mdi-sync ${syncBusy || sync.isRunning ? 'mdi-spin' : ''}`}></i>
+                        <Button variant="outline" size="sm" onClick={triggerSync} disabled={syncing}>
+                            <RefreshCw className={syncing ? 'animate-spin' : ''}/>
                             {t('LIBRARY.RESYNC')}
-                            </button>
-                            {syncMessage && (
-                                <span className="text-xs text-slate-500 dark:text-slate-400">{syncMessage}</span>
-                            )}
+                        </Button>
                     </div>
                 </div>
-                    <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300 flex-wrap">
-                        <div className="flex items-center gap-2">
-                            <label htmlFor="sort">{t('LIBRARY.SORT_BY')}</label>
-                            <select
-                                id="sort"
-                                value={sort}
-                                onChange={onSortChange}
-                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
-                            >
+                <div className="flex flex-wrap items-center gap-3">
+                    <Select value={sort} onValueChange={onSortChange}>
+                        <SelectTrigger className="w-52" aria-label={t('LIBRARY.SORT_BY')}>
+                            <ArrowUpDown className="text-muted-foreground"/>
+                            <SelectValue/>
+                        </SelectTrigger>
+                        <SelectContent>
                             {SORT_OPTIONS.map((opt) => (
-                                    <option key={opt.value} value={opt.value}>{t(opt.labelKey)}</option>
+                                <SelectItem key={opt.value} value={opt.value}>{t(opt.labelKey)}</SelectItem>
                             ))}
-                            </select>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <label htmlFor="pageSize">{t('LIBRARY.PER_PAGE')}</label>
-                            <select
-                                id="pageSize"
-                                value={size}
-                                onChange={onSizeChange}
-                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
-                            >
+                        </SelectContent>
+                    </Select>
+                    <Select value={String(size)} onValueChange={onSizeChange}>
+                        <SelectTrigger className="w-24" aria-label={t('LIBRARY.PER_PAGE')}>
+                            <SelectValue/>
+                        </SelectTrigger>
+                        <SelectContent>
                             {PAGE_SIZES.map((n) => (
-                                    <option key={n} value={n}>{n}</option>
+                                <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                             ))}
-                            </select>
-                        </div>
+                        </SelectContent>
+                    </Select>
                 </div>
             </div>
 
             {isLoading && (
-                    <div className="text-center text-slate-600 dark:text-slate-300 py-12">
-                        {t('LIBRARY.LOADING')}
+                <Card className="gap-0 py-0 divide-y">
+                    {Array.from({length: 8}, (_, i) => (
+                        <div key={i} className="flex items-center gap-4 px-5 py-3">
+                            <Skeleton className="h-11 w-24 rounded-md"/>
+                            <Skeleton className="h-4 flex-1"/>
+                            <Skeleton className="h-4 w-12"/>
                         </div>
+                    ))}
+                </Card>
             )}
 
-                {error && (
-                    <div className="text-center text-red-500 py-12">{error}</div>
-                )}
+            {error && <div className="py-12 text-center text-destructive">{error}</div>}
 
-                {!isLoading && !error && data.content.length === 0 && (
-                    <div className="text-center text-slate-500 dark:text-slate-400 py-12">
+            {ready && data.content.length === 0 && (
+                <Card className="items-center py-16 text-center text-muted-foreground">
+                    <Library className="size-10"/>
+                    <p className="max-w-sm text-sm">
                         {sync.isRunning ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
-                    </div>
+                    </p>
+                </Card>
             )}
 
-                {!isLoading && !error && data.content.length > 0 && (
-                    <ul className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 divide-y divide-slate-200 dark:divide-slate-700">
-                        {data.content.map((g) => {
-                            const icon = iconUrl(g.appid, g.imgIconUrl);
-                            return (
+            {ready && data.content.length > 0 && (
+                <Card className="gap-0 py-0">
+                    <ul className="divide-y">
+                        {data.content.map((g) => (
                             <li key={g.appid}>
                                 <Link
                                     to={`/library/${g.appid}`}
                                     state={{librarySearch}}
-                                        className="flex items-center gap-4 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
+                                    className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 transition-colors hover:bg-muted/50"
                                 >
-                                        {icon ? (
-                                            <img
-                                                src={icon}
-                                                alt=""
-                                                className="w-8 h-8 rounded"
-                                                loading="lazy"
-                                                onError={(e) => { e.currentTarget.style.visibility = 'hidden'; }}
-                                            />
-                                        ) : (
-                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
-                                        )}
-                                        <span className="flex-1 text-slate-900 dark:text-white truncate">
+                                    <GameCover appid={g.appid} className="w-16 sm:w-24 shrink-0"/>
+                                    <span className="min-w-0 flex-1 truncate font-medium group-hover:text-primary transition-colors">
                                         {g.name ?? `App ${g.appid}`}
                                     </span>
-                                        <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
+                                    <Badge variant="secondary" className="tabular-nums">
+                                        <Clock className="size-3"/>
                                         {formatPlaytime(g.playtimeMinutes)}
-                                        </span>
-                                        <i className="mdi mdi-chevron-right text-slate-400 dark:text-slate-500"></i>
+                                    </Badge>
+                                    <ChevronRight className="size-4 text-muted-foreground"/>
                                 </Link>
                             </li>
-                            );
-                        })}
+                        ))}
                     </ul>
+                </Card>
             )}
 
-                {!isLoading && !error && data.totalPages > 1 && (
-                    <div className="flex items-center justify-between text-sm text-slate-600 dark:text-slate-300">
-                        <button
-                            onClick={() => goToPage(page - 1)}
-                            disabled={page <= 0}
-                            className="px-4 py-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 disabled:opacity-40 hover:border-blue-500 disabled:hover:border-slate-300 dark:disabled:hover:border-slate-600 transition-colors"
-                        >
-                            {t('LIBRARY.PREV')}
-                        </button>
-                        <span>
+            {ready && data.totalPages > 1 && (
+                <div className="flex items-center justify-between gap-2 text-sm text-muted-foreground">
+                    <Button variant="outline" size="sm" onClick={() => goToPage(page - 1)} disabled={page <= 0}>
+                        <ChevronLeft/>{t('LIBRARY.PREV')}
+                    </Button>
+                    <span className="text-center">
                         {t('LIBRARY.PAGE_OF', {current: data.page + 1, total: data.totalPages})}
                         {' · '}
                         {data.totalElements} {t('LIBRARY.GAMES')}
                     </span>
-                        <button
-                            onClick={() => goToPage(page + 1)}
-                            disabled={page >= data.totalPages - 1}
-                            className="px-4 py-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 disabled:opacity-40 hover:border-blue-500 disabled:hover:border-slate-300 dark:disabled:hover:border-slate-600 transition-colors"
-                        >
-                            {t('LIBRARY.NEXT')}
-                        </button>
+                    <Button variant="outline" size="sm" onClick={() => goToPage(page + 1)} disabled={page >= data.totalPages - 1}>
+                        {t('LIBRARY.NEXT')}<ChevronRight/>
+                    </Button>
                 </div>
             )}
         </div>
-        </div>
     );
 }

src/pages/ImprintPage.jsx

@@ -1,28 +1,30 @@
-import {useTranslation} from 'react-i18next';
+import {useTranslation} from 'react-i18next';
+
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 
 export default function ImprintPage() {
     const {t} = useTranslation();
 
     return (
-        <div className="grow flex justify-center p-4 md:p-8">
-            <div className="w-full max-w-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-8 shadow-sm">
-                <h1 className="text-3xl font-black text-slate-900 dark:text-white mb-6">
-                    {t('IMPRINT.TITLE')}
-                </h1>
-                <div className="text-slate-600 dark:text-slate-400 space-y-4">
+        <div className="w-full max-w-3xl mx-auto p-4 md:p-8">
+            <Card>
+                <CardHeader>
+                    <CardTitle className="text-3xl font-bold tracking-tight">{t('IMPRINT.TITLE')}</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4 text-muted-foreground">
                     <p>{t('IMPRINT.LEGAL')}</p>
                     <p>
-                        <strong>Andreas Dahm</strong><br/>
+                        <strong className="text-foreground">Andreas Dahm</strong><br/>
                         Hauptstraße 37A<br/>
                         85614 Kirchseeon<br/>
                         Deutschland
                     </p>
-                    <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8">
+                    <h2 className="pt-4 text-lg font-semibold text-foreground">
                         {t('IMPRINT.CONTACT')}
                     </h2>
-                    <p>Email: andreas.dahm@gmail.com</p>
-                </div>
-            </div>
+                    <p>Email: <a href="mailto:andreas.dahm@gmail.com" className="text-primary hover:underline">andreas.dahm@gmail.com</a></p>
+                </CardContent>
+            </Card>
         </div>
     );
 }

src/pages/LandingPage.jsx

@@ -1,146 +1,105 @@
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
-import {getValidToken} from '../utils/auth.js';
+import {
+    Archive, ArrowRight, Blocks, Clock, Gamepad2, Library, Link2, Sparkles, Trophy, Users,
+} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+import GameCover from '../components/GameCover.jsx';
 import StatCard from '../components/StatCard.jsx';
+import {getValidToken} from '../utils/auth.js';
 
 import usePublicStats from '../hooks/usePublicStats.js';
 
-const iconUrl = (appid, hash) =>
-    hash
-        ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
-        : null;
+function RankedGames({title, games, formatValue}) {
+    return (
+        <Card className="gap-0 py-0">
+            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
+                <Trophy className="size-4 text-amber-500"/>
+                {title}
+            </h3>
+            <ol className="divide-y">
+                {games.map((g, idx) => (
+                    <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
+                        <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
+                        <GameCover appid={g.appid} className="w-16 shrink-0"/>
+                        <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
+                        <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
+                    </li>
+                ))}
+            </ol>
+        </Card>
+    );
+}
 
 export default function LandingPage() {
-    const {t} = useTranslation();
+    const {t, i18n} = useTranslation();
     const {data, isLoading} = usePublicStats();
 
     const auth = data.auth;
     const core = data.core;
 
+    const stats = [
+        [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users],
+        [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2],
+        [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2],
+        [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles],
+        [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks],
+        [t('LANDING.TOTAL_PLAYTIME_DAYS'), core?.totalPlaytimeDays, Clock, ` ${t('LANDING.DAYS_SUFFIX')}`],
+        [t('LANDING.BIGGEST_LIBRARY'), core?.biggestLibrary, Library],
+        [t('LANDING.BIGGEST_BACKLOG'), core?.biggestBacklog, Archive],
+    ];
+
     return (
-        <div className="grow flex flex-col items-center p-4 md:p-8">
-            <section className="text-center my-12 md:my-20">
-                <h1 className="text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
-                    {t('MAIN.WELCOME')}
-                </h1>
-                <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-8">
-                    {t('MAIN.DESCRIPTION')}
-                </p>
+        <div className="grow">
+            <section className="relative overflow-hidden border-b">
+                <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/15 via-primary/5 to-transparent"/>
+                <div className="relative mx-auto max-w-3xl px-4 py-20 text-center md:py-28">
+                    <Badge variant="outline" className="mb-6 gap-1.5 bg-background/60">
+                        <Gamepad2 className="size-3 text-primary"/> Game Log
+                    </Badge>
+                    <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{t('MAIN.WELCOME')}</h1>
+                    <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{t('MAIN.DESCRIPTION')}</p>
+                    <Button asChild size="lg" className="mt-10">
                         {getValidToken() ? (
-                    <Link to="/dashboard" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
-                        {t('NAV.TO_DASHBOARD')}
-                    </Link>
+                            <Link to="/dashboard">{t('NAV.TO_DASHBOARD')}<ArrowRight/></Link>
                         ) : (
-                    <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
-                        {t('MAIN.GET_STARTED')}
-                    </Link>
+                            <Link to="/login">{t('MAIN.GET_STARTED')}<ArrowRight/></Link>
                         )}
+                    </Button>
+                </div>
             </section>
 
-            <section className="w-full max-w-5xl mb-16">
-                <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-6">
-                    {t('LANDING.STATS_TITLE')}
-                </h2>
-                {isLoading ? (
-                    <div className="text-center text-slate-500 dark:text-slate-400">
-                        {t('LANDING.STATS_LOADING')}
-                    </div>
-                ) : (
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <StatCard
-                            label={t('LANDING.TOTAL_USERS')}
-                            value={auth?.totalUsers ?? 0}
-                            icon="mdi-account-group"
-                        />
-                        <StatCard
-                            label={t('LANDING.STEAM_LINKED')}
-                            value={auth?.usersWithSteamLinked ?? 0}
-                            icon="mdi-steam"
-                        />
-                        <StatCard
-                            label={t('LANDING.TOTAL_GAMES')}
-                            value={core?.totalLibraryEntries ?? 0}
-                            icon="mdi-controller"
-                        />
-                        <StatCard
-                            label={t('LANDING.GAMES_PLAYED')}
-                            value={core?.totalGamesPlayed ?? 0}
-                            icon="mdi-gamepad-variant"
-                        />
-                        <StatCard
-                            label={t('LANDING.DISTINCT_GAMES')}
-                            value={core?.totalDistinctGames ?? 0}
-                            icon="mdi-shape"
-                        />
-                        <StatCard
-                            label={t('LANDING.TOTAL_PLAYTIME_DAYS')}
-                            value={core?.totalPlaytimeDays ?? 0}
-                            icon="mdi-clock-outline"
-                            suffix={` ${t('LANDING.DAYS_SUFFIX')}`}
-                        />
-                        <StatCard
-                            label={t('LANDING.BIGGEST_LIBRARY')}
-                            value={core?.biggestLibrary ?? 0}
-                            icon="mdi-bookshelf"
-                        />
-                        <StatCard
-                            label={t('LANDING.BIGGEST_BACKLOG')}
-                            value={core?.biggestBacklog ?? 0}
-                            icon="mdi-archive"
-                        />
-                    </div>
-                )}
+            <section className="mx-auto w-full max-w-5xl space-y-8 px-4 py-12 md:px-8 md:py-16">
+                <h2 className="text-center text-2xl font-bold tracking-tight">{t('LANDING.STATS_TITLE')}</h2>
 
+                <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                    {isLoading
+                        ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
+                        : stats.map(([label, value, icon, suffix]) => (
+                            <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}/>
+                        ))}
+                </div>
+
+                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                     {core?.topPlayedGames?.length > 0 && (
-                    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
-                            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-4">
-                                {t('LANDING.TOP_PLAYED')}
-                            </h3>
-                            <ol className="space-y-2">
-                                {core.topPlayedGames.map((g, idx) => (
-                                    <li key={g.appid} className="flex items-center gap-3">
-                                        <span className="w-6 text-sm font-bold text-slate-400 tabular-nums">{idx + 1}</span>
-                                        {iconUrl(g.appid, g.imgIconUrl) ? (
-                                            <img src={iconUrl(g.appid, g.imgIconUrl)} alt="" className="w-8 h-8 rounded"/>
-                                        ) : (
-                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
+                        <RankedGames
+                            title={t('LANDING.TOP_PLAYED')}
+                            games={core.topPlayedGames}
+                            formatValue={(minutes) => `${Math.round(minutes / 60).toLocaleString(i18n.language)}h`}
+                        />
                     )}
-                                        <span className="flex-1 truncate text-slate-900 dark:text-white">
-                                            {g.name ?? `App ${g.appid}`}
-                                        </span>
-                                        <span className="text-xs text-slate-500 dark:text-slate-400 tabular-nums">
-                                            {Math.round(g.value / 60).toLocaleString()}h
-                                        </span>
-                                    </li>
-                                ))}
-                            </ol>
-                        </div>
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
-                            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-4">
-                                {t('LANDING.TOP_OWNED')}
-                            </h3>
-                            <ol className="space-y-2">
-                                {core.topOwnedGames.map((g, idx) => (
-                                    <li key={g.appid} className="flex items-center gap-3">
-                                        <span className="w-6 text-sm font-bold text-slate-400 tabular-nums">{idx + 1}</span>
-                                        {iconUrl(g.appid, g.imgIconUrl) ? (
-                                            <img src={iconUrl(g.appid, g.imgIconUrl)} alt="" className="w-8 h-8 rounded"/>
-                                        ) : (
-                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
+                    {core?.topOwnedGames?.length > 0 && (
+                        <RankedGames
+                            title={t('LANDING.TOP_OWNED')}
+                            games={core.topOwnedGames}
+                            formatValue={(count) => count.toLocaleString(i18n.language)}
+                        />
                     )}
-                                        <span className="flex-1 truncate text-slate-900 dark:text-white">
-                                            {g.name ?? `App ${g.appid}`}
-                                        </span>
-                                        <span className="text-xs text-slate-500 dark:text-slate-400 tabular-nums">
-                                            {g.value.toLocaleString()}
-                                        </span>
-                                    </li>
-                                ))}
-                            </ol>
                 </div>
-                    </div>
-                )}
             </section>
         </div>
     );

src/pages/LoginPage.jsx

@@ -1,6 +1,13 @@
 import {useTranslation} from 'react-i18next';
 import {useState} from 'react';
 import {Link, Navigate, useNavigate} from 'react-router-dom';
+import {Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import AuthLayout from '../components/AuthLayout.jsx';
+import FeedbackAlert from '../components/FeedbackAlert.jsx';
 import {getValidToken} from '../utils/auth.js';
 
 export default function LoginPage() {
@@ -64,83 +71,47 @@ export default function LoginPage() {
     }
 
     return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 px-4">
-            <div className="w-full max-w-md bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8">
-
-                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 text-center">
-                    {t('LOGIN.TITLE')}
-                </h2>
-
-                <form onSubmit={handleLogin} className="space-y-4" noValidate>
-
-                    {/* Email Field */}
-                    <div>
-                        <label
-                            htmlFor="email"
-                            className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
-                        >
-                            {t('LOGIN.EMAIL')}
-                        </label>
-                        <input
-                            id="email"
-                            type="email"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                            required
-                        />
-                    </div>
-
-                    {/* Password Field */}
-                    <div>
-                        <label
-                            htmlFor="password"
-                            className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
-                        >
-                            {t('LOGIN.PASSWORD')}
-                        </label>
-                        <input
-                            id="password"
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                            required
-                        />
-                    </div>
-
-                    {/* Submit Button */}
-                    <button
-                        type="submit"
-                        disabled={isLoading}
-                        className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold rounded-lg transition-colors duration-200"
-                    >
-                        {isLoading ? '...' : (t('LOGIN.SUBMIT'))}
-                    </button>
-
-                </form>
-
-                {/* Feedback Message Area */}
-                {feedback.message && (
-                    <div
-                        className={`mt-6 p-4 rounded-lg text-sm text-center ${
-                            feedback.isError
-                                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                                : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                        }`}
-                    >
-                        {feedback.message}
-                    </div>
-                )}
-
-                <p className="mt-6 text-sm text-center text-slate-600 dark:text-slate-400">
+        <AuthLayout
+            title={t('LOGIN.TITLE')}
+            footer={<>
                 {t('LOGIN.NO_ACCOUNT')}{' '}
-                    <Link to="/register" className="text-blue-600 hover:text-blue-500 font-semibold">
+                <Link to="/register" className="font-medium text-primary hover:underline">
                     {t('REGISTRATION.TITLE')}
                 </Link>
-                </p>
+            </>}
+        >
+            <form onSubmit={handleLogin} className="space-y-4" noValidate>
+                <div className="space-y-2">
+                    <Label htmlFor="email">{t('LOGIN.EMAIL')}</Label>
+                    <Input
+                        id="email"
+                        type="email"
+                        autoComplete="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        required
+                    />
+                </div>
 
+                <div className="space-y-2">
+                    <Label htmlFor="password">{t('LOGIN.PASSWORD')}</Label>
+                    <Input
+                        id="password"
+                        type="password"
+                        autoComplete="current-password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
                 </div>
-        </div>
+
+                <Button type="submit" disabled={isLoading} className="w-full">
+                    {isLoading && <Loader2 className="animate-spin"/>}
+                    {t('LOGIN.SUBMIT')}
+                </Button>
+            </form>
+
+            <FeedbackAlert message={feedback.message} isError={feedback.isError}/>
+        </AuthLayout>
     );
 }

src/pages/RegistrationPage.jsx

@@ -4,6 +4,13 @@ import {useTranslation} from 'react-i18next';
 import {useForm} from 'react-hook-form';
 import {zodResolver} from '@hookform/resolvers/zod';
 
+import {Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import AuthLayout from '../components/AuthLayout.jsx';
+import FeedbackAlert from '../components/FeedbackAlert.jsx';
+import FormField from '../components/FormField.jsx';
 import {registrationSchema} from '../utils/validation.js';
 
 const BACKEND_ERROR_KEY = {
@@ -12,11 +19,6 @@ const BACKEND_ERROR_KEY = {
     STEAM_ID_ALREADY_IN_USE: 'REGISTRATION.ERROR_STEAM_ID_IN_USE',
 };
 
-const inputClass =
-    'w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none';
-const inputErrorClass =
-    'w-full px-4 py-2 border border-red-500 dark:border-red-500 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:outline-none';
-
 export default function RegistrationPage() {
     const {t} = useTranslation();
     const navigate = useNavigate();
@@ -70,116 +72,73 @@ export default function RegistrationPage() {
         }
     };
 
-    const renderError = (field) =>
-        errors[field] && (
-            <p className="mt-1 text-sm text-red-600 dark:text-red-400">{t(errors[field].message)}</p>
-        );
-
     return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 px-4 py-8">
-            <div className="w-full max-w-md bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8">
-                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 text-center">
-                    {t('REGISTRATION.TITLE')}
-                </h2>
-
+        <AuthLayout
+            title={t('REGISTRATION.TITLE')}
+            footer={<>
+                {t('REGISTRATION.HAVE_ACCOUNT')}{' '}
+                <Link to="/login" className="font-medium text-primary hover:underline">
+                    {t('MAIN.LOGIN')}
+                </Link>
+            </>}
+        >
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
-                    <div>
-                        <label htmlFor="email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                            {t('REGISTRATION.EMAIL')}
-                        </label>
-                        <input
+                <FormField id="email" label={t('REGISTRATION.EMAIL')} error={errors.email} t={t}>
+                    <Input
                         id="email"
                         type="email"
                         autoComplete="email"
-                            className={errors.email ? inputErrorClass : inputClass}
+                        aria-invalid={!!errors.email}
                         {...register('email')}
                     />
-                        {renderError('email')}
-                    </div>
+                </FormField>
 
-                    <div>
-                        <label htmlFor="password" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                            {t('REGISTRATION.PASSWORD')}
-                        </label>
-                        <input
+                <FormField id="password" label={t('REGISTRATION.PASSWORD')} error={errors.password} t={t}>
+                    <Input
                         id="password"
                         type="password"
                         autoComplete="new-password"
-                            className={errors.password ? inputErrorClass : inputClass}
+                        aria-invalid={!!errors.password}
                         {...register('password')}
                     />
-                        {renderError('password')}
-                    </div>
+                </FormField>
 
-                    <div>
-                        <label htmlFor="passwordConfirmation" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                            {t('REGISTRATION.PASSWORD_CONFIRMATION')}
-                        </label>
-                        <input
+                <FormField id="passwordConfirmation" label={t('REGISTRATION.PASSWORD_CONFIRMATION')} error={errors.passwordConfirmation} t={t}>
+                    <Input
                         id="passwordConfirmation"
                         type="password"
                         autoComplete="new-password"
-                            className={errors.passwordConfirmation ? inputErrorClass : inputClass}
+                        aria-invalid={!!errors.passwordConfirmation}
                         {...register('passwordConfirmation')}
                     />
-                        {renderError('passwordConfirmation')}
-                    </div>
+                </FormField>
 
-                    <div>
-                        <label htmlFor="inviteCode" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                            {t('REGISTRATION.INVITE_CODE')}
-                        </label>
-                        <input
+                <FormField id="inviteCode" label={t('REGISTRATION.INVITE_CODE')} error={errors.inviteCode} t={t}>
+                    <Input
                         id="inviteCode"
                         type="text"
-                            className={errors.inviteCode ? inputErrorClass : inputClass}
+                        aria-invalid={!!errors.inviteCode}
                         {...register('inviteCode')}
                     />
-                        {renderError('inviteCode')}
-                    </div>
+                </FormField>
 
-                    <div>
-                        <label htmlFor="steamId" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                            {t('REGISTRATION.STEAM_ID')}
-                        </label>
-                        <input
+                <FormField id="steamId" label={t('REGISTRATION.STEAM_ID')} error={errors.steamId} t={t}>
+                    <Input
                         id="steamId"
                         type="text"
                         inputMode="numeric"
-                            className={errors.steamId ? inputErrorClass : inputClass}
+                        aria-invalid={!!errors.steamId}
                         {...register('steamId')}
                     />
-                        {renderError('steamId')}
-                    </div>
+                </FormField>
 
-                    <button
-                        type="submit"
-                        disabled={isSubmitting}
-                        className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold rounded-lg transition-colors duration-200"
-                    >
-                        {isSubmitting ? '...' : t('REGISTRATION.SUBMIT')}
-                    </button>
+                <Button type="submit" disabled={isSubmitting} className="w-full">
+                    {isSubmitting && <Loader2 className="animate-spin"/>}
+                    {t('REGISTRATION.SUBMIT')}
+                </Button>
             </form>
 
-                {feedback.message && (
-                    <div
-                        className={`mt-6 p-4 rounded-lg text-sm text-center ${
-                            feedback.isError
-                                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                                : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                        }`}
-                    >
-                        {feedback.message}
-                    </div>
-                )}
-
-                <p className="mt-6 text-sm text-center text-slate-600 dark:text-slate-400">
-                    {t('REGISTRATION.HAVE_ACCOUNT')}{' '}
-                    <Link to="/login" className="text-blue-600 hover:text-blue-500 font-semibold">
-                        {t('MAIN.LOGIN')}
-                    </Link>
-                </p>
-            </div>
-        </div>
+            <FeedbackAlert message={feedback.message} isError={feedback.isError}/>
+        </AuthLayout>
     );
 }

src/pages/SettingsPage.jsx

@@ -4,6 +4,17 @@ import {useTranslation} from 'react-i18next';
 import {useForm} from 'react-hook-form';
 import {zodResolver} from '@hookform/resolvers/zod';
 
+import {Gamepad2, Loader2, Save, SlidersHorizontal, UserRound} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {Skeleton} from '@/components/ui/skeleton';
+import {Switch} from '@/components/ui/switch';
+import FormField from '../components/FormField.jsx';
 import {settingsSchema} from '../utils/validation.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 
@@ -13,13 +24,6 @@ const BACKEND_ERROR_KEY = {
 
 const SUPPORTED_LANGUAGES = ['en', 'de'];
 
-const inputClass =
-    'w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none';
-const inputErrorClass =
-    'w-full px-4 py-2 border border-red-500 dark:border-red-500 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:outline-none';
-const readOnlyClass =
-    'w-full px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-100 dark:bg-slate-900 text-slate-500 dark:text-slate-400 cursor-not-allowed';
-
 const formatDate = (value, locale) => {
     if (!value) return '—';
     try {
@@ -37,7 +41,6 @@ export default function SettingsPage() {
     const [profile, setProfile] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
-    const [feedback, setFeedback] = useState({message: '', isError: false});
 
     const {
         register,
@@ -121,20 +124,17 @@ export default function SettingsPage() {
             if (!response.ok) {
                 const data = await response.json().catch(() => ({}));
                 const mappedKey = BACKEND_ERROR_KEY[data.code];
-                setFeedback({
-                    message: mappedKey ? t(mappedKey) : data.message || t('SETTINGS.ERROR_SAVE'),
-                    isError: true,
-                });
+                toast.error(mappedKey ? t(mappedKey) : data.message || t('SETTINGS.ERROR_SAVE'));
                 return {ok: false};
             }
 
             const data = await response.json();
             localStorage.setItem('tbp_jwt', data.token); // Core reads the steamId from the token
-            setFeedback({message: t('SETTINGS.SAVED'), isError: false});
+            toast.success(t('SETTINGS.SAVED'));
             return {ok: true};
         } catch (err) {
             console.error('Settings save error:', err);
-            setFeedback({message: t('INFO.ERROR.NETWORK_FAILURE'), isError: true});
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
             return {ok: false};
         }
     };
@@ -149,8 +149,7 @@ export default function SettingsPage() {
         });
     };
 
-    const handleLanguageChange = async (event) => {
-        const next = event.target.value;
+    const handleLanguageChange = async (next) => {
         setLanguage(next); // apply on the fly
         await persistSettings({
             useDarkTheme: isDarkMode,
@@ -170,167 +169,98 @@ export default function SettingsPage() {
         }
     };
 
-    const renderError = (field) =>
-        errors[field] && (
-            <p className="mt-1 text-sm text-red-600 dark:text-red-400">{t(errors[field].message)}</p>
-        );
-
     if (isLoading) {
         return (
-            <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white">
-                {t('SETTINGS.LOADING')}
+            <div className="w-full max-w-2xl mx-auto p-4 md:p-8 space-y-6">
+                <Skeleton className="h-9 w-48"/>
+                <Skeleton className="h-56 rounded-xl"/>
+                <Skeleton className="h-40 rounded-xl"/>
+                <Skeleton className="h-44 rounded-xl"/>
             </div>
         );
     }
 
     if (loadError) {
-        return (
-            <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 text-red-500">
-                {loadError}
-            </div>
-        );
+        return <div className="py-24 text-center text-destructive">{loadError}</div>;
     }
 
+    const accountRows = [
+        [t('SETTINGS.EMAIL'), profile?.email],
+        [t('SETTINGS.ROLE'), profile?.role],
+        [t('SETTINGS.CREATED_DATE'), formatDate(profile?.createdDate, i18n.language)],
+        [t('SETTINGS.LAST_LOGIN'), formatDate(profile?.lastLogin, i18n.language)],
+    ];
+
     return (
-        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
-            <div className="max-w-2xl mx-auto space-y-8">
-                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
-                    <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
-                        {t('SETTINGS.TITLE')}
-                    </h1>
+        <div className="w-full max-w-2xl mx-auto p-4 md:p-8 space-y-6">
+            <h1 className="text-3xl font-bold tracking-tight">{t('SETTINGS.TITLE')}</h1>
 
-                    {/* Read-only account info */}
-                    <section className="space-y-4 mb-8">
-                        <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
-                            {t('SETTINGS.ACCOUNT')}
-                        </h2>
-                        <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                {t('SETTINGS.EMAIL')}
-                            </label>
-                            <input type="text" value={profile?.email ?? ''} readOnly className={readOnlyClass}/>
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2"><UserRound className="size-4 text-primary"/>{t('SETTINGS.ACCOUNT')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <dl className="divide-y">
+                        {accountRows.map(([label, value]) => (
+                            <div key={label} className="flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
+                                <dt className="text-sm text-muted-foreground">{label}</dt>
+                                <dd className="text-sm font-medium break-all">{value || '—'}</dd>
                             </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                    {t('SETTINGS.ROLE')}
-                                </label>
-                                <input type="text" value={profile?.role ?? ''} readOnly className={readOnlyClass}/>
-                            </div>
-                            <div>
-                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                    {t('SETTINGS.CREATED_DATE')}
-                                </label>
-                                <input
-                                    type="text"
-                                    value={formatDate(profile?.createdDate, i18n.language)}
-                                    readOnly
-                                    className={readOnlyClass}
-                                />
-                            </div>
-                        </div>
-                        <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                {t('SETTINGS.LAST_LOGIN')}
-                            </label>
-                            <input
-                                type="text"
-                                value={formatDate(profile?.lastLogin, i18n.language)}
-                                readOnly
-                                className={readOnlyClass}
-                            />
-                        </div>
-                    </section>
-
-                    {/* Preferences — live */}
-                    <section className="space-y-4 mb-8">
-                        <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
-                            {t('SETTINGS.PREFERENCES')}
-                        </h2>
-
-                        <div className="flex items-center justify-between">
-                            <label htmlFor="useDarkTheme" className="text-sm font-medium text-slate-700 dark:text-slate-300">
-                                {t('SETTINGS.DARK_THEME')}
-                            </label>
-                            <button
-                                id="useDarkTheme"
-                                type="button"
-                                role="switch"
-                                aria-checked={isDarkMode}
-                                onClick={handleDarkThemeToggle}
-                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                                    isDarkMode ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-600'
-                                }`}
-                            >
-                                <span
-                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                                        isDarkMode ? 'translate-x-6' : 'translate-x-1'
-                                    }`}
-                                />
-                            </button>
-                        </div>
-
-                        <div>
-                            <label htmlFor="language" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                {t('SETTINGS.LANGUAGE')}
-                            </label>
-                            <select
-                                id="language"
-                                value={i18n.language}
-                                onChange={handleLanguageChange}
-                                className={inputClass}
-                            >
-                                {SUPPORTED_LANGUAGES.map((lang) => (
-                                    <option key={lang} value={lang}>
-                                        {t(`SETTINGS.LANGUAGE_OPTIONS.${lang.toUpperCase()}`)}
-                                    </option>
                         ))}
-                            </select>
-                        </div>
-                    </section>
+                    </dl>
+                </CardContent>
+            </Card>
 
-                    {/* Steam ID — explicit save */}
-                    <section>
-                        <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-4">
-                            {t('SETTINGS.STEAM')}
-                        </h2>
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2"><SlidersHorizontal className="size-4 text-primary"/>{t('SETTINGS.PREFERENCES')}</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    <div className="flex items-center justify-between gap-4">
+                        <Label htmlFor="useDarkTheme">{t('SETTINGS.DARK_THEME')}</Label>
+                        <Switch id="useDarkTheme" checked={isDarkMode} onCheckedChange={handleDarkThemeToggle}/>
+                    </div>
+                    <div className="flex items-center justify-between gap-4">
+                        <Label htmlFor="language">{t('SETTINGS.LANGUAGE')}</Label>
+                        <Select value={i18n.language} onValueChange={handleLanguageChange}>
+                            <SelectTrigger id="language" className="w-40">
+                                <SelectValue/>
+                            </SelectTrigger>
+                            <SelectContent>
+                                {SUPPORTED_LANGUAGES.map((lang) => (
+                                    <SelectItem key={lang} value={lang}>
+                                        {t(`SETTINGS.LANGUAGE_OPTIONS.${lang.toUpperCase()}`)}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2"><Gamepad2 className="size-4 text-primary"/>{t('SETTINGS.STEAM')}</CardTitle>
+                </CardHeader>
+                <CardContent>
                     <form onSubmit={handleSubmit(onSubmitSteamId)} className="space-y-4" noValidate>
-                            <div>
-                                <label htmlFor="steamId" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                    {t('SETTINGS.STEAM_ID')}
-                                </label>
-                                <input
+                        <FormField id="steamId" label={t('SETTINGS.STEAM_ID')} error={errors.steamId} t={t}>
+                            <Input
                                 id="steamId"
                                 type="text"
                                 inputMode="numeric"
-                                    className={errors.steamId ? inputErrorClass : inputClass}
+                                className="font-mono"
+                                aria-invalid={!!errors.steamId}
                                 {...register('steamId')}
                             />
-                                {renderError('steamId')}
-                            </div>
-                            <button
-                                type="submit"
-                                disabled={isSubmitting}
-                                className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold rounded-lg transition-colors duration-200"
-                            >
-                                {isSubmitting ? '...' : t('SETTINGS.SAVE_STEAM_ID')}
-                            </button>
+                        </FormField>
+                        <Button type="submit" disabled={isSubmitting}>
+                            {isSubmitting ? <Loader2 className="animate-spin"/> : <Save/>}
+                            {t('SETTINGS.SAVE_STEAM_ID')}
+                        </Button>
                     </form>
-                    </section>
-
-                    {feedback.message && (
-                        <div
-                            className={`mt-6 p-4 rounded-lg text-sm text-center ${
-                                feedback.isError
-                                    ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                                    : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                            }`}
-                        >
-                            {feedback.message}
-                        </div>
-                    )}
-                </div>
-            </div>
+                </CardContent>
+            </Card>
         </div>
     );
 }

src/style.css

@@ -1,3 +1,85 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/inter";
 
 @custom-variant dark (&:is(.dark *));
+
+/* shadcn/ui theme tokens: zinc surfaces, violet accent. */
+:root {
+    --radius: 0.75rem;
+    --background: oklch(0.985 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.969 0.016 293.756);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.943 0.029 294.588);
+    --accent-foreground: oklch(0.38 0.189 293.745);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.606 0.25 292.717);
+}
+
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.606 0.25 292.717);
+    --primary-foreground: oklch(0.969 0.016 293.756);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.283 0.141 291.089);
+    --accent-foreground: oklch(0.894 0.057 293.283);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.541 0.281 293.009);
+}
+
+@theme inline {
+    --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground antialiased;
+    }
+}

src/utils/games.js

@@ -9,3 +9,6 @@ export const formatPlaytime = (minutes) => {
     const hours = Math.round(minutes / 6) / 10;
     return hours >= 10 ? `${Math.round(hours)}h` : `${hours.toFixed(1)}h`;
 };
+
+// 460x215 store header. Not every app has one; callers need an onError fallback.
+export const coverUrl = (appid) => `https://cdn.cloudflare.steamstatic.com/steam/apps/${appid}/header.jpg`;

vite.config.js

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
@@ -7,4 +8,9 @@ export default defineConfig({
         react(),
         tailwindcss(),
     ],
+    resolve: {
+        alias: {
+            '@': path.resolve(import.meta.dirname, './src'),
+        },
+    },
 });