diff --git a/.gitignore b/.gitignore
index da6f209..cc66455 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,3 +56,5 @@ k8s/*-secret.yaml
 
 # Development files
 dev-*
+
+*.log
diff --git a/internal/database/database.go b/internal/database/database.go
index e3eea0f..c43982d 100644
--- a/internal/database/database.go
+++ b/internal/database/database.go
@@ -31,7 +31,7 @@ type Credential struct {
 }
 
 func New(dbPath string) (*DB, error) {
-	conn, err := sql.Open("sqlite3", dbPath+"?_fk=1")
+	conn, err := sql.Open("sqlite", dbPath+"?_fk=1")
 	if err != nil {
 		return nil, err
 	}
diff --git a/web/index.html b/web/index.html
index aae9eff..1184732 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,85 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="auto">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Passkey Auth - Admin</title>
+    <meta name="color-scheme" content="light dark">
+    <title>Passkey Authentication</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .container {
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            padding: 2rem;
-            width: 100%;
-            max-width: 800px;
-            margin: 1rem;
-        }
-
-        .header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-
-        .header h1 {
-            color: #333;
-            font-size: 2rem;
-            margin-bottom: 0.5rem;
-        }
-
-        .header p {
-            color: #666;
-            font-size: 1rem;
-        }
-
-        .tabs {
-            display: flex;
-            margin-bottom: 2rem;
-            border-bottom: 1px solid #eee;
-        }
-
-        .tab {
-            background: none;
-            border: none;
-            padding: 1rem 2rem;
-            cursor: pointer;
-            font-size: 1rem;
-            color: #666;
-            border-bottom: 2px solid transparent;
-            transition: all 0.3s ease;
-        }
-
-        .tab.active {
-            color: #667eea;
-            border-bottom-color: #667eea;
-        }
-
-        .tab-content {
-            display: none;
-        }
-
-        .tab-content.active {
-            display: block;
-        }
-
-        .auth-panel, .welcome-panel, .admin-panel {
-            margin-bottom: 2rem;
-        }
-
+        /* Minimal custom styles - let PicoCSS handle most styling */
         .auth-toggle {
             text-align: center;
             margin-top: 1rem;
@@ -88,200 +16,180 @@
         .link-btn {
             background: none;
             border: none;
-            color: #667eea;
+            color: var(--pico-primary);
             cursor: pointer;
             text-decoration: underline;
             font-size: 0.9rem;
+            padding: 0;
         }
 
         .link-btn:hover {
-            color: #764ba2;
+            opacity: 0.8;
         }
 
-        .welcome-panel {
-            text-align: center;
-        }
-
-        .welcome-actions {
-            margin-top: 1.5rem;
-        }
-
-        .admin-panel {
-            border-top: 1px solid #eee;
-            padding-top: 2rem;
-        }
-
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: #333;
+        .status-badge {
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            border-radius: var(--pico-border-radius);
+            font-size: 0.75rem;
             font-weight: 500;
+            white-space: nowrap;
         }
 
-        input[type="text"], input[type="email"] {
-            width: 100%;
-            padding: 0.75rem;
-            border: 2px solid #eee;
-            border-radius: 8px;
-            font-size: 1rem;
-            transition: border-color 0.3s ease;
+        .status-approved {
+            background-color: var(--pico-ins-color);
+            color: var(--pico-ins-inverse);
         }
 
-        input[type="text"]:focus, input[type="email"]:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-
-        .btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            padding: 0.75rem 2rem;
-            border-radius: 8px;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .btn:hover {
-            transform: translateY(-2px);
-        }
-
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .btn-danger {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-        }
-
-        .users-list {
-            margin-top: 2rem;
-        }
-
-        .user-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            border: 1px solid #eee;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-        }
-
-        .user-info {
-            flex-grow: 1;
-        }
-
-        .user-info h3 {
-            color: #333;
-            margin-bottom: 0.25rem;
-        }
-
-        .user-info p {
-            color: #666;
-            font-size: 0.9rem;
+        .status-pending {
+            background-color: var(--pico-del-color);
+            color: var(--pico-del-inverse);
         }
 
         .user-actions {
             display: flex;
-            align-items: center;
             gap: 0.5rem;
+            align-items: center;
+            flex-wrap: wrap;
+            justify-content: flex-end;
         }
 
-        .status-badge {
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            margin-right: 1rem;
+        /* Hide panels by default */
+        .welcome-panel, .admin-panel {
+            display: none;
         }
 
-        .status-approved {
-            background: #d4edda;
-            color: #155724;
-        }
-
-        .status-pending {
-            background: #fff3cd;
-            color: #856404;
-        }
-
-        .alert {
-            padding: 1rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-        }
-
-        .alert-success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-
-        .alert-error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-
-        .loading {
+        /* Better spacing for main header */
+        body > main > header {
             text-align: center;
-            padding: 2rem;
-            color: #666;
+            margin-bottom: 2rem;
+        }
+
+        /* Improve form layout */
+        #authForm button[type="submit"] {
+            margin-top: 1rem;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 576px) {
+            .user-actions {
+                justify-content: center;
+                margin-top: 1rem;
+            }
+            
+            .grid {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>🔐 Passkey Auth</h1>
-            <p id="headerSubtitle">Secure Authentication</p>
-        </div>
+    <main class="container">
+        <header>
+            <hgroup>
+                <h1>🔐 Passkey Authentication</h1>
+                <p id="headerSubtitle">Secure passwordless authentication</p>
+            </hgroup>
+            <nav>
+                <ul>
+                    <li></li>
+                </ul>
+                <ul>
+                    <li>
+                        <details class="dropdown">
+                            <summary>Theme</summary>
+                            <ul>
+                                <li><a href="#" onclick="setTheme('auto')">Auto</a></li>
+                                <li><a href="#" onclick="setTheme('light')">Light</a></li>
+                                <li><a href="#" onclick="setTheme('dark')">Dark</a></li>
+                            </ul>
+                        </details>
+                    </li>
+                </ul>
+            </nav>
+        </header>
 
-        <!-- Initial Auth Panel -->
-        <div id="authPanel" class="auth-panel">
-            <h2 id="authTitle">Sign In</h2>
-            <form id="authForm">
-                <div class="form-group">
-                    <label for="email">Email Address:</label>
-                    <input type="email" id="email" name="email" required>
+        <!-- Authentication Section -->
+        <section id="authPanel" class="auth-panel">
+            <article>
+                <header>
+                    <h2 id="authTitle">Sign in to your account</h2>
+                    <p>Use your passkey for secure authentication</p>
+                </header>
+                
+                <form id="authForm">
+                    <label for="email">
+                        Email address
+                        <input type="email" id="email" name="email" placeholder="Enter your email address" required>
+                    </label>
+                    
+                    <button type="submit" id="authSubmitBtn">
+                        Sign in with passkey
+                    </button>
+                </form>
+                
+                <footer class="auth-toggle">
+                    <button type="button" class="link-btn" id="toggleModeBtn">
+                        Don't have an account? Create one
+                    </button>
+                </footer>
+            </article>
+        </section>
+
+        <!-- Welcome Section -->
+        <section id="welcomePanel" class="welcome-panel">
+            <article>
+                <header>
+                    <h2>Welcome back!</h2>
+                    <p>You're successfully authenticated</p>
+                </header>
+                
+                <div id="welcomeMessage"></div>
+                
+                <footer>
+                    <button type="button" class="secondary" id="logoutBtn">
+                        Sign out
+                    </button>
+                </footer>
+            </article>
+        </section>
+
+        <!-- Admin Panel -->
+        <section id="adminPanel" class="admin-panel">
+            <article>
+                <header>
+                    <h3>User Management</h3>
+                    <p>Manage user accounts and permissions</p>
+                </header>
+                
+                <button onclick="loadUsers()" class="outline">
+                    Refresh users
+                </button>
+                
+                <div id="usersList" class="users-list">
+                    <article aria-busy="true">Loading users...</article>
                 </div>
-                <button type="submit" class="btn" id="authSubmitBtn">Sign In with Passkey</button>
-            </form>
-            <div class="auth-toggle">
-                <button type="button" class="link-btn" id="toggleModeBtn">Don't have an account? Sign up</button>
-            </div>
-        </div>
-
-        <!-- Welcome Panel (shown after auth) -->
-        <div id="welcomePanel" class="welcome-panel" style="display: none;">
-            <h2>Welcome!</h2>
-            <div id="welcomeMessage"></div>
-            <div class="welcome-actions">
-                <button type="button" class="btn btn-danger" id="logoutBtn">Logout</button>
-            </div>
-        </div>
-
-        <!-- Admin Panel (shown for admin users) -->
-        <div id="adminPanel" class="admin-panel" style="display: none;">
-            <h2>Manage Users</h2>
-            <button class="btn" onclick="loadUsers()">Refresh Users</button>
-            <div id="usersList" class="users-list">
-                <div class="loading">Loading users...</div>
-            </div>
-        </div>
+            </article>
+        </section>
 
+        <!-- Alerts Container -->
         <div id="alerts"></div>
-    </div>
+    </main>
 
     <script>
+        // Theme management
+        function setTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('pico-theme', theme);
+        }
+
+        // Load saved theme or use auto
+        function loadTheme() {
+            const savedTheme = localStorage.getItem('pico-theme') || 'auto';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+        }
+
         // Base64/Base64URL decoding functions for WebAuthn
         function base64ToArrayBuffer(base64) {
             if (!base64 || typeof base64 !== 'string') {
@@ -494,7 +402,7 @@
             document.getElementById('authPanel').style.display = 'block';
             document.getElementById('welcomePanel').style.display = 'none';
             document.getElementById('adminPanel').style.display = 'none';
-            document.getElementById('headerSubtitle').textContent = 'Secure Authentication';
+            document.getElementById('headerSubtitle').textContent = 'Secure passwordless authentication';
         }
 
         function showWelcomePanel(user) {
@@ -504,10 +412,27 @@
             
             const welcomeMessage = document.getElementById('welcomeMessage');
             welcomeMessage.innerHTML = `
-                <div class="alert alert-success">
-                    <strong>Welcome back, ${user.display_name}!</strong><br>
-                    <small>${user.email}</small>
-                </div>
+                <p>Hello, <strong>${user.display_name}</strong>! You're successfully authenticated and ready to go.</p>
+                
+                <details>
+                    <summary>Account Information</summary>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td><strong>Name</strong></td>
+                                <td>${user.display_name}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Email</strong></td>
+                                <td>${user.email}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Role</strong></td>
+                                <td>${user.is_admin ? '<span class="status-badge status-approved">Administrator</span>' : '<span class="status-badge">User</span>'}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </details>
             `;
 
             // Show admin panel if user is admin
@@ -524,15 +449,18 @@
             const authTitle = document.getElementById('authTitle');
             const authSubmitBtn = document.getElementById('authSubmitBtn');
             const toggleModeBtn = document.getElementById('toggleModeBtn');
+            const authDescription = document.querySelector('#authPanel article header p');
 
             if (isSignUpMode) {
-                authTitle.textContent = 'Sign Up';
-                authSubmitBtn.textContent = 'Sign Up with Passkey';
+                authTitle.textContent = 'Create your account';
+                authSubmitBtn.textContent = 'Create account with passkey';
                 toggleModeBtn.textContent = 'Already have an account? Sign in';
+                authDescription.textContent = 'Create a new account with secure passkey authentication';
             } else {
-                authTitle.textContent = 'Sign In';
-                authSubmitBtn.textContent = 'Sign In with Passkey';
-                toggleModeBtn.textContent = "Don't have an account? Sign up";
+                authTitle.textContent = 'Sign in to your account';
+                authSubmitBtn.textContent = 'Sign in with passkey';
+                toggleModeBtn.textContent = "Don't have an account? Create one";
+                authDescription.textContent = 'Use your passkey for secure authentication';
             }
         }
 
@@ -543,11 +471,11 @@
             }).then(() => {
                 currentUser = null;
                 showAuthPanel();
-                showAlert('Logged out successfully');
+                showAlert('You have been signed out successfully');
                 // Clear email input
                 document.getElementById('email').value = '';
             }).catch(error => {
-                showAlert('Logout failed: ' + error.message, 'error');
+                showAlert('Sign out failed: ' + error.message, 'error');
             });
         }
 
@@ -558,9 +486,21 @@
         // Alert functions
         function showAlert(message, type = 'success') {
             const alertsContainer = document.getElementById('alerts');
-            const alert = document.createElement('div');
-            alert.className = `alert alert-${type}`;
-            alert.textContent = message;
+            const alert = document.createElement('article');
+            
+            // Use appropriate styling based on type
+            if (type === 'success') {
+                alert.style.borderLeftColor = 'var(--pico-ins-color)';
+                alert.style.borderLeftWidth = '4px';
+                alert.style.borderLeftStyle = 'solid';
+                alert.innerHTML = `<strong>Success:</strong> ${message}`;
+            } else {
+                alert.style.borderLeftColor = 'var(--pico-del-color)';
+                alert.style.borderLeftWidth = '4px';
+                alert.style.borderLeftStyle = 'solid';
+                alert.innerHTML = `<strong>Error:</strong> ${message}`;
+            }
+            
             alertsContainer.appendChild(alert);
 
             setTimeout(() => {
@@ -633,8 +573,11 @@
             
             // Disable submit button during processing
             submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
             const originalText = submitBtn.textContent;
-            submitBtn.textContent = isSignUpMode ? 'Signing up...' : 'Signing in...';
+            submitBtn.textContent = isSignUpMode ? 
+                'Creating account...' : 
+                'Signing in...';
 
             try {
                 if (isSignUpMode) {
@@ -643,10 +586,11 @@
                     await handleSignIn(email);
                 }
             } catch (error) {
-                showAlert(`${isSignUpMode ? 'Sign up' : 'Sign in'} failed: ${error.message}`, 'error');
+                showAlert(`${isSignUpMode ? 'Account creation' : 'Sign in'} failed: ${error.message}`, 'error');
             } finally {
                 // Re-enable submit button
                 submitBtn.disabled = false;
+                submitBtn.removeAttribute('aria-busy');
                 submitBtn.textContent = originalText;
             }
         });
@@ -707,7 +651,7 @@
                 throw new Error(errorText);
             }
 
-            showAlert('Account created successfully!');
+            showAlert('Account created successfully! Welcome to the platform.');
             
             // Check auth status to show welcome panel
             setTimeout(checkAuthStatus, 100);
@@ -768,7 +712,7 @@
         // Users management
         async function loadUsers() {
             const usersList = document.getElementById('usersList');
-            usersList.innerHTML = '<div class="loading">Loading users...</div>';
+            usersList.innerHTML = '<article aria-busy="true">Loading users...</article>';
 
             try {
                 const response = await fetch('/api/users', {
@@ -778,7 +722,7 @@
                 if (response.status === 403) {
                     // User is not admin, hide the tab
                     hideUsersTab();
-                    showAlert('Access denied: Admin privileges required', 'error');
+                    showAlert('Access denied: Administrator privileges required', 'error');
                     return;
                 }
                 
@@ -794,22 +738,25 @@
                 }
 
                 usersList.innerHTML = users.map(user => `
-                    <div class="user-item">
-                        <div class="user-info">
-                            <h3>${user.display_name}</h3>
-                            <p>${user.email} • Created: ${new Date(user.created_at).toLocaleDateString()}</p>
-                        </div>
-                        <div class="user-actions">
+                    <article>
+                        <header>
+                            <h4>${user.display_name}</h4>
+                            <p>${user.email}</p>
+                        </header>
+                        
+                        <p><small>Created: ${new Date(user.created_at).toLocaleDateString()}</small></p>
+                        
+                        <footer class="user-actions">
                             <span class="status-badge ${user.approved ? 'status-approved' : 'status-pending'}">
-                                ${user.approved ? 'Approved' : 'Pending'}
+                                ${user.approved ? 'Approved' : 'Pending Approval'}
                             </span>
-                            ${!user.approved ? `<button class="btn" onclick="approveUser(${user.id})">Approve</button>` : ''}
-                            <button class="btn btn-danger" onclick="deleteUser(${user.id})">Delete</button>
-                        </div>
-                    </div>
+                            ${!user.approved ? `<button class="outline" onclick="approveUser(${user.id})">Approve User</button>` : ''}
+                            <button class="secondary" onclick="deleteUser(${user.id})">Delete User</button>
+                        </footer>
+                    </article>
                 `).join('');
             } catch (error) {
-                usersList.innerHTML = `<div class="alert alert-error">Failed to load users: ${error.message}</div>`;
+                usersList.innerHTML = `<article><mark>Failed to load users: ${error.message}</mark></article>`;
             }
         }
 
@@ -826,14 +773,15 @@
                     },
                     body: JSON.stringify({
                         approved: true
-                    })
+                    }),
+                    credentials: 'include'
                 });
 
                 if (!response.ok) {
                     throw new Error('Failed to approve user');
                 }
 
-                showAlert('User approved successfully', 'success');
+                showAlert('User approved successfully');
                 loadUsers(); // Refresh the users list
             } catch (error) {
                 showAlert(`Failed to approve user: ${error.message}`, 'error');
@@ -841,20 +789,21 @@
         }
 
         async function deleteUser(userId) {
-            if (!confirm('Are you sure you want to delete this user?')) {
+            if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
                 return;
             }
 
             try {
                 const response = await fetch(`/api/users/${userId}`, {
-                    method: 'DELETE'
+                    method: 'DELETE',
+                    credentials: 'include'
                 });
 
                 if (!response.ok) {
                     throw new Error('Failed to delete user');
                 }
 
-                showAlert('User deleted successfully!');
+                showAlert('User deleted successfully');
                 loadUsers();
             } catch (error) {
                 showAlert(`Failed to delete user: ${error.message}`, 'error');
@@ -863,6 +812,9 @@
 
         // Initialize page
         document.addEventListener('DOMContentLoaded', async () => {
+            // Load theme first
+            loadTheme();
+            
             // Check authentication status to determine initial UI state
             await checkAuthStatus();
         });
