diff --git a/app/Controllers/ProfileController.php b/app/Controllers/ProfileController.php
index e0750d1..6ba8f58 100644
--- a/app/Controllers/ProfileController.php
+++ b/app/Controllers/ProfileController.php
@@ -8,6 +8,7 @@ use App\Models\User;
 use App\Models\SessionManager;
 use App\Models\RememberToken;
 use App\Services\Logger;
+use App\Services\TwoFactorService;
 use App\Helpers\AvatarHelper;
 
 class ProfileController extends Controller
@@ -71,10 +72,30 @@ class ProfileController extends Controller
         // Format sessions for display (adds deviceIcon, browserInfo, timeAgo, sessionAge)
         $formattedSessions = \App\Helpers\SessionHelper::formatForDisplay($sessions);
 
+        // Avatar data
+        $avatar = AvatarHelper::getAvatar($user, 80);
+
+        // 2FA status
+        $twoFactorService = new TwoFactorService();
+        $twoFactorPolicy = $twoFactorService->getTwoFactorPolicy();
+
+        $backupCodes = !empty($user['two_factor_backup_codes'])
+            ? json_decode($user['two_factor_backup_codes'], true)
+            : [];
+
+        $twoFactorStatus = [
+            'enabled' => !empty($user['two_factor_enabled']),
+            'setup_at' => $user['two_factor_setup_at'] ?? null,
+            'backup_codes_count' => is_array($backupCodes) ? count($backupCodes) : 0,
+            'required' => $twoFactorService->isTwoFactorRequired($userId),
+        ];
+
         $this->view('profile/index', [
             'user' => $user,
             'sessions' => $formattedSessions,
-            'userModel' => $this->userModel,
+            'avatar' => $avatar,
+            'twoFactorStatus' => $twoFactorStatus,
+            'twoFactorPolicy' => $twoFactorPolicy,
             'title' => 'My Profile'
         ]);
     }
diff --git a/app/Controllers/SettingsController.php b/app/Controllers/SettingsController.php
index b6d5351..23be609 100644
--- a/app/Controllers/SettingsController.php
+++ b/app/Controllers/SettingsController.php
@@ -70,6 +70,72 @@ class SettingsController extends Controller
         // Status notification triggers
         $statusTriggers = $this->settingModel->getNotificationStatusTriggers();
 
+        // Timezone lists for the Application tab
+        $popularTimezones = [
+            'UTC' => 'UTC',
+            'America/New_York' => 'Eastern Time (US)',
+            'America/Chicago' => 'Central Time (US)',
+            'America/Denver' => 'Mountain Time (US)',
+            'America/Los_Angeles' => 'Pacific Time (US)',
+            'Europe/London' => 'London',
+            'Europe/Paris' => 'Paris',
+            'Asia/Tokyo' => 'Tokyo',
+            'Australia/Sydney' => 'Sydney'
+        ];
+        $allTimezones = timezone_identifiers_list();
+
+        // Determine which notification preset is selected
+        $currentNotificationDays = $settings['notification_days_before'] ?? '30,15,7,3,1';
+        $selectedPreset = 'custom';
+        foreach ($notificationPresets as $key => $preset) {
+            if ($preset['value'] === $currentNotificationDays) {
+                $selectedPreset = $key;
+                break;
+            }
+        }
+
+        // Cron path for System tab
+        $cronPath = realpath(defined('PATH_ROOT') ? PATH_ROOT . 'cron/check_domains.php' : __DIR__ . '/../../cron/check_domains.php') ?: 'cron/check_domains.php';
+
+        // Cached update state for Updates tab
+        $cachedUpdateAvailable = false;
+        $cachedUpdateData = null;
+        $currentVer = $appSettings['app_version'] ?? '0';
+        $latestVer = $updateSettings['latest_available_version'] ?? null;
+        $updateChannel = $updateSettings['update_channel'] ?? 'stable';
+        $commitsBehind = (int)($updateSettings['commits_behind_count'] ?? 0);
+        $installedSha = $updateSettings['installed_commit_sha'] ?? '';
+        $remoteSha = $updateSettings['latest_remote_sha'] ?? '';
+        if ($installedSha !== '' && $remoteSha !== '' && str_starts_with($installedSha, $remoteSha)) {
+            $commitsBehind = 0;
+        }
+        if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
+            $cachedUpdateAvailable = true;
+            $cachedUpdateData = [
+                'available' => true,
+                'type' => 'release',
+                'current_version' => $currentVer,
+                'latest_version' => $latestVer,
+                'release_notes' => $updateSettings['latest_release_notes'] ?? '',
+                'release_url' => $updateSettings['latest_release_url'] ?? '',
+                'published_at' => $updateSettings['latest_release_published_at'] ?? null,
+                'channel' => $updateChannel,
+            ];
+        } elseif ($updateChannel === 'latest' && $commitsBehind > 0) {
+            $cachedUpdateAvailable = true;
+            $cachedUpdateData = [
+                'available' => true,
+                'type' => 'hotfix',
+                'current_version' => $currentVer,
+                'commits_behind' => $commitsBehind,
+                'commit_messages' => [],
+                'channel' => $updateChannel,
+            ];
+        }
+
+        // Rollback availability
+        $rollbackAvailable = !empty($updateSettings['update_backup_path']) && file_exists($updateSettings['update_backup_path']);
+
         $this->view('settings/index', [
             'settings' => $settings,
             'appSettings' => $appSettings,
@@ -81,6 +147,13 @@ class SettingsController extends Controller
             'notificationPresets' => $notificationPresets,
             'checkIntervalPresets' => $checkIntervalPresets,
             'statusTriggers' => $statusTriggers,
+            'popularTimezones' => $popularTimezones,
+            'allTimezones' => $allTimezones,
+            'selectedPreset' => $selectedPreset,
+            'cronPath' => $cronPath,
+            'cachedUpdateAvailable' => $cachedUpdateAvailable,
+            'cachedUpdateData' => $cachedUpdateData,
+            'rollbackAvailable' => $rollbackAvailable,
             'title' => 'Settings'
         ]);
     }
diff --git a/app/Controllers/UserController.php b/app/Controllers/UserController.php
index a3a3f31..3be9227 100644
--- a/app/Controllers/UserController.php
+++ b/app/Controllers/UserController.php
@@ -49,6 +49,11 @@ class UserController extends Controller
         
         // Get filtered users
         $users = $this->userModel->getFiltered($filters, $sort, strtoupper($order), $perPage, $offset);
+
+        foreach ($users as &$u) {
+            $u['avatar'] = \App\Helpers\AvatarHelper::getAvatar($u, 40);
+        }
+        unset($u);
         
         $this->view('users/index', [
             'users' => $users,
@@ -240,6 +245,17 @@ class UserController extends Controller
         // Get 2FA status
         $twoFactorStatus = $this->userModel->getTwoFactorStatus($userId);
 
+        // Avatar for profile header
+        $userAvatar = \App\Helpers\AvatarHelper::getAvatar($user, 64);
+
+        // Registrar distribution
+        $registrarCounts = [];
+        foreach ($domains as $d) {
+            $reg = !empty($d['registrar']) ? $d['registrar'] : 'Unknown';
+            $registrarCounts[$reg] = ($registrarCounts[$reg] ?? 0) + 1;
+        }
+        arsort($registrarCounts);
+
         $this->view('users/show', [
             'title' => htmlspecialchars($user['full_name']) . ' - User Profile',
             'user' => $user,
@@ -248,6 +264,8 @@ class UserController extends Controller
             'tags' => $tags,
             'groups' => $groups,
             'twoFactorStatus' => $twoFactorStatus,
+            'userAvatar' => $userAvatar,
+            'registrarCounts' => $registrarCounts,
         ]);
     }
 
diff --git a/app/Services/ErrorHandler.php b/app/Services/ErrorHandler.php
index a204812..2b57662 100644
--- a/app/Services/ErrorHandler.php
+++ b/app/Services/ErrorHandler.php
@@ -297,7 +297,29 @@ class ErrorHandler
         $session_data = json_decode($errorData['session_data'], true);
         
         // Display debug page in development, clean 500 in production
-        if ($this->isDevelopment) {
+        $twigTemplate = $this->isDevelopment ? 'errors/debug.twig' : 'errors/500.twig';
+        $twigFile = __DIR__ . '/../Views/' . $twigTemplate;
+
+        if (file_exists($twigFile)) {
+            try {
+                $memory_usage_mb = round(($memory_usage ?? 0) / 1024 / 1024, 2);
+                $peak_memory_mb = round(memory_get_peak_usage(true) / 1024 / 1024, 2);
+                $errorContext = compact(
+                    'error_id', 'error_type', 'error_message', 'error_file', 'error_line',
+                    'stack_trace', 'request_method', 'request_uri', 'user_agent',
+                    'ip_address', 'php_version', 'memory_usage', 'memory_usage_mb',
+                    'peak_memory_mb', 'occurred_at', 'user_info', 'request_data', 'session_data'
+                );
+                echo \Core\TwigService::getInstance()->render($twigTemplate, $errorContext);
+            } catch (\Throwable $e) {
+                // Twig itself failed — fall back to raw PHP view
+                if ($this->isDevelopment) {
+                    require __DIR__ . '/../Views/errors/debug.php';
+                } else {
+                    require __DIR__ . '/../Views/errors/500.php';
+                }
+            }
+        } elseif ($this->isDevelopment) {
             require __DIR__ . '/../Views/errors/debug.php';
         } else {
             require __DIR__ . '/../Views/errors/500.php';
diff --git a/app/Services/TwoFactorService.php b/app/Services/TwoFactorService.php
index 2254934..2fca54d 100644
--- a/app/Services/TwoFactorService.php
+++ b/app/Services/TwoFactorService.php
@@ -38,14 +38,20 @@ class TwoFactorService
      */
     public function generateQrCodeDataUri(string $email, string $secret, string $appName = 'Domain Monitor'): string
     {
-        $qrCode = new QrCode($this->google2fa->getQRCodeUrl($appName, $email, $secret));
-        $qrCode->setSize(200);
-        $qrCode->setMargin(10);
-        
-        $writer = new PngWriter();
-        $result = $writer->write($qrCode);
-        
-        return 'data:image/png;base64,' . base64_encode($result->getString());
+        $previousLevel = error_reporting(error_reporting() & ~E_DEPRECATED);
+
+        try {
+            $qrCode = new QrCode($this->google2fa->getQRCodeUrl($appName, $email, $secret));
+            $qrCode->setSize(200);
+            $qrCode->setMargin(10);
+
+            $writer = new PngWriter();
+            $result = $writer->write($qrCode);
+
+            return 'data:image/png;base64,' . base64_encode($result->getString());
+        } finally {
+            error_reporting($previousLevel);
+        }
     }
 
     /**
diff --git a/app/Views/2fa/backup-codes.php b/app/Views/2fa/backup-codes.php
deleted file mode 100644
index 4075457..0000000
--- a/app/Views/2fa/backup-codes.php
+++ /dev/null
@@ -1,209 +0,0 @@
-<?php
-$title = '2FA Backup Codes';
-$pageTitle = '2FA Backup Codes';
-$pageDescription = 'Save these backup codes in a safe place';
-$pageIcon = 'fas fa-key';
-ob_start();
-?>
-
-<div class="max-w-2xl mx-auto">
-    <div class="bg-white shadow rounded-lg">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h3 class="text-lg font-semibold text-gray-900">2FA Backup Codes</h3>
-            <p class="text-sm text-gray-600 mt-1">Save these codes in a safe place - they can be used to access your account if you lose your authenticator device</p>
-        </div>
-
-        <div class="p-6">
-            <!-- Warning -->
-            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
-                <div class="flex items-start">
-                    <div class="flex-shrink-0">
-                        <i class="fas fa-exclamation-triangle text-red-400"></i>
-                    </div>
-                    <div class="ml-3">
-                        <h4 class="text-sm font-medium text-red-800">Important Security Notice</h4>
-                        <p class="text-sm text-red-700 mt-1">
-                            These backup codes are shown only once. Each code can only be used once. Store them securely and never share them with anyone.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Backup Codes -->
-            <div class="mb-6">
-                <div class="flex items-center justify-between mb-4">
-                    <h4 class="text-md font-semibold text-gray-900">Your Backup Codes</h4>
-                    <button onclick="printCodes()" class="text-sm text-primary hover:text-primary-dark">
-                        <i class="fas fa-print mr-1"></i>
-                        Print Codes
-                    </button>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="backup-codes">
-                    <?php foreach ($backupCodes as $index => $code): ?>
-                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border">
-                        <code class="font-mono text-sm text-gray-900"><?= htmlspecialchars($code) ?></code>
-                        <button onclick="copyCode('<?= htmlspecialchars($code) ?>', this)" 
-                                class="ml-2 px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
-                            <i class="fas fa-copy"></i>
-                        </button>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-            </div>
-
-            <!-- Instructions -->
-            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                <h4 class="text-sm font-medium text-blue-800 mb-2">How to use backup codes:</h4>
-                <ul class="text-sm text-blue-700 space-y-1">
-                    <li>• When logging in, enter a backup code instead of your 2FA code</li>
-                    <li>• Each backup code can only be used once</li>
-                    <li>• After using a code, it will be automatically removed from your account</li>
-                    <li>• If you run out of backup codes, you'll need to disable and re-enable 2FA</li>
-                </ul>
-            </div>
-
-            <!-- Actions -->
-            <div class="flex items-center justify-between pt-4 border-t border-gray-200">
-                <a href="/profile" class="text-sm text-gray-600 hover:text-gray-500">
-                    <i class="fas fa-arrow-left mr-1"></i>
-                    Back to Profile
-                </a>
-                <div class="flex space-x-3">
-                    <button onclick="downloadCodes()" 
-                            class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
-                        <i class="fas fa-download mr-2"></i>
-                        Download
-                    </button>
-                    <a href="/" 
-                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
-                        <i class="fas fa-check mr-2"></i>
-                        I've Saved These Codes
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-function copyCode(code, button) {
-    if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(code).then(() => {
-            showCopySuccess(button);
-        }).catch(() => {
-            fallbackCopyTextToClipboard(code);
-        });
-    } else {
-        fallbackCopyTextToClipboard(code);
-    }
-}
-
-function showCopySuccess(button) {
-    const originalHTML = button.innerHTML;
-    button.innerHTML = '<i class="fas fa-check"></i>';
-    button.classList.remove('bg-gray-200', 'hover:bg-gray-300', 'text-gray-700');
-    button.classList.add('bg-green-500', 'text-white');
-    
-    setTimeout(() => {
-        button.innerHTML = originalHTML;
-        button.classList.remove('bg-green-500', 'text-white');
-        button.classList.add('bg-gray-200', 'hover:bg-gray-300', 'text-gray-700');
-    }, 2000);
-}
-
-function fallbackCopyTextToClipboard(text) {
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.top = '0';
-    textArea.style.left = '0';
-    textArea.style.width = '2em';
-    textArea.style.height = '2em';
-    textArea.style.padding = '0';
-    textArea.style.border = 'none';
-    textArea.style.outline = 'none';
-    textArea.style.boxShadow = 'none';
-    textArea.style.background = 'transparent';
-    
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    
-    try {
-        document.execCommand('copy');
-        alert('Code copied to clipboard!');
-    } catch (err) {
-        console.error('Copy failed:', err);
-        alert('Failed to copy code');
-    }
-    
-    document.body.removeChild(textArea);
-}
-
-function printCodes() {
-    const printWindow = window.open('', '_blank');
-    const codes = <?= json_encode($backupCodes) ?>;
-    
-    printWindow.document.write(`
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <title>2FA Backup Codes - <?= htmlspecialchars($user['full_name'] ?? $user['username']) ?></title>
-            <style>
-                body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
-                h1 { color: #333; margin-bottom: 20px; }
-                .codes { background: #f5f5f5; padding: 15px; border: 1px solid #ddd; margin: 20px 0; }
-                .code { margin: 5px 0; font-family: monospace; }
-                .warning { background: #fee; border: 1px solid #fcc; padding: 10px; margin: 10px 0; }
-            </style>
-        </head>
-        <body>
-            <h1>2FA Backup Codes</h1>
-            <p><strong>Account:</strong> <?= htmlspecialchars($user['full_name'] ?? $user['username']) ?> (<?= htmlspecialchars($user['email']) ?>)</p>
-            <p><strong>Generated:</strong> ${new Date().toLocaleString()}</p>
-            
-            <div class="warning">
-                <strong>Important:</strong> Store these codes in a safe place. Each code can only be used once.
-            </div>
-            
-            <div class="codes">
-                ${codes.map((code, index) => `<div class="code">${index + 1}. ${code}</div>`).join('')}
-            </div>
-        </body>
-        </html>
-    `);
-    
-    printWindow.document.close();
-    printWindow.print();
-}
-
-function downloadCodes() {
-    const codes = <?= json_encode($backupCodes) ?>;
-    const content = `2FA Backup Codes
-Account: <?= htmlspecialchars($user['full_name'] ?? $user['username']) ?> (<?= htmlspecialchars($user['email']) ?>)
-Generated: ${new Date().toLocaleString()}
-
-IMPORTANT: Store these codes in a safe place. Each code can only be used once.
-
-${codes.map((code, index) => `${index + 1}. ${code}`).join('\n')}
-
-If you lose access to your authenticator app, you can use these codes to log in.
-Generate new codes if you run out or if you suspect they've been compromised.`;
-
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = '2fa-backup-codes.txt';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
diff --git a/app/Views/2fa/backup-codes.twig b/app/Views/2fa/backup-codes.twig
new file mode 100644
index 0000000..b7eaf62
--- /dev/null
+++ b/app/Views/2fa/backup-codes.twig
@@ -0,0 +1,124 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = '2FA Backup Codes' %}
+{% set pageTitle = '2FA Backup Codes' %}
+{% set pageDescription = 'Save these backup codes in a safe place' %}
+{% set pageIcon = 'fas fa-key' %}
+
+{% block content %}
+<div class="max-w-2xl mx-auto">
+    <div class="bg-white dark:bg-slate-800 shadow rounded-lg border border-gray-200 dark:border-slate-700">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">2FA Backup Codes</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Save these codes in a safe place - they can be used to access your account if you lose your authenticator device</p>
+        </div>
+
+        <div class="p-6">
+            {# Warning #}
+            <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg p-4 mb-6">
+                <div class="flex items-start">
+                    <div class="flex-shrink-0">
+                        <i class="fas fa-exclamation-triangle text-red-400 dark:text-red-400"></i>
+                    </div>
+                    <div class="ml-3">
+                        <h4 class="text-sm font-medium text-red-800 dark:text-red-300">Important Security Notice</h4>
+                        <p class="text-sm text-red-700 dark:text-red-400/80 mt-1">
+                            These backup codes are shown only once. Each code can only be used once. Store them securely and never share them with anyone.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {# Backup Codes #}
+            <div class="mb-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h4 class="text-md font-semibold text-gray-900 dark:text-white">Your Backup Codes</h4>
+                    <button onclick="printCodes()" class="text-sm text-primary hover:text-primary-dark dark:text-blue-400 dark:hover:text-blue-300">
+                        <i class="fas fa-print mr-1"></i>Print Codes
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="backup-codes">
+                    {% for code in backupCodes %}
+                    <div class="flex items-center justify-between bg-gray-50 dark:bg-slate-700/50 p-3 rounded-lg border border-gray-200 dark:border-slate-600">
+                        <code class="font-mono text-sm text-gray-900 dark:text-slate-200">{{ code }}</code>
+                        <button onclick="copyCode('{{ code }}', this)" class="ml-2 px-2 py-1 text-xs bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-slate-300 rounded hover:bg-gray-300 dark:hover:bg-slate-500 transition-colors">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+
+            {# Instructions #}
+            <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4 mb-6">
+                <h4 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">How to use backup codes:</h4>
+                <ul class="text-sm text-blue-700 dark:text-blue-400/80 space-y-1">
+                    <li>• When logging in, enter a backup code instead of your 2FA code</li>
+                    <li>• Each backup code can only be used once</li>
+                    <li>• After using a code, it will be automatically removed from your account</li>
+                    <li>• If you run out of backup codes, you'll need to disable and re-enable 2FA</li>
+                </ul>
+            </div>
+
+            {# Actions #}
+            <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-slate-700">
+                <a href="/profile" class="text-sm text-gray-600 dark:text-slate-400 hover:text-gray-500 dark:hover:text-slate-300">
+                    <i class="fas fa-arrow-left mr-1"></i>Back to Profile
+                </a>
+                <div class="flex space-x-3">
+                    <button onclick="downloadCodes()" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-sm font-medium rounded-md text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 hover:bg-gray-50 dark:hover:bg-slate-600 transition-colors">
+                        <i class="fas fa-download mr-2"></i>Download
+                    </button>
+                    <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark transition-colors">
+                        <i class="fas fa-check mr-2"></i>I've Saved These Codes
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+const backupCodesData = {{ backupCodes|json_encode|raw }};
+const userName = '{{ user.full_name|default(user.username) }}';
+const userEmail = '{{ user.email }}';
+
+function copyCode(code, button) {
+    navigator.clipboard.writeText(code).then(() => {
+        const originalHTML = button.innerHTML;
+        button.innerHTML = '<i class="fas fa-check"></i>';
+        button.classList.replace('bg-gray-200', 'bg-green-500');
+        button.classList.replace('text-gray-700', 'text-white');
+        button.classList.replace('dark:bg-slate-600', 'dark:bg-green-600');
+        button.classList.replace('dark:text-slate-300', 'dark:text-white');
+        setTimeout(() => {
+            button.innerHTML = originalHTML;
+            button.classList.replace('bg-green-500', 'bg-gray-200');
+            button.classList.replace('text-white', 'text-gray-700');
+            button.classList.replace('dark:bg-green-600', 'dark:bg-slate-600');
+            button.classList.replace('dark:text-white', 'dark:text-slate-300');
+        }, 2000);
+    });
+}
+
+function printCodes() {
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`<!DOCTYPE html><html><head><title>2FA Backup Codes</title>
+        <style>body{font-family:Arial,sans-serif;padding:20px}.codes{background:#f5f5f5;padding:15px;border:1px solid #ddd;margin:20px 0}.code{margin:5px 0;font-family:monospace}</style>
+        </head><body><h1>2FA Backup Codes</h1><p><strong>Account:</strong> ${userName} (${userEmail})</p><p><strong>Generated:</strong> ${new Date().toLocaleString()}</p>
+        <div class="codes">${backupCodesData.map((c,i) => '<div class="code">'+(i+1)+'. '+c+'</div>').join('')}</div></body></html>`);
+    printWindow.document.close();
+    printWindow.print();
+}
+
+function downloadCodes() {
+    const content = `2FA Backup Codes\nAccount: ${userName} (${userEmail})\nGenerated: ${new Date().toLocaleString()}\n\n${backupCodesData.map((c,i) => (i+1)+'. '+c).join('\n')}`;
+    const blob = new Blob([content], {type: 'text/plain'});
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = '2fa-backup-codes.txt';
+    a.click();
+}
+</script>
+{% endblock %}
diff --git a/app/Views/2fa/setup.php b/app/Views/2fa/setup.php
deleted file mode 100644
index 7233a62..0000000
--- a/app/Views/2fa/setup.php
+++ /dev/null
@@ -1,162 +0,0 @@
-<?php
-$title = 'Setup Two-Factor Authentication';
-$pageTitle = 'Setup 2FA';
-$pageDescription = 'Configure two-factor authentication for your account';
-$pageIcon = 'fas fa-shield-alt';
-ob_start();
-?>
-
-<div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-shield-alt text-gray-400 mr-2 text-sm"></i>
-                Setup Two-Factor Authentication
-            </h2>
-        </div>
-
-        <div class="p-6 space-y-5">
-            <!-- Step 1: Download Authenticator App -->
-            <div class="border-l-4 border-blue-500 pl-4">
-                <h4 class="text-base font-semibold text-gray-900 mb-2">Step 1: Install an Authenticator App</h4>
-                <p class="text-sm text-gray-600 mb-3">Download one of these apps on your mobile device:</p>
-                
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-                    <div class="bg-gray-50 rounded-lg p-3 text-center">
-                        <i class="fab fa-google text-2xl text-blue-600 mb-2"></i>
-                        <p class="text-sm font-medium text-gray-900">Google Authenticator</p>
-                        <p class="text-xs text-gray-500">iOS & Android</p>
-                    </div>
-                    <div class="bg-gray-50 rounded-lg p-3 text-center">
-                        <i class="fas fa-mobile-alt text-2xl text-blue-600 mb-2"></i>
-                        <p class="text-sm font-medium text-gray-900">Authy</p>
-                        <p class="text-xs text-gray-500">iOS & Android</p>
-                    </div>
-                    <div class="bg-gray-50 rounded-lg p-3 text-center">
-                        <i class="fab fa-microsoft text-2xl text-blue-600 mb-2"></i>
-                        <p class="text-sm font-medium text-gray-900">Microsoft Authenticator</p>
-                        <p class="text-xs text-gray-500">iOS & Android</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Step 2: Scan QR Code -->
-            <div class="border-l-4 border-green-500 pl-4">
-                <h4 class="text-base font-semibold text-gray-900 mb-2">Step 2: Scan QR Code</h4>
-                <p class="text-sm text-gray-600 mb-4">Open your authenticator app and scan this QR code:</p>
-                
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
-                    <div class="flex items-center">
-                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
-                        <p class="text-sm text-blue-800">
-                            <strong>Note:</strong> This QR code will remain the same even if you refresh the page. 
-                            Once you scan it, you can enter the verification code below.
-                        </p>
-                    </div>
-                </div>
-                
-                <div class="flex flex-col items-center space-y-4">
-                    <div class="bg-white border-2 border-gray-200 rounded-lg p-4">
-                        <img src="<?= htmlspecialchars($qrCodeUrl) ?>" alt="QR Code for 2FA setup" class="w-48 h-48">
-                    </div>
-                    
-                    <div class="text-center">
-                        <p class="text-xs text-gray-500 mb-2">Can't scan? Enter this code manually:</p>
-                        <div class="bg-gray-100 rounded-lg p-3 font-mono text-sm">
-                            <code class="text-gray-800"><?= htmlspecialchars($secret) ?></code>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Step 3: Verify Code -->
-            <div class="border-l-4 border-yellow-500 pl-4">
-                <h4 class="text-base font-semibold text-gray-900 mb-2">Step 3: Verify Setup</h4>
-                <p class="text-sm text-gray-600 mb-4">Enter the 6-digit code from your authenticator app:</p>
-                
-                <form method="POST" action="/2fa/verify-setup" id="verifyForm">
-                    <?= csrf_field() ?>
-                    
-                    <div class="max-w-xs mx-auto">
-                        <input type="text" 
-                               name="verification_code" 
-                               id="verification_code"
-                               maxlength="6" 
-                               pattern="[0-9]{6}"
-                               placeholder="123456"
-                               class="w-full px-4 py-3 text-center text-2xl font-mono border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
-                               required>
-                        <p class="text-xs text-gray-500 mt-2 text-center">Enter 6-digit code</p>
-                    </div>
-
-                    <div class="flex flex-col sm:flex-row gap-3 pt-3">
-                        <button type="submit" 
-                                class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
-                            <i class="fas fa-check mr-2"></i>
-                            Verify & Enable 2FA
-                        </button>
-                        <a href="/2fa/cancel-setup" 
-                           class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
-                            <i class="fas fa-times mr-2"></i>
-                            Cancel
-                        </a>
-                    </div>
-                </form>
-            </div>
-
-            <!-- Security Notice -->
-            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-                <div class="flex">
-                    <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5 mr-3"></i>
-                    <div>
-                        <p class="text-sm font-medium text-yellow-900">Important Security Notice</p>
-                        <p class="text-sm text-yellow-700 mt-1">
-                            Once 2FA is enabled, you'll need your authenticator app to log in. 
-                            Make sure to save your backup codes in a secure location.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const codeInput = document.getElementById('verification_code');
-    
-    // Auto-focus on code input
-    codeInput.focus();
-    
-    // Only allow digits
-    codeInput.addEventListener('input', function(e) {
-        this.value = this.value.replace(/[^0-9]/g, '');
-    });
-    
-    // Auto-submit when 6 digits are entered
-    codeInput.addEventListener('input', function(e) {
-        if (this.value.length === 6) {
-            // Small delay to let user see the complete code
-            setTimeout(() => {
-                document.getElementById('verifyForm').submit();
-            }, 500);
-        }
-    });
-    
-    // Handle form submission
-    document.getElementById('verifyForm').addEventListener('submit', function(e) {
-        const code = codeInput.value.trim();
-        if (code.length !== 6 || !/^\d{6}$/.test(code)) {
-            e.preventDefault();
-            alert('Please enter a valid 6-digit code');
-            codeInput.focus();
-            return false;
-        }
-    });
-});
-</script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
diff --git a/app/Views/2fa/setup.twig b/app/Views/2fa/setup.twig
new file mode 100644
index 0000000..e26d265
--- /dev/null
+++ b/app/Views/2fa/setup.twig
@@ -0,0 +1,116 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Setup Two-Factor Authentication' %}
+{% set pageTitle = 'Setup 2FA' %}
+{% set pageDescription = 'Configure two-factor authentication for your account' %}
+{% set pageIcon = 'fas fa-shield-alt' %}
+
+{% block content %}
+<div class="max-w-3xl mx-auto">
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-shield-alt text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
+                Setup Two-Factor Authentication
+            </h2>
+        </div>
+
+        <div class="p-6 space-y-5">
+            {# Step 1: Download Authenticator App #}
+            <div class="border-l-4 border-blue-500 pl-4">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 1: Install an Authenticator App</h4>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mb-3">Download one of these apps on your mobile device:</p>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
+                        <i class="fab fa-google text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">Google Authenticator</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
+                        <i class="fas fa-mobile-alt text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">Authy</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
+                        <i class="fab fa-microsoft text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">Microsoft Authenticator</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
+                    </div>
+                </div>
+            </div>
+
+            {# Step 2: Scan QR Code #}
+            <div class="border-l-4 border-green-500 pl-4">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 2: Scan QR Code</h4>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Open your authenticator app and scan this QR code:</p>
+                
+                <div class="flex flex-col items-center space-y-4">
+                    <div class="bg-white border-2 border-gray-200 dark:border-slate-600 rounded-lg p-4">
+                        <img src="{{ qrCodeUrl }}" alt="QR Code for 2FA setup" class="w-48 h-48">
+                    </div>
+                    
+                    <div class="text-center">
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mb-2">Can't scan? Enter this code manually:</p>
+                        <div class="bg-gray-100 dark:bg-slate-700 rounded-lg p-3 font-mono text-sm">
+                            <code class="text-gray-800 dark:text-slate-200">{{ secret }}</code>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {# Step 3: Verify Code #}
+            <div class="border-l-4 border-yellow-500 pl-4">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 3: Verify Setup</h4>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Enter the 6-digit code from your authenticator app:</p>
+                
+                <form method="POST" action="/2fa/verify-setup" id="verifyForm">
+                    {{ csrf_field() }}
+                    
+                    <div class="max-w-xs mx-auto">
+                        <input type="text" name="verification_code" id="verification_code" maxlength="6" pattern="[0-9]{6}" placeholder="123456"
+                               class="w-full px-4 py-3 text-center text-2xl font-mono border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-primary focus:border-primary" required>
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-2 text-center">Enter 6-digit code</p>
+                    </div>
+
+                    <div class="flex flex-col sm:flex-row gap-3 pt-3">
+                        <button type="submit" class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium text-sm">
+                            <i class="fas fa-check mr-2"></i>Verify & Enable 2FA
+                        </button>
+                        <a href="/2fa/cancel-setup" class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 text-sm">
+                            <i class="fas fa-times mr-2"></i>Cancel
+                        </a>
+                    </div>
+                </form>
+            </div>
+
+            {# Security Notice #}
+            <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4">
+                <div class="flex">
+                    <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3"></i>
+                    <div>
+                        <p class="text-sm font-medium text-yellow-900 dark:text-yellow-300">Important Security Notice</p>
+                        <p class="text-sm text-yellow-700 dark:text-yellow-400/80 mt-1">
+                            Once 2FA is enabled, you'll need your authenticator app to log in. 
+                            Make sure to save your backup codes in a secure location.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const codeInput = document.getElementById('verification_code');
+    codeInput.focus();
+    codeInput.addEventListener('input', function() {
+        this.value = this.value.replace(/[^0-9]/g, '');
+        if (this.value.length === 6) {
+            setTimeout(() => document.getElementById('verifyForm').submit(), 500);
+        }
+    });
+});
+</script>
+{% endblock %}
diff --git a/app/Views/2fa/verify.php b/app/Views/2fa/verify.php
deleted file mode 100644
index cf97b4f..0000000
--- a/app/Views/2fa/verify.php
+++ /dev/null
@@ -1,206 +0,0 @@
-<?php
-$title = '2FA Verification';
-ob_start();
-
-$twoFactorService = new \App\Services\TwoFactorService();
-$canSendEmailCode = $user['email_verified'] && $twoFactorService->checkRateLimit($_SERVER['REMOTE_ADDR'] ?? '', $user['id']);
-?>
-
-<div class="text-center mb-6">
-    <div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary bg-opacity-10 mb-4">
-        <i class="fas fa-shield-alt text-primary text-xl"></i>
-    </div>
-    <h2 class="text-2xl font-bold text-gray-900 mb-2">
-        2FA Verification
-    </h2>
-    <p class="text-sm text-gray-600">
-        Hello, <strong><?= htmlspecialchars($user['full_name'] ?? $user['username']) ?></strong>!<br>
-        Please enter your 2FA code to complete login.
-    </p>
-</div>
-
-<?php if (isset($_SESSION['error'])): ?>
-    <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
-        <div class="flex items-center">
-            <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-            <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
-        </div>
-    </div>
-    <?php unset($_SESSION['error']); ?>
-<?php endif; ?>
-
-<?php if (isset($_SESSION['success'])): ?>
-    <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
-        <div class="flex items-center">
-            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-            <span class="text-sm text-green-700"><?= htmlspecialchars($_SESSION['success']) ?></span>
-        </div>
-    </div>
-    <?php unset($_SESSION['success']); ?>
-<?php endif; ?>
-
-<form class="space-y-4" method="POST" action="/2fa/verify" id="verifyForm">
-    <?= csrf_field() ?>
-    
-    <!-- Security verification completed during login -->
-    <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
-        <div class="flex items-center">
-            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-            <span class="text-sm text-green-700">Security verification completed during login</span>
-        </div>
-    </div>
-    
-    <div>
-        <label for="code" class="block text-sm font-medium text-gray-700 mb-2">
-            2FA Code
-        </label>
-        <input id="code" name="verification_code" type="text" required 
-               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-center text-lg font-mono tracking-widest focus:ring-2 focus:ring-primary focus:border-primary transition-colors" 
-               placeholder="000000" maxlength="8" autocomplete="one-time-code" autofocus>
-        <p class="text-xs text-gray-500 mt-1 text-center">Enter 6-digit code from your authenticator app, email code, or 8-character backup code</p>
-    </div>
-
-    <button type="submit" 
-            class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary-dark focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors">
-        <i class="fas fa-check mr-2"></i>
-        Verify Code
-    </button>
-
-    <div class="flex items-center justify-between text-sm">
-        <?php if ($canSendEmailCode): ?>
-        <button type="button" onclick="sendEmailCode()" 
-                class="text-primary hover:text-primary-dark transition-colors">
-            <i class="fas fa-envelope mr-1"></i>
-            Send Email Code
-        </button>
-        <?php else: ?>
-        <span class="text-gray-400">
-            <i class="fas fa-envelope mr-1"></i>
-            Email code unavailable
-        </span>
-        <?php endif; ?>
-        <a href="/logout" class="text-gray-600 hover:text-gray-500 transition-colors">
-            <i class="fas fa-sign-out-alt mr-1"></i>
-            Sign out instead
-        </a>
-    </div>
-
-    <div class="mt-6 pt-4 border-t border-gray-200">
-        <div class="text-center">
-            <p class="text-sm text-gray-600">
-                Having trouble? You can also use a backup code or contact your administrator for help.
-            </p>
-        </div>
-    </div>
-</form>
-
-<script>
-function sendEmailCode() {
-    const btn = event.target;
-    const originalText = btn.innerHTML;
-    
-    btn.disabled = true;
-    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Sending...';
-    
-    fetch('/2fa/send-email-code', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded',
-            'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
-        }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            btn.innerHTML = '<i class="fas fa-check mr-1"></i>Code Sent';
-            btn.classList.remove('text-primary', 'hover:text-primary-dark');
-            btn.classList.add('text-green-600');
-            
-            // Reset button after 30 seconds
-            setTimeout(() => {
-                btn.disabled = false;
-                btn.innerHTML = originalText;
-                btn.classList.remove('text-green-600');
-                btn.classList.add('text-primary', 'hover:text-primary-dark');
-            }, 30000);
-        } else {
-            alert('Failed to send email code: ' + (data.error || 'Unknown error'));
-            btn.disabled = false;
-            btn.innerHTML = originalText;
-        }
-    })
-    .catch(error => {
-        alert('Failed to send email code');
-        btn.disabled = false;
-        btn.innerHTML = originalText;
-    });
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    const codeInput = document.getElementById('code');
-    const form = document.getElementById('verifyForm');
-
-    // Auto-focus on code input
-    codeInput.focus();
-
-    // Handle input validation and auto-submit
-    codeInput.addEventListener('input', function(e) {
-        // Allow digits, letters for backup codes
-        this.value = this.value.replace(/[^A-Za-z0-9]/g, '');
-        
-        // Auto-submit when 6 digits are entered (TOTP/email codes)
-        if (this.value.length === 6 && /^\d{6}$/.test(this.value)) {
-            setTimeout(() => {
-                form.submit();
-            }, 500);
-        }
-        
-        // Auto-submit when 8 characters are entered (backup codes)
-        if (this.value.length === 8 && /^[A-Z0-9]{8}$/i.test(this.value)) {
-            setTimeout(() => {
-                form.submit();
-            }, 500);
-        }
-    });
-
-    // Form validation
-    form.addEventListener('submit', function(e) {
-        const code = codeInput.value.trim();
-
-        // Check if code is entered
-        if (!code) {
-            e.preventDefault();
-            alert('Please enter a verification code');
-            codeInput.focus();
-            return false;
-        }
-
-        // Validate code format
-        if (code.length === 6 && !/^\d{6}$/.test(code)) {
-            e.preventDefault();
-            alert('Please enter a valid 6-digit code');
-            codeInput.focus();
-            return false;
-        }
-
-        if (code.length === 8 && !/^[A-Z0-9]{8}$/i.test(code)) {
-            e.preventDefault();
-            alert('Please enter a valid 8-character backup code');
-            codeInput.focus();
-            return false;
-        }
-
-        if (code.length < 6 || code.length > 8) {
-            e.preventDefault();
-            alert('Please enter a valid verification code (6 digits or 8 characters)');
-            codeInput.focus();
-            return false;
-        }
-    });
-});
-</script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../auth/base-auth.php';
-?>
diff --git a/app/Views/2fa/verify.twig b/app/Views/2fa/verify.twig
new file mode 100644
index 0000000..20af8d5
--- /dev/null
+++ b/app/Views/2fa/verify.twig
@@ -0,0 +1,124 @@
+{% extends 'auth/base-auth.twig' %}
+
+{% set title = '2FA Verification' %}
+
+{% block content %}
+<div class="text-center mb-6">
+    <div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary bg-opacity-10 dark:bg-primary/20 mb-4">
+        <i class="fas fa-shield-alt text-primary text-xl"></i>
+    </div>
+    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">2FA Verification</h2>
+    <p class="text-sm text-gray-600 dark:text-slate-400">
+        Hello, <strong class="text-gray-900 dark:text-white">{{ user.full_name|default(user.username) }}</strong>!<br>
+        Please enter your 2FA code to complete login.
+    </p>
+</div>
+
+{% if flash.success is defined %}
+    <div class="mb-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
+        </div>
+    </div>
+{% endif %}
+
+{% if flash.error is defined %}
+    <div class="mb-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
+            <span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
+        </div>
+    </div>
+{% endif %}
+
+<form class="space-y-4" method="POST" action="/2fa/verify" id="verifyForm">
+    {{ csrf_field() }}
+    
+    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3 mb-4">
+        <div class="flex items-center">
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">Security verification completed during login</span>
+        </div>
+    </div>
+    
+    <div>
+        <label for="code" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">2FA Code</label>
+        <input id="code" name="verification_code" type="text" required 
+               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-center text-lg font-mono tracking-widest bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-primary focus:border-primary" 
+               placeholder="000000" maxlength="8" autocomplete="one-time-code" autofocus>
+        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1 text-center">Enter 6-digit code from your authenticator app, email code, or 8-character backup code</p>
+    </div>
+
+    <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary-dark transition-colors">
+        <i class="fas fa-check mr-2"></i>Verify Code
+    </button>
+
+    <div class="flex items-center justify-between text-sm">
+        {% if canSendEmailCode %}
+        <button type="button" onclick="sendEmailCode()" class="text-primary hover:text-primary-dark dark:text-blue-400 dark:hover:text-blue-300">
+            <i class="fas fa-envelope mr-1"></i>Send Email Code
+        </button>
+        {% else %}
+        <span class="text-gray-400 dark:text-slate-500"><i class="fas fa-envelope mr-1"></i>Email code unavailable</span>
+        {% endif %}
+        <a href="/logout" class="text-gray-600 dark:text-slate-400 hover:text-gray-500 dark:hover:text-slate-300">
+            <i class="fas fa-sign-out-alt mr-1"></i>Sign out instead
+        </a>
+    </div>
+
+    <div class="mt-6 pt-4 border-t border-gray-200 dark:border-slate-700 text-center">
+        <p class="text-sm text-gray-600 dark:text-slate-400">Having trouble? You can also use a backup code or contact your administrator.</p>
+    </div>
+</form>
+
+<script>
+function sendEmailCode() {
+    const btn = event.target;
+    const originalText = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Sending...';
+    
+    fetch('/2fa/send-email-code', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            btn.innerHTML = '<i class="fas fa-check mr-1"></i>Code Sent';
+            btn.classList.add('text-green-600');
+            setTimeout(() => {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+                btn.classList.remove('text-green-600');
+            }, 30000);
+        } else {
+            alert('Failed to send email code: ' + (data.error || 'Unknown error'));
+            btn.disabled = false;
+            btn.innerHTML = originalText;
+        }
+    })
+    .catch(error => {
+        alert('Failed to send email code');
+        btn.disabled = false;
+        btn.innerHTML = originalText;
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const codeInput = document.getElementById('code');
+    codeInput.focus();
+    codeInput.addEventListener('input', function() {
+        this.value = this.value.replace(/[^A-Za-z0-9]/g, '');
+        if ((this.value.length === 6 && /^\d{6}$/.test(this.value)) ||
+            (this.value.length === 8 && /^[A-Z0-9]{8}$/i.test(this.value))) {
+            setTimeout(() => document.getElementById('verifyForm').submit(), 500);
+        }
+    });
+});
+</script>
+{% endblock %}
diff --git a/app/Views/auth/captcha-widget.php b/app/Views/auth/_captcha-widget.twig
similarity index 54%
rename from app/Views/auth/captcha-widget.php
rename to app/Views/auth/_captcha-widget.twig
index 4be7b22..cf87b58 100644
--- a/app/Views/auth/captcha-widget.php
+++ b/app/Views/auth/_captcha-widget.twig
@@ -1,42 +1,36 @@
-<?php
-/**
- * CAPTCHA Widget Component
- * Renders the appropriate CAPTCHA widget based on settings
- * 
- * Required variables:
- * - $captchaSettings: Array with 'provider' and 'site_key'
- */
+{#
+ # CAPTCHA Widget Component
+ # Renders the appropriate CAPTCHA widget based on settings
+ # 
+ # Required variables:
+ # - captchaSettings: Array with 'provider' and 'site_key'
+ #}
 
-$provider = $captchaSettings['provider'] ?? 'disabled';
-$siteKey = $captchaSettings['site_key'] ?? '';
+{% set provider = captchaSettings.provider|default('disabled') %}
+{% set siteKey = captchaSettings.site_key|default('') %}
 
-if ($provider === 'disabled' || empty($siteKey)) {
-    return; // No CAPTCHA to render
-}
-?>
-
-<!-- CAPTCHA Widget -->
+{% if provider != 'disabled' and siteKey is not empty %}
+{# CAPTCHA Widget #}
 <div class="captcha-container mb-4">
-    <?php if ($provider === 'recaptcha_v2'): ?>
-        <!-- reCAPTCHA v2 -->
-        <div class="g-recaptcha" data-sitekey="<?= htmlspecialchars($siteKey) ?>"></div>
+    {% if provider == 'recaptcha_v2' %}
+        {# reCAPTCHA v2 #}
+        <div class="g-recaptcha" data-sitekey="{{ siteKey }}"></div>
         <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     
-    <?php elseif ($provider === 'recaptcha_v3'): ?>
-        <!-- reCAPTCHA v3 (Invisible) -->
+    {% elseif provider == 'recaptcha_v3' %}
+        {# reCAPTCHA v3 (Invisible) #}
         <input type="hidden" id="captcha_response" name="captcha_response">
-        <script src="https://www.google.com/recaptcha/api.js?render=<?= htmlspecialchars($siteKey) ?>"></script>
-        
-    <?php elseif ($provider === 'turnstile'): ?>
-        <!-- Cloudflare Turnstile -->
-        <div class="cf-turnstile" data-sitekey="<?= htmlspecialchars($siteKey) ?>"></div>
-        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+        <script src="https://www.google.com/recaptcha/api.js?render={{ siteKey }}"></script>
     
-    <?php endif; ?>
+    {% elseif provider == 'turnstile' %}
+        {# Cloudflare Turnstile #}
+        <div class="cf-turnstile" data-sitekey="{{ siteKey }}"></div>
+        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    {% endif %}
 </div>
 
-<?php if ($provider === 'recaptcha_v3'): ?>
-<!-- reCAPTCHA v3 Form Submission Handler -->
+{% if provider == 'recaptcha_v3' %}
+{# reCAPTCHA v3 Form Submission Handler #}
 <script>
     // Store the original form submission handler
     const form = document.querySelector('form');
@@ -46,7 +40,7 @@ if ($provider === 'disabled' || empty($siteKey)) {
         e.preventDefault();
         
         grecaptcha.ready(function() {
-            grecaptcha.execute('<?= htmlspecialchars($siteKey) ?>', {action: 'submit'}).then(function(token) {
+            grecaptcha.execute('{{ siteKey }}', {action: 'submit'}).then(function(token) {
                 document.getElementById('captcha_response').value = token;
                 
                 // Call original submit handler if it exists
@@ -60,8 +54,8 @@ if ($provider === 'disabled' || empty($siteKey)) {
         });
     });
 </script>
-<?php elseif ($provider === 'recaptcha_v2' || $provider === 'turnstile'): ?>
-<!-- reCAPTCHA v2 / Turnstile Response Handler -->
+{% elseif provider == 'recaptcha_v2' or provider == 'turnstile' %}
+{# reCAPTCHA v2 / Turnstile Response Handler #}
 <script>
     // Add hidden input to capture response
     const form = document.querySelector('form');
@@ -73,14 +67,14 @@ if ($provider === 'disabled' || empty($siteKey)) {
     
     // Capture response on form submit
     form.addEventListener('submit', function(e) {
-        <?php if ($provider === 'recaptcha_v2'): ?>
+        {% if provider == 'recaptcha_v2' %}
         const response = grecaptcha.getResponse();
-        <?php else: // turnstile ?>
+        {% else %}{# turnstile #}
         const response = turnstile.getResponse();
-        <?php endif; ?>
+        {% endif %}
         
         captchaInput.value = response;
     });
 </script>
-<?php endif; ?>
-
+{% endif %}
+{% endif %}
diff --git a/app/Views/auth/base-auth.php b/app/Views/auth/base-auth.php
deleted file mode 100644
index 01e65d8..0000000
--- a/app/Views/auth/base-auth.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?= $title ?? 'Authentication' ?> - Domain Monitor</title>
-    
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: {
-                            DEFAULT: '#4A90E2',
-                            dark: '#357ABD',
-                            light: '#6BA3E8',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    
-    <style>
-        body {
-            background-color: #f8f9fa;
-        }
-    </style>
-</head>
-<body class="min-h-screen flex items-center justify-center p-4">
-    <div class="max-w-md w-full">
-        <!-- Auth Card -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-            <?= $content ?>
-        </div>
-
-        <!-- Footer -->
-        <div class="text-center mt-6">
-            <p class="text-gray-500 text-xs">
-                © <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a>. All rights reserved.
-            </p>
-        </div>
-    </div>
-
-    <?php if (isset($scripts)): ?>
-        <?= $scripts ?>
-    <?php endif; ?>
-</body>
-</html>
-
diff --git a/app/Views/auth/base-auth.twig b/app/Views/auth/base-auth.twig
new file mode 100644
index 0000000..a2cacf1
--- /dev/null
+++ b/app/Views/auth/base-auth.twig
@@ -0,0 +1,209 @@
+{#
+ # Auth Layout Template
+ # Used for: login, register, forgot-password, verify-email, etc.
+ #}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title|default('Authentication') }} - {{ appSettings.app_name|default('Domain Monitor') }}</title>
+    
+    {# Tailwind CSS #}
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    {# Font Awesome #}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: '#4A90E2',
+                            dark: '#357ABD',
+                            light: '#6BA3E8',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
+    {# Theme initialization (prevent flash) #}
+    <script>
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.documentElement.classList.add('dark');
+            }
+        })();
+    </script>
+    
+    <style>
+        body {
+            background-color: #f1f5f9;
+        }
+        .dark body, html.dark body {
+            background-color: #0f172a;
+        }
+        .bg-waves {
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            overflow: hidden;
+            pointer-events: none;
+        }
+        .bg-waves svg {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+        .graph-svg-light { display: block; }
+        .graph-svg-dark { display: none; }
+        .dark .graph-svg-light { display: none; }
+        .dark .graph-svg-dark { display: block; }
+    </style>
+    
+    {% block head %}{% endblock %}
+</head>
+<body class="min-h-screen flex items-center justify-center p-4 bg-slate-100 dark:bg-slate-900 transition-colors duration-200">
+    {# Monitoring Graph Waves Background #}
+    <div class="bg-waves">
+        {# Light Mode SVG #}
+        <svg class="graph-svg-light" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="waveGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.15"/>
+                    <stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.02"/>
+                </linearGradient>
+                <linearGradient id="waveGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.12"/>
+                    <stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.01"/>
+                </linearGradient>
+                <linearGradient id="waveGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.08"/>
+                    <stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.01"/>
+                </linearGradient>
+            </defs>
+            
+            {# Top accent line #}
+            <path d="M 0,18 Q 15,14 30,20 T 60,16 T 90,22 T 100,18" 
+                  stroke="#2563eb" stroke-width="0.15" fill="none" opacity="0.4" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 1 - Back #}
+            <path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50 L 100,100 L 0,100 Z" fill="url(#waveGradient3)"/>
+            <path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50" 
+                  stroke="#2563eb" stroke-width="0.2" fill="none" opacity="0.3" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 2 - Middle #}
+            <path d="M 0,55 Q 25,48 50,58 T 100,52 L 100,100 L 0,100 Z" fill="url(#waveGradient2)"/>
+            <path d="M 0,55 Q 25,48 50,58 T 100,52" 
+                  stroke="#2563eb" stroke-width="0.25" fill="none" opacity="0.5" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 3 - Front #}
+            <path d="M 0,68 Q 30,60 60,70 T 100,64 L 100,100 L 0,100 Z" fill="url(#waveGradient1)"/>
+            <path d="M 0,68 Q 30,60 60,70 T 100,64" 
+                  stroke="#2563eb" stroke-width="0.3" fill="none" opacity="0.6" vector-effect="non-scaling-stroke"/>
+            
+            {# Bottom accent line #}
+            <path d="M 0,82 Q 20,78 40,84 T 80,80 T 100,85" 
+                  stroke="#2563eb" stroke-width="0.15" fill="none" opacity="0.3" vector-effect="non-scaling-stroke"/>
+        </svg>
+        
+        {# Dark Mode SVG #}
+        <svg class="graph-svg-dark" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="waveGradientDark1" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.2"/>
+                    <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.02"/>
+                </linearGradient>
+                <linearGradient id="waveGradientDark2" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.15"/>
+                    <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.01"/>
+                </linearGradient>
+                <linearGradient id="waveGradientDark3" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.1"/>
+                    <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.01"/>
+                </linearGradient>
+            </defs>
+            
+            {# Top accent line #}
+            <path d="M 0,18 Q 15,14 30,20 T 60,16 T 90,22 T 100,18" 
+                  stroke="#60a5fa" stroke-width="0.15" fill="none" opacity="0.35" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 1 - Back #}
+            <path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50 L 100,100 L 0,100 Z" fill="url(#waveGradientDark3)"/>
+            <path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50" 
+                  stroke="#60a5fa" stroke-width="0.2" fill="none" opacity="0.25" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 2 - Middle #}
+            <path d="M 0,55 Q 25,48 50,58 T 100,52 L 100,100 L 0,100 Z" fill="url(#waveGradientDark2)"/>
+            <path d="M 0,55 Q 25,48 50,58 T 100,52" 
+                  stroke="#60a5fa" stroke-width="0.25" fill="none" opacity="0.4" vector-effect="non-scaling-stroke"/>
+            
+            {# Wave 3 - Front #}
+            <path d="M 0,68 Q 30,60 60,70 T 100,64 L 100,100 L 0,100 Z" fill="url(#waveGradientDark1)"/>
+            <path d="M 0,68 Q 30,60 60,70 T 100,64" 
+                  stroke="#60a5fa" stroke-width="0.3" fill="none" opacity="0.5" vector-effect="non-scaling-stroke"/>
+            
+            {# Bottom accent line #}
+            <path d="M 0,82 Q 20,78 40,84 T 80,80 T 100,85" 
+                  stroke="#60a5fa" stroke-width="0.15" fill="none" opacity="0.25" vector-effect="non-scaling-stroke"/>
+        </svg>
+    </div>
+    
+    {# Logo - Top Left #}
+    <div class="fixed top-4 left-4 z-20 flex items-center gap-3">
+        <img src="{{ base_url }}/assets/logo.svg" alt="{{ appSettings.app_name|default('Domain Monitor') }}" class="h-14 w-auto drop-shadow-md">
+        <div class="flex flex-col">
+            <span class="text-xl font-bold text-slate-800 dark:text-white tracking-tight">{{ appSettings.app_name|default('Domain Monitor') }}</span>
+            <span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Track your domains</span>
+        </div>
+    </div>
+
+    {# Theme Toggle Button #}
+    <button onclick="toggleTheme()" id="themeToggle" title="Toggle theme" class="fixed top-4 right-4 z-20 flex items-center justify-center w-10 h-10 text-slate-500 hover:text-slate-700 hover:bg-slate-200 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700 rounded-lg transition-colors duration-150 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm shadow-md border border-slate-200 dark:border-slate-700">
+        <i class="fas fa-sun dark:hidden"></i>
+        <i class="fas fa-moon hidden dark:inline"></i>
+    </button>
+
+    <div class="max-w-md w-full relative z-10">
+        
+        {# Auth Card #}
+        <div class="bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm rounded-xl shadow-lg shadow-slate-200/50 dark:shadow-slate-950/50 border border-slate-200 dark:border-slate-700 p-8">
+            {% block content %}{% endblock %}
+        </div>
+
+        {# Footer #}
+        <div class="text-center mt-6">
+            <p class="text-slate-500 dark:text-slate-400 text-xs">
+                © {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150" title="Visit {{ appSettings.app_name|default('Domain Monitor') }} on GitHub">{{ appSettings.app_name|default('Domain Monitor') }}</a>. All rights reserved.
+            </p>
+        </div>
+    </div>
+
+    <script>
+        // Theme toggle function
+        function toggleTheme() {
+            const html = document.documentElement;
+            const isDark = html.classList.contains('dark');
+            
+            if (isDark) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+    </script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>
diff --git a/app/Views/auth/forgot-password.php b/app/Views/auth/forgot-password.php
deleted file mode 100644
index dc563d5..0000000
--- a/app/Views/auth/forgot-password.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-$title = 'Forgot Password';
-ob_start();
-?>
-
-<!-- Logo and Title -->
-<div class="text-center mb-8">
-    <div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
-        <i class="fas fa-key text-white text-2xl"></i>
-    </div>
-    <h1 class="text-2xl font-semibold text-gray-900 mb-1">Forgot Password?</h1>
-    <p class="text-sm text-gray-500">No worries, we'll send you reset instructions</p>
-</div>
-
-<!-- Error/Success Alert -->
-<?php if (isset($_SESSION['error'])): ?>
-    <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
-        <div class="flex items-center">
-            <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-            <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
-        </div>
-    </div>
-    <?php unset($_SESSION['error']); ?>
-<?php endif; ?>
-
-<?php if (isset($_SESSION['success'])): ?>
-    <div class="mb-6 bg-green-50 border border-green-200 p-3 rounded-lg">
-        <div class="flex items-center">
-            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-            <span class="text-sm text-green-700"><?= htmlspecialchars($_SESSION['success']) ?></span>
-        </div>
-    </div>
-    <?php unset($_SESSION['success']); ?>
-<?php endif; ?>
-
-<!-- Forgot Password Form -->
-<form method="POST" action="/forgot-password" class="space-y-5">
-    <?= csrf_field() ?>
-    <!-- Email Field -->
-    <div>
-        <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
-            Email Address
-        </label>
-        <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <i class="fas fa-envelope text-gray-400 text-sm"></i>
-            </div>
-            <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                required 
-                autofocus
-                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
-                placeholder="Enter your email address">
-        </div>
-        <p class="text-xs text-gray-500 mt-1">Enter the email associated with your account</p>
-    </div>
-
-    <!-- CAPTCHA Widget -->
-    <?php include __DIR__ . '/captcha-widget.php'; ?>
-
-    <!-- Submit Button -->
-    <button 
-        type="submit" 
-        class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
-        <i class="fas fa-paper-plane mr-2"></i>
-        Send Reset Link
-    </button>
-</form>
-
-<!-- Back to Login Link -->
-<div class="text-center mt-6 pt-6 border-t border-gray-200">
-    <a href="/login" class="inline-flex items-center text-sm text-gray-600 hover:text-gray-800">
-        <i class="fas fa-arrow-left mr-2"></i>
-        Back to Login
-    </a>
-</div>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/base-auth.php';
-?>
diff --git a/app/Views/auth/forgot-password.twig b/app/Views/auth/forgot-password.twig
new file mode 100644
index 0000000..49fb961
--- /dev/null
+++ b/app/Views/auth/forgot-password.twig
@@ -0,0 +1,82 @@
+{#
+ # Forgot Password Page
+ #}
+{% extends 'auth/base-auth.twig' %}
+
+{% set title = 'Forgot Password' %}
+
+{% block content %}
+{# Logo and Title #}
+<div class="text-center mb-8">
+    <div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
+        <i class="fas fa-key text-white text-2xl"></i>
+    </div>
+    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Forgot Password?</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400">No worries, we'll send you reset instructions</p>
+</div>
+
+{# Error Alert #}
+{% if flash.error is defined %}
+    <div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
+            <span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
+        </div>
+    </div>
+{% endif %}
+
+{# Success Alert #}
+{% if flash.success is defined %}
+    <div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
+        </div>
+    </div>
+{% endif %}
+
+{# Forgot Password Form #}
+<form method="POST" action="/forgot-password" class="space-y-5">
+    {{ csrf_field() }}
+    
+    {# Email Field #}
+    <div>
+        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+            Email Address
+        </label>
+        <div class="relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <i class="fas fa-envelope text-gray-400 text-sm"></i>
+            </div>
+            <input 
+                type="email" 
+                id="email" 
+                name="email" 
+                required 
+                autofocus
+                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                placeholder="Enter your email address">
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Enter the email associated with your account</p>
+    </div>
+
+    {# CAPTCHA Widget #}
+    {% include 'auth/_captcha-widget.twig' %}
+
+    {# Submit Button #}
+    <button 
+        type="submit" 
+        class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
+        <i class="fas fa-paper-plane mr-2"></i>
+        Send Reset Link
+    </button>
+</form>
+
+{# Back to Login Link #}
+<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+    <a href="/login" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
+        <i class="fas fa-arrow-left mr-2"></i>
+        Back to Login
+    </a>
+</div>
+{% endblock %}
diff --git a/app/Views/auth/login.php b/app/Views/auth/login.twig
similarity index 58%
rename from app/Views/auth/login.php
rename to app/Views/auth/login.twig
index 174a709..ffab1ff 100644
--- a/app/Views/auth/login.php
+++ b/app/Views/auth/login.twig
@@ -1,34 +1,47 @@
-<?php
-$title = 'Login';
-ob_start();
-?>
+{#
+ # Login Page
+ #}
+{% extends 'auth/base-auth.twig' %}
 
-<!-- Logo and Title -->
+{% set title = 'Login' %}
+
+{% block content %}
+{# Logo and Title #}
 <div class="text-center mb-8">
     <div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
         <i class="fas fa-globe text-white text-2xl"></i>
     </div>
-    <h1 class="text-2xl font-semibold text-gray-900 mb-1">Welcome Back</h1>
-    <p class="text-sm text-gray-500">Sign in to access your account</p>
+    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Welcome Back</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Sign in to access your account</p>
 </div>
 
-<!-- Error Alert -->
-<?php if (isset($_SESSION['error'])): ?>
-    <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
+{# Success Alert #}
+{% if flash.success is defined %}
+    <div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
         <div class="flex items-center">
-            <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-            <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
         </div>
     </div>
-    <?php unset($_SESSION['error']); ?>
-<?php endif; ?>
+{% endif %}
 
-<!-- Login Form -->
+{# Error Alert #}
+{% if flash.error is defined %}
+    <div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
+            <span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
+        </div>
+    </div>
+{% endif %}
+
+{# Login Form #}
 <form method="POST" action="/login" class="space-y-5">
-    <?= csrf_field() ?>
-    <!-- Username Field -->
+    {{ csrf_field() }}
+    
+    {# Username Field #}
     <div>
-        <label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Username or Email
         </label>
         <div class="relative">
@@ -41,14 +54,14 @@ ob_start();
                 name="username" 
                 required 
                 autofocus
-                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Enter your username or email">
         </div>
     </div>
 
-    <!-- Password Field -->
+    {# Password Field #}
     <div>
-        <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Password
         </label>
         <div class="relative">
@@ -60,36 +73,36 @@ ob_start();
                 id="password" 
                 name="password" 
                 required
-                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Enter your password">
             <button 
                 type="button" 
                 onclick="togglePassword()"
-                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                 <i class="fas fa-eye text-sm" id="toggleIcon"></i>
             </button>
         </div>
     </div>
 
-    <!-- Remember Me -->
+    {# Remember Me #}
     <div class="flex items-center justify-between">
         <label class="flex items-center cursor-pointer">
             <input 
                 type="checkbox" 
                 name="remember"
                 value="1"
-                class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
-            <span class="ml-2 text-sm text-gray-600">Remember me</span>
+                class="w-4 h-4 text-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary">
+            <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
         </label>
         <a href="/forgot-password" class="text-sm text-primary hover:text-primary-dark">
             Forgot password?
         </a>
     </div>
 
-    <!-- CAPTCHA Widget -->
-    <?php include __DIR__ . '/captcha-widget.php'; ?>
+    {# CAPTCHA Widget #}
+    {% include 'auth/_captcha-widget.twig' %}
 
-    <!-- Submit Button -->
+    {# Submit Button #}
     <button 
         type="submit" 
         class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
@@ -98,21 +111,20 @@ ob_start();
     </button>
 </form>
 
-<?php if ($registrationEnabled ?? false): ?>
-<!-- Sign Up Link -->
-<div class="text-center mt-6 pt-6 border-t border-gray-200">
-    <p class="text-sm text-gray-600">
+{% if registrationEnabled|default(false) %}
+{# Sign Up Link #}
+<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
         Don't have an account? 
         <a href="/register" class="text-primary hover:text-primary-dark font-medium">
             Create Account
         </a>
     </p>
 </div>
-<?php endif; ?>
+{% endif %}
+{% endblock %}
 
-<?php
-$content = ob_get_clean();
-$scripts = <<<'SCRIPT'
+{% block scripts %}
 <script>
     function togglePassword() {
         const passwordInput = document.getElementById('password');
@@ -129,6 +141,4 @@ $scripts = <<<'SCRIPT'
         }
     }
 </script>
-SCRIPT;
-require __DIR__ . '/base-auth.php';
-?>
+{% endblock %}
diff --git a/app/Views/auth/register.php b/app/Views/auth/register.twig
similarity index 64%
rename from app/Views/auth/register.php
rename to app/Views/auth/register.twig
index 8c6fd04..134accd 100644
--- a/app/Views/auth/register.php
+++ b/app/Views/auth/register.twig
@@ -1,44 +1,47 @@
-<?php
-$title = 'Register';
-ob_start();
-?>
+{#
+ # Registration Page
+ #}
+{% extends 'auth/base-auth.twig' %}
 
-<!-- Logo and Title -->
+{% set title = 'Register' %}
+
+{% block content %}
+{# Logo and Title #}
 <div class="text-center mb-8">
     <div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
         <i class="fas fa-user-plus text-white text-2xl"></i>
     </div>
-    <h1 class="text-2xl font-semibold text-gray-900 mb-1">Create Account</h1>
-    <p class="text-sm text-gray-500">Join Domain Monitor today</p>
+    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Create Account</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Join Domain Monitor today</p>
 </div>
 
-<!-- Error/Success Alert -->
-<?php if (isset($_SESSION['error'])): ?>
-    <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
+{# Error Alert #}
+{% if flash.error is defined %}
+    <div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
         <div class="flex items-center">
-            <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-            <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
+            <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
+            <span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
         </div>
     </div>
-    <?php unset($_SESSION['error']); ?>
-<?php endif; ?>
+{% endif %}
 
-<?php if (isset($_SESSION['success'])): ?>
-    <div class="mb-6 bg-green-50 border border-green-200 p-3 rounded-lg">
+{# Success Alert #}
+{% if flash.success is defined %}
+    <div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
         <div class="flex items-center">
-            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-            <span class="text-sm text-green-700"><?= htmlspecialchars($_SESSION['success']) ?></span>
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
         </div>
     </div>
-    <?php unset($_SESSION['success']); ?>
-<?php endif; ?>
+{% endif %}
 
-<!-- Registration Form -->
+{# Registration Form #}
 <form method="POST" action="/register" class="space-y-4">
-    <?= csrf_field() ?>
-    <!-- Full Name Field -->
+    {{ csrf_field() }}
+    
+    {# Full Name Field #}
     <div>
-        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Full Name
         </label>
         <div class="relative">
@@ -51,14 +54,14 @@ ob_start();
                 name="full_name" 
                 required 
                 autofocus
-                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Enter your full name">
         </div>
     </div>
 
-    <!-- Username Field -->
+    {# Username Field #}
     <div>
-        <label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Username
         </label>
         <div class="relative">
@@ -71,15 +74,15 @@ ob_start();
                 name="username" 
                 required
                 pattern="[a-zA-Z0-9_]+"
-                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Choose a username">
         </div>
-        <p class="text-xs text-gray-500 mt-1">Letters, numbers, and underscores only</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Letters, numbers, and underscores only</p>
     </div>
 
-    <!-- Email Field -->
+    {# Email Field #}
     <div>
-        <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Email Address
         </label>
         <div class="relative">
@@ -91,14 +94,14 @@ ob_start();
                 id="email" 
                 name="email" 
                 required
-                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="your.email@example.com">
         </div>
     </div>
 
-    <!-- Password Field -->
+    {# Password Field #}
     <div>
-        <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Password
         </label>
         <div class="relative">
@@ -111,21 +114,21 @@ ob_start();
                 name="password" 
                 required
                 minlength="8"
-                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Create a strong password">
             <button 
                 type="button" 
                 onclick="togglePassword('password')"
-                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                 <i class="fas fa-eye text-sm" id="toggleIcon-password"></i>
             </button>
         </div>
-        <p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Minimum 8 characters</p>
     </div>
 
-    <!-- Confirm Password Field -->
+    {# Confirm Password Field #}
     <div>
-        <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Confirm Password
         </label>
         <div class="relative">
@@ -138,18 +141,18 @@ ob_start();
                 name="password_confirm" 
                 required
                 minlength="8"
-                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Re-enter your password">
             <button 
                 type="button" 
                 onclick="togglePassword('password_confirm')"
-                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                 <i class="fas fa-eye text-sm" id="toggleIcon-password_confirm"></i>
             </button>
         </div>
     </div>
 
-    <!-- Terms Checkbox -->
+    {# Terms Checkbox #}
     <div class="flex items-start pt-2">
         <div class="flex items-center h-5">
             <input 
@@ -157,17 +160,17 @@ ob_start();
                 id="terms" 
                 name="terms"
                 required 
-                class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
+                class="w-4 h-4 text-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary">
         </div>
-        <label for="terms" class="ml-2 text-xs text-gray-600">
+        <label for="terms" class="ml-2 text-xs text-gray-600 dark:text-gray-400">
             I agree to the Terms of Service and Privacy Policy
         </label>
     </div>
 
-    <!-- CAPTCHA Widget -->
-    <?php include __DIR__ . '/captcha-widget.php'; ?>
+    {# CAPTCHA Widget #}
+    {% include 'auth/_captcha-widget.twig' %}
 
-    <!-- Submit Button -->
+    {# Submit Button #}
     <button 
         type="submit" 
         class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm mt-6">
@@ -176,19 +179,18 @@ ob_start();
     </button>
 </form>
 
-<!-- Sign In Link -->
-<div class="text-center mt-6 pt-6 border-t border-gray-200">
-    <p class="text-sm text-gray-600">
+{# Sign In Link #}
+<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
         Already have an account? 
         <a href="/login" class="text-primary hover:text-primary-dark font-medium">
             Sign In
         </a>
     </p>
 </div>
+{% endblock %}
 
-<?php
-$content = ob_get_clean();
-$scripts = <<<'SCRIPT'
+{% block scripts %}
 <script>
     function togglePassword(fieldId) {
         const passwordInput = document.getElementById(fieldId);
@@ -216,6 +218,4 @@ $scripts = <<<'SCRIPT'
         }
     });
 </script>
-SCRIPT;
-require __DIR__ . '/base-auth.php';
-?>
+{% endblock %}
diff --git a/app/Views/auth/reset-password.php b/app/Views/auth/reset-password.twig
similarity index 60%
rename from app/Views/auth/reset-password.php
rename to app/Views/auth/reset-password.twig
index b58e923..2fdeb68 100644
--- a/app/Views/auth/reset-password.php
+++ b/app/Views/auth/reset-password.twig
@@ -1,37 +1,50 @@
-<?php
-$title = 'Reset Password';
-ob_start();
-?>
+{#
+ # Reset Password Page
+ #}
+{% extends 'auth/base-auth.twig' %}
 
-<!-- Logo and Title -->
+{% set title = 'Reset Password' %}
+
+{% block content %}
+{# Logo and Title #}
 <div class="text-center mb-8">
     <div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
         <i class="fas fa-lock-open text-white text-2xl"></i>
     </div>
-    <h1 class="text-2xl font-semibold text-gray-900 mb-1">Reset Password</h1>
-    <p class="text-sm text-gray-500">Enter your new password below</p>
+    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Reset Password</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Enter your new password below</p>
 </div>
 
-<!-- Error/Success Alert -->
-<?php if (isset($_SESSION['error'])): ?>
-    <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
+{# Success Alert #}
+{% if flash.success is defined %}
+    <div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
         <div class="flex items-center">
-            <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-            <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
+            <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+            <span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
         </div>
     </div>
-    <?php unset($_SESSION['error']); ?>
-<?php endif; ?>
+{% endif %}
 
-<!-- Reset Password Form -->
+{# Error Alert #}
+{% if flash.error is defined %}
+    <div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
+        <div class="flex items-center">
+            <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
+            <span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
+        </div>
+    </div>
+{% endif %}
+
+{# Reset Password Form #}
 <form method="POST" action="/reset-password" class="space-y-4">
-    <?= csrf_field() ?>
-    <!-- Hidden token field -->
-    <input type="hidden" name="token" value="<?= htmlspecialchars($token ?? '') ?>">
+    {{ csrf_field() }}
+    
+    {# Hidden token field #}
+    <input type="hidden" name="token" value="{{ token|default('') }}">
 
-    <!-- Password Field -->
+    {# Password Field #}
     <div>
-        <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             New Password
         </label>
         <div class="relative">
@@ -45,21 +58,21 @@ ob_start();
                 required
                 minlength="8"
                 autofocus
-                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Enter new password">
             <button 
                 type="button" 
                 onclick="togglePassword('password')"
-                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                 <i class="fas fa-eye text-sm" id="toggleIcon-password"></i>
             </button>
         </div>
-        <p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Minimum 8 characters</p>
     </div>
 
-    <!-- Confirm Password Field -->
+    {# Confirm Password Field #}
     <div>
-        <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
+        <label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
             Confirm New Password
         </label>
         <div class="relative">
@@ -72,34 +85,34 @@ ob_start();
                 name="password_confirm" 
                 required
                 minlength="8"
-                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
                 placeholder="Re-enter new password">
             <button 
                 type="button" 
                 onclick="togglePassword('password_confirm')"
-                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                 <i class="fas fa-eye text-sm" id="toggleIcon-password_confirm"></i>
             </button>
         </div>
     </div>
 
-    <!-- Password Strength Indicator -->
-    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-        <p class="text-xs text-blue-800 mb-2">
+    {# Password Strength Indicator #}
+    <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+        <p class="text-xs text-blue-800 dark:text-blue-300 mb-2">
             <i class="fas fa-shield-alt mr-1"></i>
             <strong>Password Requirements:</strong>
         </p>
-        <ul class="text-xs text-blue-700 space-y-1 ml-5 list-disc">
+        <ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 ml-5 list-disc">
             <li>At least 8 characters long</li>
             <li>Mix of uppercase and lowercase letters recommended</li>
             <li>Include numbers and special characters for extra security</li>
         </ul>
     </div>
 
-    <!-- CAPTCHA Widget -->
-    <?php include __DIR__ . '/captcha-widget.php'; ?>
+    {# CAPTCHA Widget #}
+    {% include 'auth/_captcha-widget.twig' %}
 
-    <!-- Submit Button -->
+    {# Submit Button #}
     <button 
         type="submit" 
         class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm mt-6">
@@ -108,17 +121,16 @@ ob_start();
     </button>
 </form>
 
-<!-- Back to Login Link -->
-<div class="text-center mt-6 pt-6 border-t border-gray-200">
-    <a href="/login" class="inline-flex items-center text-sm text-gray-600 hover:text-gray-800">
+{# Back to Login Link #}
+<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+    <a href="/login" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
         <i class="fas fa-arrow-left mr-2"></i>
         Back to Login
     </a>
 </div>
+{% endblock %}
 
-<?php
-$content = ob_get_clean();
-$scripts = <<<'SCRIPT'
+{% block scripts %}
 <script>
     function togglePassword(fieldId) {
         const passwordInput = document.getElementById(fieldId);
@@ -146,6 +158,4 @@ $scripts = <<<'SCRIPT'
         }
     });
 </script>
-SCRIPT;
-require __DIR__ . '/base-auth.php';
-?>
+{% endblock %}
diff --git a/app/Views/auth/verify-email.php b/app/Views/auth/verify-email.twig
similarity index 50%
rename from app/Views/auth/verify-email.php
rename to app/Views/auth/verify-email.twig
index fc64874..466f107 100644
--- a/app/Views/auth/verify-email.php
+++ b/app/Views/auth/verify-email.twig
@@ -1,60 +1,63 @@
-<?php
-$title = 'Verify Email';
-ob_start();
-?>
+{#
+ # Verify Email Page
+ #}
+{% extends 'auth/base-auth.twig' %}
 
-<?php if ($verified ?? false): ?>
-    <!-- Success State -->
+{% set title = 'Verify Email' %}
+
+{% block content %}
+{% if verified|default(false) %}
+    {# Success State #}
     <div class="text-center">
-        <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
-            <i class="fas fa-check-circle text-green-600 text-3xl"></i>
+        <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full mb-4">
+            <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-3xl"></i>
         </div>
-        <h1 class="text-2xl font-semibold text-gray-900 mb-2">Email Verified!</h1>
-        <p class="text-gray-600 mb-6">Your email address has been successfully verified.</p>
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Email Verified!</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">Your email address has been successfully verified.</p>
         
         <a href="/login" class="inline-flex items-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
             <i class="fas fa-sign-in-alt mr-2"></i>
             Sign In to Your Account
         </a>
     </div>
-<?php elseif ($error ?? false): ?>
-    <!-- Error State -->
+{% elseif error|default(false) %}
+    {# Error State #}
     <div class="text-center">
-        <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
-            <i class="fas fa-times-circle text-red-600 text-3xl"></i>
+        <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full mb-4">
+            <i class="fas fa-times-circle text-red-600 dark:text-red-400 text-3xl"></i>
         </div>
-        <h1 class="text-2xl font-semibold text-gray-900 mb-2">Verification Failed</h1>
-        <p class="text-gray-600 mb-6"><?= htmlspecialchars($errorMessage ?? 'Invalid or expired verification link.') ?></p>
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Verification Failed</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">{{ errorMessage|default('Invalid or expired verification link.') }}</p>
         
         <div class="space-y-2">
             <a href="/login" class="block text-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
                 <i class="fas fa-sign-in-alt mr-2"></i>
                 Go to Login
             </a>
-            <a href="/resend-verification" class="block text-center px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-lg transition-colors font-medium">
+            <a href="/resend-verification" class="block text-center px-6 py-2.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm rounded-lg transition-colors font-medium">
                 <i class="fas fa-redo mr-2"></i>
                 Resend Verification Email
             </a>
         </div>
     </div>
-<?php else: ?>
-    <!-- Pending State -->
+{% else %}
+    {# Pending State #}
     <div class="text-center">
-        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
-            <i class="fas fa-envelope text-blue-600 text-3xl"></i>
+        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-4">
+            <i class="fas fa-envelope text-blue-600 dark:text-blue-400 text-3xl"></i>
         </div>
-        <h1 class="text-2xl font-semibold text-gray-900 mb-2">Check Your Email</h1>
-        <p class="text-gray-600 mb-6">
-            We've sent a verification link to <strong><?= htmlspecialchars($email ?? 'your email') ?></strong>. 
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Check Your Email</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+            We've sent a verification link to <strong>{{ email|default('your email') }}</strong>. 
             Please check your inbox and click the link to verify your account.
         </p>
         
-        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 text-left">
-            <p class="text-sm text-blue-800 mb-2">
+        <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6 text-left">
+            <p class="text-sm text-blue-800 dark:text-blue-300 mb-2">
                 <i class="fas fa-info-circle mr-1"></i>
                 <strong>Didn't receive the email?</strong>
             </p>
-            <ul class="text-xs text-blue-700 space-y-1 ml-5 list-disc">
+            <ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 ml-5 list-disc">
                 <li>Check your spam or junk folder</li>
                 <li>Make sure you entered the correct email address</li>
                 <li>Wait a few minutes for the email to arrive</li>
@@ -66,14 +69,10 @@ ob_start();
                 <i class="fas fa-redo mr-2"></i>
                 Resend Verification Email
             </a>
-            <a href="/login" class="block text-center text-sm text-gray-600 hover:text-gray-800">
+            <a href="/login" class="block text-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                 Back to Login
             </a>
         </div>
     </div>
-<?php endif; ?>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/base-auth.php';
-?>
+{% endif %}
+{% endblock %}
diff --git a/app/Views/dashboard/index.php b/app/Views/dashboard/index.php
deleted file mode 100644
index 4af6826..0000000
--- a/app/Views/dashboard/index.php
+++ /dev/null
@@ -1,347 +0,0 @@
-<?php
-$title = 'Dashboard';
-$pageTitle = 'Dashboard Overview';
-$pageDescription = 'Monitor your domains and expiration dates';
-$pageIcon = 'fas fa-chart-line';
-
-// Get domain stats for dashboard (if not already set by base.php)
-if (!isset($domainStats)) {
-    $domainStats = \App\Helpers\LayoutHelper::getDomainStats();
-}
-
-// Prepare widget data
-$topRegistrars = array_slice($registrarCounts ?? [], 0, 8, true);
-$topTags = array_slice(array_filter($dashTags ?? [], fn($t) => ($t['usage_count'] ?? 0) > 0), 0, 8);
-$domainsWithoutGroup = ($totalDomainCount ?? 0) - ($domainsWithGroup ?? 0);
-$totalGroupCount = count($groups ?? []);
-
-ob_start();
-?>
-
-<?php if (\Core\Auth::isAdmin()): ?>
-<!-- System Status Bar (Admin) -->
-<div class="bg-white rounded-lg border border-gray-200 px-5 py-3 mb-4">
-    <div class="flex items-center gap-6">
-        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center">
-            <i class="fas fa-server text-gray-400 mr-2"></i>
-            System Status
-        </span>
-        <?php
-        $statusColors = [
-            'green' => 'text-green-600',
-            'yellow' => 'text-yellow-600',
-            'red' => 'text-red-600',
-            'gray' => 'text-gray-600'
-        ];
-        $statusDots = [
-            'green' => 'bg-green-500',
-            'yellow' => 'bg-yellow-500',
-            'red' => 'bg-red-500',
-            'gray' => 'bg-gray-400'
-        ];
-        ?>
-        <div class="flex items-center gap-5 text-sm">
-            <span class="flex items-center gap-1.5">
-                <span class="w-2 h-2 rounded-full <?= $statusDots[$systemStatus['database']['color']] ?>"></span>
-                <span class="text-gray-500">Database</span>
-                <span class="<?= $statusColors[$systemStatus['database']['color']] ?> font-medium"><?= ucfirst($systemStatus['database']['status']) ?></span>
-            </span>
-            <span class="text-gray-200">|</span>
-            <span class="flex items-center gap-1.5">
-                <span class="w-2 h-2 rounded-full <?= $statusDots[$systemStatus['whois']['color']] ?>"></span>
-                <span class="text-gray-500">TLD Registry</span>
-                <span class="<?= $statusColors[$systemStatus['whois']['color']] ?> font-medium"><?= ucfirst($systemStatus['whois']['status']) ?></span>
-            </span>
-            <span class="text-gray-200">|</span>
-            <span class="flex items-center gap-1.5">
-                <span class="w-2 h-2 rounded-full <?= $statusDots[$systemStatus['notifications']['color']] ?>"></span>
-                <span class="text-gray-500">Notifications</span>
-                <span class="<?= $statusColors[$systemStatus['notifications']['color']] ?> font-medium"><?= ucfirst($systemStatus['notifications']['status']) ?></span>
-            </span>
-        </div>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Statistics Cards -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Domains</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $domainStats['total'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-globe text-blue-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Active</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $domainStats['active'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-check-circle text-green-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Expiring Soon</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $domainStats['expiring_soon'] ?? 0 ?></p>
-                <p class="text-xs text-gray-400 mt-1">within <?= $domainStats['expiring_threshold'] ?? 30 ?> days</p>
-            </div>
-            <div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-exclamation-triangle text-orange-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Inactive</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $domainStats['inactive'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-times-circle text-gray-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Main Content: Recent Domains + Expiring Soon -->
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
-    <!-- Recent Domains -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200">
-            <div class="flex items-center justify-between">
-                <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                    <i class="fas fa-clock text-gray-400 mr-2 text-xs"></i>
-                    Recent Domains
-                </h2>
-                <a href="/domains" class="text-xs text-primary hover:text-primary-dark font-medium">
-                    View all <i class="fas fa-arrow-right ml-1"></i>
-                </a>
-            </div>
-        </div>
-        <div class="p-4">
-            <?php if (!empty($recentDomains)): ?>
-                <div class="space-y-2">
-                    <?php foreach ($recentDomains as $domain): ?>
-                        <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-200">
-                            <div class="flex items-center space-x-3 flex-1 min-w-0">
-                                <div class="w-9 h-9 bg-gray-50 rounded-lg flex items-center justify-center flex-shrink-0">
-                                    <i class="fas fa-globe text-gray-400 text-sm"></i>
-                                </div>
-                                <div class="flex-1 min-w-0">
-                                    <h3 class="text-sm font-medium text-gray-900 truncate"><?= htmlspecialchars($domain['domain_name']) ?></h3>
-                                    <div class="flex items-center space-x-3 text-xs text-gray-500 mt-0.5">
-                                        <span class="flex items-center">
-                                            <i class="far fa-calendar mr-1"></i>
-                                            <?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Not set' ?>
-                                        </span>
-                                        <?php if ($domain['registrar']): ?>
-                                            <span class="flex items-center truncate">
-                                                <i class="fas fa-building mr-1"></i>
-                                                <?= htmlspecialchars($domain['registrar']) ?>
-                                            </span>
-                                        <?php endif; ?>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex items-center space-x-2 flex-shrink-0">
-                                <span class="px-2 py-1 rounded text-xs font-medium <?= $domain['statusClass'] ?>">
-                                    <?= $domain['statusText'] ?>
-                                </span>
-                                <a href="/domains/<?= $domain['id'] ?>" class="text-gray-400 hover:text-primary">
-                                    <i class="fas fa-chevron-right text-sm"></i>
-                                </a>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            <?php else: ?>
-                <div class="text-center py-8">
-                    <i class="fas fa-globe text-gray-300 text-4xl mb-3"></i>
-                    <p class="text-sm text-gray-600">No domains added yet</p>
-                    <a href="/domains/create" class="mt-3 inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors duration-200">
-                        <i class="fas fa-plus mr-2"></i>
-                        Add Your First Domain
-                    </a>
-                </div>
-            <?php endif; ?>
-        </div>
-    </div>
-
-    <!-- Expiring Soon -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200">
-            <div class="flex items-center justify-between">
-                <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                    <i class="fas fa-exclamation-triangle text-orange-500 mr-2 text-xs"></i>
-                    Expiring Soon
-                </h2>
-                <?php if (($expiringCount ?? 0) > 5): ?>
-                    <a href="/domains?status=expiring_soon" class="text-xs text-primary hover:text-primary-dark font-medium">
-                        View all <?= $expiringCount ?>
-                        <i class="fas fa-arrow-right ml-1"></i>
-                    </a>
-                <?php endif; ?>
-            </div>
-        </div>
-        <?php if (!empty($expiringThisMonth)): ?>
-            <div class="p-4 space-y-2">
-                <?php foreach ($expiringThisMonth as $domain): ?>
-                    <?php 
-                        $daysLeft = $domain['daysLeft'];
-                        $urgencyClass = $daysLeft <= 7 ? 'text-red-600' : ($daysLeft <= 30 ? 'text-orange-600' : 'text-yellow-600');
-                    ?>
-                    <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-200">
-                        <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate"><?= htmlspecialchars($domain['domain_name']) ?></p>
-                            <p class="text-xs text-gray-500 mt-0.5">
-                                <?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?>
-                                <span class="<?= $urgencyClass ?> font-semibold ml-2">
-                                    <?= $daysLeft ?> days
-                                </span>
-                            </p>
-                        </div>
-                        <a href="/domains/<?= $domain['id'] ?>" class="text-gray-400 hover:text-primary">
-                            <i class="fas fa-chevron-right text-sm"></i>
-                        </a>
-                    </div>
-                <?php endforeach; ?>
-            </div>
-        <?php else: ?>
-            <div class="p-6 text-center">
-                <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
-                <p class="text-sm text-gray-600">No domains expiring soon</p>
-                <p class="text-xs text-gray-400 mt-1">within <?= $domainStats['expiring_threshold'] ?? 30 ?> days</p>
-            </div>
-        <?php endif; ?>
-    </div>
-</div>
-
-<!-- Insights Row -->
-<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-    <!-- Registrar Distribution -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-            <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-building text-gray-400 mr-2 text-xs"></i>
-                Registrar Distribution
-            </h2>
-            <span class="text-xs text-gray-500"><?= count($registrarCounts ?? []) ?> registrar<?= count($registrarCounts ?? []) != 1 ? 's' : '' ?></span>
-        </div>
-        <div class="p-5">
-            <?php if (!empty($topRegistrars)): ?>
-                <div class="space-y-3">
-                    <?php foreach ($topRegistrars as $regName => $regCount): ?>
-                        <?php $regPct = ($totalDomainCount ?? 0) > 0 ? round(($regCount / $totalDomainCount) * 100) : 0; ?>
-                        <div>
-                            <div class="flex items-center justify-between mb-1">
-                                <span class="text-sm text-gray-700 font-medium truncate mr-3"><?= htmlspecialchars($regName) ?></span>
-                                <span class="text-xs text-gray-500 whitespace-nowrap"><?= $regCount ?> (<?= $regPct ?>%)</span>
-                            </div>
-                            <div class="w-full bg-gray-100 rounded-full h-1.5">
-                                <div class="bg-blue-500 rounded-full h-1.5" style="width: <?= max(2, $regPct) ?>%"></div>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            <?php else: ?>
-                <div class="text-center py-4">
-                    <i class="fas fa-building text-gray-300 text-2xl mb-2"></i>
-                    <p class="text-sm text-gray-500">No registrar data</p>
-                </div>
-            <?php endif; ?>
-        </div>
-    </div>
-
-    <!-- Tag Usage -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-            <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-tags text-gray-400 mr-2 text-xs"></i>
-                Tag Usage
-            </h2>
-            <span class="text-xs text-gray-500"><?= count($dashTags ?? []) ?> tag<?= count($dashTags ?? []) != 1 ? 's' : '' ?></span>
-        </div>
-        <div class="p-5">
-            <?php if (!empty($topTags)): ?>
-                <div class="space-y-3">
-                    <?php foreach ($topTags as $tt): ?>
-                        <?php $pct = ($totalDomainCount ?? 0) > 0 ? round(($tt['usage_count'] / $totalDomainCount) * 100) : 0; ?>
-                        <div>
-                            <div class="flex items-center justify-between mb-1">
-                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border <?= htmlspecialchars($tt['color'] ?? 'bg-gray-100 text-gray-700 border-gray-300') ?>">
-                                    <i class="fas fa-tag mr-1" style="font-size: 8px;"></i>
-                                    <?= htmlspecialchars($tt['name']) ?>
-                                </span>
-                                <span class="text-xs text-gray-500"><?= $tt['usage_count'] ?> domain<?= $tt['usage_count'] != 1 ? 's' : '' ?> (<?= $pct ?>%)</span>
-                            </div>
-                            <div class="w-full bg-gray-100 rounded-full h-1.5">
-                                <div class="bg-primary rounded-full h-1.5" style="width: <?= max(2, $pct) ?>%"></div>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            <?php else: ?>
-                <div class="text-center py-4">
-                    <i class="fas fa-tags text-gray-300 text-2xl mb-2"></i>
-                    <p class="text-sm text-gray-500">No tags in use</p>
-                </div>
-            <?php endif; ?>
-        </div>
-    </div>
-
-    <!-- Notification Coverage -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-            <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-bell text-gray-400 mr-2 text-xs"></i>
-                Notification Coverage
-            </h2>
-            <span class="text-xs text-gray-500"><?= $totalGroupCount ?> group<?= $totalGroupCount != 1 ? 's' : '' ?>, <?= $totalChannels ?? 0 ?> channel<?= ($totalChannels ?? 0) != 1 ? 's' : '' ?></span>
-        </div>
-        <div class="p-5">
-            <?php if (($totalDomainCount ?? 0) > 0): ?>
-                <?php $coveragePct = round((($domainsWithGroup ?? 0) / $totalDomainCount) * 100); ?>
-                <div class="flex items-center justify-center mb-4">
-                    <div class="relative w-28 h-28">
-                        <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 36 36">
-                            <path class="text-gray-200" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
-                            <path class="text-primary" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="<?= $coveragePct ?>, 100" stroke-linecap="round" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
-                        </svg>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-xl font-bold text-gray-900"><?= $coveragePct ?>%</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="grid grid-cols-2 gap-3 text-center">
-                    <div class="bg-green-50 border border-green-200 rounded-lg p-3">
-                        <p class="text-lg font-bold text-green-700"><?= $domainsWithGroup ?? 0 ?></p>
-                        <p class="text-xs text-green-600">With Notifications</p>
-                    </div>
-                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                        <p class="text-lg font-bold text-gray-700"><?= $domainsWithoutGroup ?></p>
-                        <p class="text-xs text-gray-500">Without Notifications</p>
-                    </div>
-                </div>
-            <?php else: ?>
-                <div class="text-center py-4">
-                    <i class="fas fa-bell-slash text-gray-300 text-2xl mb-2"></i>
-                    <p class="text-sm text-gray-500">No domains to monitor</p>
-                </div>
-            <?php endif; ?>
-        </div>
-    </div>
-</div>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
diff --git a/app/Views/dashboard/index.twig b/app/Views/dashboard/index.twig
new file mode 100644
index 0000000..2c05d40
--- /dev/null
+++ b/app/Views/dashboard/index.twig
@@ -0,0 +1,378 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Dashboard' %}
+{% set pageTitle = 'Dashboard Overview' %}
+{% set pageDescription = 'Monitor your domains and expiration dates' %}
+{% set pageIcon = 'fas fa-chart-line' %}
+
+{% set topRegistrars = registrarCounts|default({})|slice(0, 8) %}
+{% set topTags = dashTags|default([])|filter(t => t.usage_count|default(0) > 0)|slice(0, 8) %}
+{% set domainsWithoutGroup = totalDomainCount|default(0) - domainsWithGroup|default(0) %}
+{% set totalGroupCount = groups|default([])|length %}
+
+{% block content %}
+{# Welcome Banner #}
+<div class="mb-4 bg-gradient-to-r from-primary to-blue-600 rounded-lg p-4 text-white relative overflow-hidden">
+    <div class="absolute right-0 top-0 w-48 h-48 opacity-10">
+        <i class="fas fa-globe text-[150px] -rotate-12 -translate-y-6 translate-x-6"></i>
+    </div>
+    <div class="relative z-10">
+        <h2 class="text-lg font-bold">Welcome back, {{ auth.fullName|default(auth.username)|default('User') }}!</h2>
+        <p class="text-blue-100 mt-1 text-xs">
+            {% if domainStats.expiring_soon|default(0) > 0 %}
+                You have <span class="font-semibold text-white">{{ domainStats.expiring_soon }}</span> domain{{ domainStats.expiring_soon > 1 ? 's' : '' }} expiring within {{ domainStats.expiring_threshold|default(30) }} days.
+            {% else %}
+                All your domains are in good standing. No urgent actions needed.
+            {% endif %}
+        </p>
+        <div class="mt-3 flex flex-wrap gap-2">
+            <a href="/domains/create" class="inline-flex items-center px-3 py-1.5 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-xs font-medium transition-colors">
+                <i class="fas fa-plus mr-1.5 text-xs"></i>Add Domain
+            </a>
+            <a href="/debug/whois" class="inline-flex items-center px-3 py-1.5 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg text-xs font-medium transition-colors">
+                <i class="fas fa-search mr-1.5 text-xs"></i>WHOIS Lookup
+            </a>
+        </div>
+    </div>
+</div>
+
+{% if auth.isAdmin %}
+{# System Status Bar (Admin) #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 px-5 py-3 mb-4">
+    <div class="flex flex-wrap items-center gap-4 sm:gap-6">
+        <span class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide flex items-center">
+            <i class="fas fa-server text-gray-400 dark:text-slate-500 mr-2"></i>
+            System Status
+        </span>
+        <div class="flex flex-wrap items-center gap-3 sm:gap-5 text-sm">
+            {% set statusColors = {'green': 'text-green-600 dark:text-green-400', 'yellow': 'text-yellow-600 dark:text-yellow-400', 'red': 'text-red-600 dark:text-red-400', 'gray': 'text-gray-600 dark:text-slate-400'} %}
+            {% set statusDots = {'green': 'bg-green-500', 'yellow': 'bg-yellow-500', 'red': 'bg-red-500', 'gray': 'bg-gray-400'} %}
+            <span class="flex items-center gap-1.5">
+                <span class="w-2 h-2 rounded-full {{ statusDots[systemStatus.database.color] }}"></span>
+                <span class="text-gray-500 dark:text-slate-400">Database</span>
+                <span class="{{ statusColors[systemStatus.database.color] }} font-medium">{{ systemStatus.database.status|capitalize }}</span>
+            </span>
+            <span class="text-gray-200 dark:text-slate-700 hidden sm:inline">|</span>
+            <span class="flex items-center gap-1.5">
+                <span class="w-2 h-2 rounded-full {{ statusDots[systemStatus.whois.color] }}"></span>
+                <span class="text-gray-500 dark:text-slate-400">TLD Registry</span>
+                <span class="{{ statusColors[systemStatus.whois.color] }} font-medium">{{ systemStatus.whois.status|capitalize }}</span>
+            </span>
+            <span class="text-gray-200 dark:text-slate-700 hidden sm:inline">|</span>
+            <span class="flex items-center gap-1.5">
+                <span class="w-2 h-2 rounded-full {{ statusDots[systemStatus.notifications.color] }}"></span>
+                <span class="text-gray-500 dark:text-slate-400">Notifications</span>
+                <span class="{{ statusColors[systemStatus.notifications.color] }} font-medium">{{ systemStatus.notifications.status|capitalize }}</span>
+            </span>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+{# Statistics Cards #}
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+    {# Total Domains Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md dark:hover:shadow-slate-700/50 transition-all duration-200">
+        <div class="flex items-start justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Total Domains</p>
+                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1.5">{{ domainStats.total|default(0) }}</p>
+            </div>
+            <div class="w-9 h-9 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-sm"></i>
+            </div>
+        </div>
+        <div class="mt-2.5 pt-2.5 border-t border-gray-100 dark:border-slate-700">
+            <a href="/domains" class="text-xs text-primary dark:text-blue-400 hover:underline font-medium">
+                View all <i class="fas fa-arrow-right ml-1"></i>
+            </a>
+        </div>
+    </div>
+
+    {# Active Domains Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md dark:hover:shadow-slate-700/50 transition-all duration-200">
+        <div class="flex items-start justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Active</p>
+                <p class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1.5">{{ domainStats.active|default(0) }}</p>
+            </div>
+            <div class="w-9 h-9 bg-green-100 dark:bg-green-500/20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-sm"></i>
+            </div>
+        </div>
+        <div class="mt-2.5 pt-2.5 border-t border-gray-100 dark:border-slate-700">
+            {% if domainStats.total|default(0) > 0 %}
+                {% set activePercent = ((domainStats.active|default(0) / domainStats.total) * 100)|round %}
+                <span class="text-xs text-gray-500 dark:text-slate-400">{{ activePercent }}% of total</span>
+            {% else %}
+                <span class="text-xs text-gray-500 dark:text-slate-400">No domains yet</span>
+            {% endif %}
+        </div>
+    </div>
+
+    {# Expiring Soon Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md dark:hover:shadow-slate-700/50 transition-all duration-200 {{ domainStats.expiring_soon|default(0) > 0 ? 'ring-2 ring-orange-500/50' : '' }}">
+        <div class="flex items-start justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Expiring Soon</p>
+                <p class="text-2xl font-bold {{ domainStats.expiring_soon|default(0) > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-gray-900 dark:text-white' }} mt-1.5">{{ domainStats.expiring_soon|default(0) }}</p>
+            </div>
+            <div class="w-9 h-9 {{ domainStats.expiring_soon|default(0) > 0 ? 'bg-orange-100 dark:bg-orange-500/20' : 'bg-gray-100 dark:bg-slate-700' }} rounded-lg flex items-center justify-center">
+                <i class="fas fa-clock {{ domainStats.expiring_soon|default(0) > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-gray-400 dark:text-slate-500' }} text-sm"></i>
+            </div>
+        </div>
+        <div class="mt-2.5 pt-2.5 border-t border-gray-100 dark:border-slate-700">
+            <span class="text-xs text-gray-500 dark:text-slate-400">within {{ domainStats.expiring_threshold|default(30) }} days</span>
+        </div>
+    </div>
+
+    {# Inactive Domains Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md dark:hover:shadow-slate-700/50 transition-all duration-200">
+        <div class="flex items-start justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Inactive</p>
+                <p class="text-2xl font-bold text-gray-400 dark:text-slate-500 mt-1.5">{{ domainStats.inactive|default(0) }}</p>
+            </div>
+            <div class="w-9 h-9 bg-gray-100 dark:bg-slate-700 rounded-lg flex items-center justify-center">
+                <i class="fas fa-pause-circle text-gray-400 dark:text-slate-500 text-sm"></i>
+            </div>
+        </div>
+        <div class="mt-2.5 pt-2.5 border-t border-gray-100 dark:border-slate-700">
+            <span class="text-xs text-gray-500 dark:text-slate-400">monitoring paused</span>
+        </div>
+    </div>
+</div>
+
+{# Main Content: Recent Domains + Expiring Soon #}
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
+    {# Recent Domains #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700">
+            <div class="flex items-center justify-between">
+                <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                    <i class="fas fa-clock text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
+                    Recent Domains
+                </h2>
+                <a href="/domains" class="text-xs text-primary hover:text-primary-dark font-medium">
+                    View all <i class="fas fa-arrow-right ml-1"></i>
+                </a>
+            </div>
+        </div>
+        <div class="p-4">
+            {% if recentDomains is not empty %}
+                <div class="space-y-2">
+                    {% for domain in recentDomains %}
+                        <div class="flex items-center justify-between p-3 border border-gray-100 dark:border-slate-700 rounded-lg hover:border-gray-300 dark:hover:border-slate-600 hover:shadow-sm transition-all duration-200">
+                            <div class="flex items-center space-x-3 flex-1 min-w-0">
+                                <div class="w-9 h-9 bg-gray-50 dark:bg-slate-700 rounded-lg flex items-center justify-center flex-shrink-0">
+                                    <i class="fas fa-globe text-gray-400 dark:text-slate-500 text-sm"></i>
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ domain.domain_name }}</h3>
+                                    <div class="flex items-center space-x-3 text-xs text-gray-500 dark:text-slate-400 mt-0.5">
+                                        <span class="flex items-center">
+                                            <i class="far fa-calendar mr-1"></i>
+                                            {{ domain.expiration_date ? domain.expiration_date|date('M d, Y') : 'Not set' }}
+                                        </span>
+                                        {% if domain.registrar %}
+                                            <span class="flex items-center truncate">
+                                                <i class="fas fa-building mr-1"></i>
+                                                {{ domain.registrar }}
+                                            </span>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2 flex-shrink-0">
+                                <span class="px-2 py-1 rounded text-xs font-medium {{ domain.statusClass }}">
+                                    {{ domain.statusText }}
+                                </span>
+                                <a href="/domains/{{ domain.id }}" class="text-gray-400 dark:text-slate-500 hover:text-primary">
+                                    <i class="fas fa-chevron-right text-sm"></i>
+                                </a>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="text-center py-8">
+                    <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+                    <p class="text-sm text-gray-600 dark:text-slate-400">No domains added yet</p>
+                    <a href="/domains/create" class="mt-3 inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors duration-200">
+                        <i class="fas fa-plus mr-2"></i>
+                        Add Your First Domain
+                    </a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {# Expiring Soon #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700">
+            <div class="flex items-center justify-between">
+                <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                    <i class="fas fa-exclamation-triangle text-orange-500 mr-2 text-xs"></i>
+                    Expiring Soon
+                </h2>
+                {% if expiringCount|default(0) > 5 %}
+                    <a href="/domains?status=expiring_soon" class="text-xs text-primary hover:text-primary-dark font-medium">
+                        View all {{ expiringCount }}
+                        <i class="fas fa-arrow-right ml-1"></i>
+                    </a>
+                {% endif %}
+            </div>
+        </div>
+        {% if expiringThisMonth is not empty %}
+            <div class="p-4 space-y-2">
+                {% for domain in expiringThisMonth %}
+                    {% set daysLeft = domain.daysLeft %}
+                    {% if daysLeft <= 7 %}
+                        {% set urgencyClass = 'text-red-600 dark:text-red-400' %}
+                    {% elseif daysLeft <= 30 %}
+                        {% set urgencyClass = 'text-orange-600 dark:text-orange-400' %}
+                    {% else %}
+                        {% set urgencyClass = 'text-yellow-600 dark:text-yellow-400' %}
+                    {% endif %}
+                    <div class="flex items-center justify-between p-3 border border-gray-100 dark:border-slate-700 rounded-lg hover:border-gray-300 dark:hover:border-slate-600 hover:shadow-sm transition-all duration-200">
+                        <div class="flex-1 min-w-0">
+                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ domain.domain_name }}</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-0.5">
+                                {{ domain.expiration_date ? domain.expiration_date|date('M d, Y') : 'Unknown' }}
+                                <span class="{{ urgencyClass }} font-semibold ml-2">
+                                    {{ daysLeft }} days
+                                </span>
+                            </p>
+                        </div>
+                        <a href="/domains/{{ domain.id }}" class="text-gray-400 dark:text-slate-500 hover:text-primary">
+                            <i class="fas fa-chevron-right text-sm"></i>
+                        </a>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="p-6 text-center">
+                <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
+                <p class="text-sm text-gray-600 dark:text-slate-400">No domains expiring soon</p>
+                <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">within {{ domainStats.expiring_threshold|default(30) }} days</p>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+{# Insights Row #}
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+    {# Registrar Distribution #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
+                Registrar Distribution
+            </h2>
+            <span class="text-xs text-gray-500 dark:text-slate-400">{{ registrarCounts|default({})|length }} registrar{{ registrarCounts|default({})|length != 1 ? 's' : '' }}</span>
+        </div>
+        <div class="p-5">
+            {% if topRegistrars is not empty %}
+                <div class="space-y-3">
+                    {% for regName, regCount in topRegistrars %}
+                        {% set regPct = totalDomainCount|default(0) > 0 ? ((regCount / totalDomainCount) * 100)|round : 0 %}
+                        <div>
+                            <div class="flex items-center justify-between mb-1">
+                                <span class="text-sm text-gray-700 dark:text-slate-300 font-medium truncate mr-3">{{ regName }}</span>
+                                <span class="text-xs text-gray-500 dark:text-slate-400 whitespace-nowrap">{{ regCount }} ({{ regPct }}%)</span>
+                            </div>
+                            <div class="w-full bg-gray-100 dark:bg-slate-700 rounded-full h-1.5">
+                                <div class="bg-blue-500 rounded-full h-1.5" style="width: {{ max(2, regPct) }}%"></div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="text-center py-4">
+                    <i class="fas fa-building text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                    <p class="text-sm text-gray-500 dark:text-slate-400">No registrar data</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {# Tag Usage #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-tags text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
+                Tag Usage
+            </h2>
+            <span class="text-xs text-gray-500 dark:text-slate-400">{{ dashTags|default([])|length }} tag{{ dashTags|default([])|length != 1 ? 's' : '' }}</span>
+        </div>
+        <div class="p-5">
+            {% if topTags is not empty %}
+                <div class="space-y-3">
+                    {% for tt in topTags %}
+                        {% set pct = totalDomainCount|default(0) > 0 ? ((tt.usage_count / totalDomainCount) * 100)|round : 0 %}
+                        <div>
+                            <div class="flex items-center justify-between mb-1">
+                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ tt.color|default('bg-gray-100 text-gray-700 border-gray-300') }}">
+                                    <i class="fas fa-tag mr-1" style="font-size: 8px;"></i>
+                                    {{ tt.name }}
+                                </span>
+                                <span class="text-xs text-gray-500 dark:text-slate-400">{{ tt.usage_count }} domain{{ tt.usage_count != 1 ? 's' : '' }} ({{ pct }}%)</span>
+                            </div>
+                            <div class="w-full bg-gray-100 dark:bg-slate-700 rounded-full h-1.5">
+                                <div class="bg-primary rounded-full h-1.5" style="width: {{ max(2, pct) }}%"></div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="text-center py-4">
+                    <i class="fas fa-tags text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                    <p class="text-sm text-gray-500 dark:text-slate-400">No tags in use</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {# Notification Coverage #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-bell text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
+                Notification Coverage
+            </h2>
+            <span class="text-xs text-gray-500 dark:text-slate-400">{{ totalGroupCount }} group{{ totalGroupCount != 1 ? 's' : '' }}, {{ totalChannels|default(0) }} channel{{ totalChannels|default(0) != 1 ? 's' : '' }}</span>
+        </div>
+        <div class="p-5">
+            {% if totalDomainCount|default(0) > 0 %}
+                {% set coveragePct = ((domainsWithGroup|default(0) / totalDomainCount) * 100)|round %}
+                <div class="flex items-center justify-center mb-4">
+                    <div class="relative w-28 h-28">
+                        <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 36 36">
+                            <path class="text-gray-200 dark:text-slate-700" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
+                            <path class="text-primary" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="{{ coveragePct }}, 100" stroke-linecap="round" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
+                        </svg>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-xl font-bold text-gray-900 dark:text-white">{{ coveragePct }}%</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3 text-center">
+                    <div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30 rounded-lg p-3">
+                        <p class="text-lg font-bold text-green-700 dark:text-green-400">{{ domainsWithGroup|default(0) }}</p>
+                        <p class="text-xs text-green-600 dark:text-green-500">With Notifications</p>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-3">
+                        <p class="text-lg font-bold text-gray-700 dark:text-slate-300">{{ domainsWithoutGroup }}</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400">Without Notifications</p>
+                    </div>
+                </div>
+            {% else %}
+                <div class="text-center py-4">
+                    <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                    <p class="text-sm text-gray-500 dark:text-slate-400">No domains to monitor</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/app/Views/debug/whois.php b/app/Views/debug/whois.twig
similarity index 60%
rename from app/Views/debug/whois.php
rename to app/Views/debug/whois.twig
index 507fb98..b7d4bc0 100644
--- a/app/Views/debug/whois.php
+++ b/app/Views/debug/whois.twig
@@ -1,28 +1,29 @@
-<?php
-$title = 'WHOIS Debug Tool';
-$pageTitle = 'WHOIS Debug Tool';
-$pageDescription = 'Test and debug WHOIS data extraction';
-$pageIcon = 'fas fa-search';
-ob_start();
-?>
+{% extends "layout/base.twig" %}
 
-<?php if (empty($domain)): ?>
+{% set title = 'WHOIS Debug Tool' %}
+{% set pageTitle = 'WHOIS Debug Tool' %}
+{% set pageDescription = 'Test and debug WHOIS data extraction' %}
+{% set pageIcon = 'fas fa-search' %}
+
+{% block content %}
+
+{% if domain is empty %}
     <!-- Search Form -->
     <div class="max-w-2xl mx-auto">
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
             <form method="GET" action="/debug/whois" class="space-y-4">
                 <div>
-                    <label for="domain" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="domain" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Domain Name
                     </label>
                     <input type="text" 
                            id="domain" 
                            name="domain" 
-                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                           class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white" 
                            placeholder="Enter domain (e.g., google.com)"
                            required
                            autofocus>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Enter a domain name without http:// or www.
                     </p>
                 </div>
@@ -36,14 +37,14 @@ ob_start();
         </div>
 
         <!-- Info Card -->
-        <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
             <div class="flex items-start">
                 <div class="flex-shrink-0">
                     <i class="fas fa-info-circle text-blue-500 text-lg"></i>
                 </div>
                 <div class="ml-3">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-1">What is this tool?</h3>
-                    <p class="text-xs text-gray-600 leading-relaxed">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">What is this tool?</h3>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 leading-relaxed">
                         This debug tool shows you the raw WHOIS data for any domain and how our system parses it. 
                         Use it to troubleshoot issues with domain information extraction.
                     </p>
@@ -52,10 +53,10 @@ ob_start();
         </div>
     </div>
 
-<?php else: ?>
+{% else %}
     <!-- Back Button & Copy Report -->
     <div class="mb-4 flex justify-between items-center">
-        <a href="/debug/whois" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
+        <a href="/debug/whois" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
             <i class="fas fa-arrow-left mr-2"></i>
             Check Another Domain
         </a>
@@ -66,19 +67,19 @@ ob_start();
     </div>
 
     <!-- Domain Info Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Domain</p>
-                <p class="text-sm font-semibold text-gray-900 mt-1"><?= htmlspecialchars($domain) ?></p>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Domain</p>
+                <p class="text-sm font-semibold text-gray-900 dark:text-white mt-1">{{ domain }}</p>
             </div>
             <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">WHOIS Server</p>
-                <p class="text-sm font-semibold text-gray-900 mt-1"><?= htmlspecialchars($server) ?></p>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">WHOIS Server</p>
+                <p class="text-sm font-semibold text-gray-900 dark:text-white mt-1">{{ server }}</p>
             </div>
             <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">TLD</p>
-                <p class="text-sm font-semibold text-gray-900 mt-1"><?= htmlspecialchars($tld) ?></p>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">TLD</p>
+                <p class="text-sm font-semibold text-gray-900 dark:text-white mt-1">{{ tld }}</p>
             </div>
         </div>
     </div>
@@ -86,53 +87,53 @@ ob_start();
     <!-- Main Content Grid -->
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <!-- Parsed Data -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-5 py-3 border-b border-gray-200 bg-green-50">
-                <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                    <i class="fas fa-check-circle text-green-600 mr-2 text-sm"></i>
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 bg-green-50 dark:bg-green-500/10">
+                <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                    <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-2 text-sm"></i>
                     Extracted Data (What We Save)
                 </h2>
             </div>
             <div class="p-5">
                 <div class="space-y-3">
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Domain</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['domain'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Domain</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.domain ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Registrar</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['registrar'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Registrar</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.registrar ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Expiration Date</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['expiration_date'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Expiration Date</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.expiration_date ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Creation Date</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['creation_date'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Creation Date</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.creation_date ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Updated Date</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['updated_date'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Updated Date</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.updated_date ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Registrar URL</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['registrar_url'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Registrar URL</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.registrar_url ?? 'N/A' }}</span>
                     </div>
-                    <div class="flex justify-between py-2 border-b border-gray-100">
-                        <span class="text-xs font-medium text-gray-600">Abuse Email</span>
-                        <span class="text-xs text-gray-900 font-mono"><?= htmlspecialchars($info['abuse_email'] ?? 'N/A') ?></span>
+                    <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-700">
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400">Abuse Email</span>
+                        <span class="text-xs text-gray-900 dark:text-white font-mono">{{ info.abuse_email ?? 'N/A' }}</span>
                     </div>
                     <div class="py-2">
-                        <span class="text-xs font-medium text-gray-600 block mb-2">Nameservers</span>
+                        <span class="text-xs font-medium text-gray-600 dark:text-slate-400 block mb-2">Nameservers</span>
                         <div class="space-y-1">
-                            <?php if (!empty($info['nameservers'])): ?>
-                                <?php foreach ($info['nameservers'] as $ns): ?>
-                                    <div class="text-xs text-gray-900 font-mono bg-gray-50 px-2 py-1 rounded"><?= htmlspecialchars($ns) ?></div>
-                                <?php endforeach; ?>
-                            <?php else: ?>
-                                <span class="text-xs text-gray-400">N/A</span>
-                            <?php endif; ?>
+                            {% if info.nameservers is not empty %}
+                                {% for ns in info.nameservers %}
+                                    <div class="text-xs text-gray-900 dark:text-white font-mono bg-gray-50 dark:bg-slate-700 px-2 py-1 rounded">{{ ns }}</div>
+                                {% endfor %}
+                            {% else %}
+                                <span class="text-xs text-gray-400 dark:text-slate-500">N/A</span>
+                            {% endif %}
                         </div>
                     </div>
                 </div>
@@ -140,30 +141,30 @@ ob_start();
         </div>
 
         <!-- Key-Value Pairs -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-5 py-3 border-b border-gray-200 bg-blue-50">
-                <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                    <i class="fas fa-table text-blue-600 mr-2 text-sm"></i>
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 bg-blue-50 dark:bg-blue-500/10">
+                <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                    <i class="fas fa-table text-blue-600 dark:text-blue-400 mr-2 text-sm"></i>
                     All Key-Value Pairs
                 </h2>
             </div>
             <div class="overflow-y-auto" style="max-height: 500px;">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50 sticky top-0">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                    <thead class="bg-gray-50 dark:bg-slate-700 sticky top-0">
                         <tr>
-                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase">Key</th>
-                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase">Value</th>
+                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 dark:text-slate-400 uppercase">Key</th>
+                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 dark:text-slate-400 uppercase">Value</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white divide-y divide-gray-100">
-                        <?php foreach ($parsedData as $item): ?>
-                            <?php if (!empty($item['value'])): ?>
-                                <tr class="hover:bg-gray-50">
-                                    <td class="px-4 py-2 text-xs font-medium text-gray-700"><?= htmlspecialchars($item['key']) ?></td>
-                                    <td class="px-4 py-2 text-xs text-gray-900 font-mono"><?= htmlspecialchars($item['value']) ?></td>
+                    <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-100 dark:divide-slate-700">
+                        {% for item in parsedData %}
+                            {% if item.value is not empty %}
+                                <tr class="hover:bg-gray-50 dark:hover:bg-slate-700">
+                                    <td class="px-4 py-2 text-xs font-medium text-gray-700 dark:text-slate-300">{{ item.key }}</td>
+                                    <td class="px-4 py-2 text-xs text-gray-900 dark:text-white font-mono">{{ item.value }}</td>
                                 </tr>
-                            <?php endif; ?>
-                        <?php endforeach; ?>
+                            {% endif %}
+                        {% endfor %}
                     </tbody>
                 </table>
             </div>
@@ -171,27 +172,27 @@ ob_start();
     </div>
 
     <!-- Raw Response -->
-    <div class="mt-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-5 py-3 border-b border-gray-200 bg-gray-50">
-            <h2 class="text-sm font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-file-code text-gray-600 mr-2 text-sm"></i>
+    <div class="mt-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700">
+            <h2 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-file-code text-gray-600 dark:text-slate-400 mr-2 text-sm"></i>
                 Raw WHOIS Response
             </h2>
         </div>
         <div class="p-5">
-            <pre class="text-xs font-mono bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><?= htmlspecialchars($response) ?></pre>
+            <pre class="text-xs font-mono bg-gray-50 dark:bg-slate-900 p-4 rounded border border-gray-200 dark:border-slate-700 overflow-x-auto text-gray-900 dark:text-slate-300">{{ response }}</pre>
         </div>
     </div>
 
     <!-- Hidden data for JS -->
     <script id="debug-data" type="application/json">
     {
-        "domain": <?= json_encode($domain) ?>,
-        "tld": <?= json_encode($tld) ?>,
-        "server": <?= json_encode($server) ?>,
-        "extractedData": <?= json_encode($info) ?>,
-        "rawResponse": <?= json_encode($response) ?>,
-        "parsedKeyValuePairs": <?= json_encode($parsedData) ?>
+        "domain": {{ domain|json_encode|raw }},
+        "tld": {{ tld|json_encode|raw }},
+        "server": {{ server|json_encode|raw }},
+        "extractedData": {{ info|json_encode|raw }},
+        "rawResponse": {{ response|json_encode|raw }},
+        "parsedKeyValuePairs": {{ parsedData|json_encode|raw }}
     }
     </script>
 
@@ -231,33 +232,26 @@ ob_start();
         report += data.rawResponse;
         report += `\n\n=== END OF REPORT ===`;
         
-        // Copy to clipboard with fallback
         copyToClipboard(report, button);
     }
 
-    // Robust clipboard copy function with fallback
     function copyToClipboard(text, button) {
-        // Try modern clipboard API first
         if (navigator.clipboard && window.isSecureContext) {
             navigator.clipboard.writeText(text).then(() => {
                 showCopySuccess(button);
             }).catch(err => {
                 console.error('Modern clipboard API failed:', err);
-                // Fallback to legacy method
                 fallbackCopyTextToClipboard(text, button);
             });
         } else {
-            // Use fallback for non-HTTPS or older browsers
             fallbackCopyTextToClipboard(text, button);
         }
     }
 
     function fallbackCopyTextToClipboard(text, button) {
-        // Create a temporary textarea
         const textArea = document.createElement('textarea');
         textArea.value = text;
         
-        // Make it invisible but accessible
         textArea.style.position = 'fixed';
         textArea.style.top = '0';
         textArea.style.left = '0';
@@ -308,10 +302,6 @@ ob_start();
     }
     </script>
 
-<?php endif; ?>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endif %}
 
+{% endblock %}
diff --git a/app/Views/domains/bulk-add.php b/app/Views/domains/bulk-add.twig
similarity index 68%
rename from app/Views/domains/bulk-add.php
rename to app/Views/domains/bulk-add.twig
index 3898c48..afc5def 100644
--- a/app/Views/domains/bulk-add.php
+++ b/app/Views/domains/bulk-add.twig
@@ -1,60 +1,61 @@
-<?php
-$title = 'Bulk Add Domains';
-$pageTitle = 'Bulk Add Domains';
-$pageDescription = 'Add multiple domains at once';
-$pageIcon = 'fas fa-layer-group';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Bulk Add Domains' %}
+{% set pageTitle = 'Bulk Add Domains' %}
+{% set pageDescription = 'Add multiple domains at once' %}
+{% set pageIcon = 'fas fa-layer-group' %}
+
+{% block content %}
 
 <!-- Main Container -->
 <div class="max-w-4xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
         <!-- Tabs -->
-        <div class="flex border-b border-gray-200 bg-gray-50">
-            <button onclick="switchTab('paste')" id="tab-paste" class="px-6 py-3 text-sm font-medium border-b-2 border-primary text-primary bg-white transition-colors">
+        <div class="flex border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <button onclick="switchTab('paste')" id="tab-paste" class="px-6 py-3 text-sm font-medium border-b-2 border-primary text-primary bg-white dark:bg-slate-800 transition-colors">
                 <i class="fas fa-keyboard mr-2"></i>Paste Domains
             </button>
-            <button onclick="switchTab('import')" id="tab-import" class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors">
+            <button onclick="switchTab('import')" id="tab-import" class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 transition-colors">
                 <i class="fas fa-file-upload mr-2"></i>Import from File
             </button>
         </div>
 
-        <!-- Tab 1: Paste Domains (existing) -->
+        <!-- Tab 1: Paste Domains -->
         <div id="panel-paste" class="p-6">
             <form method="POST" action="/domains/bulk-add" class="space-y-5">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
                 <!-- Domains Textarea -->
                 <div>
-                    <label for="domains" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="domains" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Domain Names *
                     </label>
                     <textarea 
                         id="domains" 
                         name="domains" 
                         rows="10"
-                        class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                        class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
                         placeholder="example.com&#10;google.com&#10;github.com&#10;..."
                         required
                         autofocus></textarea>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Enter one domain per line. Domains without http:// or www.
                     </p>
                 </div>
 
                 <!-- Tags -->
                 <div>
-                    <label for="tags-input" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="tags-input" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Tags
-                        <span class="text-gray-400 font-normal">(Optional)</span>
+                        <span class="text-gray-400 dark:text-slate-500 font-normal">(Optional)</span>
                     </label>
                     
-                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50"></div>
+                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 dark:border-slate-600 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50 dark:bg-slate-900"></div>
                     
                     <div class="relative">
-                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
+                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-sm"></i>
                         <input type="text" 
                                id="tags-input" 
-                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
                                placeholder="Type any tag and press Enter or comma..."
                                onkeydown="handleTagInput(event)">
                         <button type="button" onclick="addTagFromInput()" class="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1 bg-primary text-white text-xs rounded hover:bg-primary-dark">
@@ -64,39 +65,39 @@ ob_start();
                     
                     <input type="hidden" id="tags" name="tags" value="">
                     
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         <i class="fas fa-info-circle mr-1"></i>
                         All imported domains will be tagged with these tags.
                     </p>
                     
                     <div class="mt-2">
-                        <p class="text-xs text-gray-600 mb-1.5">Available Tags:</p>
+                        <p class="text-xs text-gray-600 dark:text-slate-400 mb-1.5">Available Tags:</p>
                         <div class="flex flex-wrap gap-1.5">
-                            <?php foreach ($availableTags as $tag): ?>
-                                <button type="button" onclick="addTag('<?= htmlspecialchars($tag['name']) ?>')" 
-                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?> hover:opacity-80 transition-colors">
+                            {% for tag in availableTags %}
+                                <button type="button" onclick="addTag('{{ tag.name }}')" 
+                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border {{ tag.color }} hover:opacity-80 transition-colors">
                                     <i class="fas fa-plus mr-1" style="font-size: 8px;"></i>
-                                    <?= htmlspecialchars($tag['name']) ?>
+                                    {{ tag.name }}
                                 </button>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
 
                 <!-- Notification Group -->
                 <div>
-                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Notification Group (Optional)
                     </label>
                     <select id="notification_group_id" 
                             name="notification_group_id" 
-                            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                            class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
                         <option value="">-- No Group (No notifications) --</option>
-                        <?php foreach ($groups as $group): ?>
-                            <option value="<?= $group['id'] ?>"><?= htmlspecialchars($group['name']) ?></option>
-                        <?php endforeach; ?>
+                        {% for group in groups %}
+                            <option value="{{ group.id }}">{{ group.name }}</option>
+                        {% endfor %}
                     </select>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Assign all domains to this notification group
                     </p>
                 </div>
@@ -109,7 +110,7 @@ ob_start();
                         Add All Domains
                     </button>
                     <a href="/domains" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -120,30 +121,30 @@ ob_start();
         <!-- Tab 2: Import from File -->
         <div id="panel-import" class="hidden p-6">
             <form method="POST" action="/domains/import" enctype="multipart/form-data" class="space-y-5" id="domainImportForm">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
                 
                 <!-- Drag & Drop Zone -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Select File *
                     </label>
-                    <div id="domainDropzone" class="relative border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50">
+                    <div id="domainDropzone" class="relative border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-8 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50 dark:hover:bg-slate-700">
                         <input type="file" name="import_file" accept=".csv,.json" required id="domainFileInput"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                         <div id="domainDropzoneContent">
-                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
-                            <p class="text-sm text-gray-600 font-medium">Drag & drop your file here</p>
-                            <p class="text-xs text-gray-400 my-1.5">or</p>
+                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 dark:text-slate-500 mb-3"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 font-medium">Drag & drop your file here</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 my-1.5">or</p>
                             <span class="inline-flex items-center px-4 py-2 bg-primary text-white text-xs rounded-lg font-medium">
                                 <i class="fas fa-folder-open mr-1.5"></i>Browse Files
                             </span>
-                            <p class="mt-3 text-xs text-gray-400">CSV, JSON &middot; Max <?= \App\Helpers\ViewHelper::getMaxUploadSize() ?></p>
+                            <p class="mt-3 text-xs text-gray-400 dark:text-slate-500">CSV, JSON &middot; Max {{ max_upload_size() }}</p>
                         </div>
                         <div id="domainDropzoneFile" class="hidden">
                             <i class="fas fa-file-alt text-2xl text-primary mb-1.5"></i>
-                            <p class="text-sm font-medium text-gray-700" id="domainFileName"></p>
-                            <p class="text-xs text-gray-400" id="domainFileSize"></p>
-                            <button type="button" id="domainFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
+                            <p class="text-sm font-medium text-gray-700 dark:text-slate-300" id="domainFileName"></p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500" id="domainFileSize"></p>
+                            <button type="button" id="domainFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-medium">
                                 <i class="fas fa-trash-alt mr-1"></i>Remove
                             </button>
                         </div>
@@ -151,31 +152,31 @@ ob_start();
                 </div>
 
                 <!-- Expected Format Info -->
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                    <p class="text-sm font-medium text-gray-900 mb-2"><i class="fas fa-info-circle text-blue-500 mr-1.5"></i>Expected File Format</p>
-                    <p class="text-xs text-gray-600 mb-2">CSV columns or JSON fields:</p>
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white mb-2"><i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1.5"></i>Expected File Format</p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 mb-2">CSV columns or JSON fields:</p>
                     <div class="flex flex-wrap gap-1.5">
-                        <code class="px-2 py-0.5 bg-white rounded text-xs border border-blue-200 font-semibold text-blue-800">domain_name *</code>
-                        <code class="px-2 py-0.5 bg-white rounded text-xs border border-gray-200 text-gray-600">tags</code>
-                        <code class="px-2 py-0.5 bg-white rounded text-xs border border-gray-200 text-gray-600">notes</code>
-                        <code class="px-2 py-0.5 bg-white rounded text-xs border border-gray-200 text-gray-600">notification_group</code>
+                        <code class="px-2 py-0.5 bg-white dark:bg-slate-800 rounded text-xs border border-blue-200 dark:border-blue-800 font-semibold text-blue-800 dark:text-blue-400">domain_name *</code>
+                        <code class="px-2 py-0.5 bg-white dark:bg-slate-800 rounded text-xs border border-gray-200 dark:border-slate-700 text-gray-600 dark:text-slate-400">tags</code>
+                        <code class="px-2 py-0.5 bg-white dark:bg-slate-800 rounded text-xs border border-gray-200 dark:border-slate-700 text-gray-600 dark:text-slate-400">notes</code>
+                        <code class="px-2 py-0.5 bg-white dark:bg-slate-800 rounded text-xs border border-gray-200 dark:border-slate-700 text-gray-600 dark:text-slate-400">notification_group</code>
                     </div>
-                    <p class="text-xs text-gray-500 mt-2">Only <code class="bg-white px-1 rounded">domain_name</code> is required. Tags should be comma-separated. Notification group is matched by name.</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-2">Only <code class="bg-white dark:bg-slate-800 px-1 rounded">domain_name</code> is required. Tags should be comma-separated. Notification group is matched by name.</p>
                 </div>
 
                 <!-- Fallback Notification Group -->
                 <div>
-                    <label for="import_notification_group_id" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="import_notification_group_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Default Notification Group
-                        <span class="text-gray-400 font-normal">(for domains without a group in the file)</span>
+                        <span class="text-gray-400 dark:text-slate-500 font-normal">(for domains without a group in the file)</span>
                     </label>
                     <select id="import_notification_group_id" 
                             name="notification_group_id" 
-                            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                            class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
                         <option value="">-- No Group (No notifications) --</option>
-                        <?php foreach ($groups as $group): ?>
-                            <option value="<?= $group['id'] ?>"><?= htmlspecialchars($group['name']) ?></option>
-                        <?php endforeach; ?>
+                        {% for group in groups %}
+                            <option value="{{ group.id }}">{{ group.name }}</option>
+                        {% endfor %}
                     </select>
                 </div>
 
@@ -187,7 +188,7 @@ ob_start();
                         Import Domains
                     </button>
                     <a href="/domains" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -198,7 +199,7 @@ ob_start();
 
     <!-- Info Cards -->
     <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
             <div class="flex items-start">
                 <div class="flex-shrink-0">
                     <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
@@ -206,8 +207,8 @@ ob_start();
                     </div>
                 </div>
                 <div class="ml-3">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-1">How It Works</h3>
-                    <p class="text-xs text-gray-600 leading-relaxed">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">How It Works</h3>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 leading-relaxed">
                         Paste domain names or upload a CSV/JSON file. The system will fetch WHOIS information 
                         for each domain automatically. This may take a few moments depending on how many domains you're adding.
                     </p>
@@ -215,7 +216,7 @@ ob_start();
             </div>
         </div>
 
-        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
+        <div class="bg-orange-50 dark:bg-orange-500/10 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
             <div class="flex items-start">
                 <div class="flex-shrink-0">
                     <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center">
@@ -223,8 +224,8 @@ ob_start();
                     </div>
                 </div>
                 <div class="ml-3">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-1">Important Notes</h3>
-                    <ul class="text-xs text-gray-600 space-y-1">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Important Notes</h3>
+                    <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                         <li class="flex items-start">
                             <i class="fas fa-circle text-orange-500 mt-1 mr-2" style="font-size: 6px;"></i>
                             <span>Duplicate domains will be skipped</span>
@@ -244,8 +245,10 @@ ob_start();
     </div>
 </div>
 
+{% endblock %}
+
+{% block scripts %}
 <script>
-// Tab switching
 function switchTab(tab) {
     document.getElementById('panel-paste').classList.toggle('hidden', tab !== 'paste');
     document.getElementById('panel-import').classList.toggle('hidden', tab !== 'import');
@@ -254,18 +257,17 @@ function switchTab(tab) {
     const importTab = document.getElementById('tab-import');
     
     [pasteTab, importTab].forEach(btn => {
-        btn.classList.remove('border-primary', 'text-primary', 'bg-white', 'border-transparent', 'text-gray-500');
+        btn.classList.remove('border-primary', 'text-primary', 'bg-white', 'dark:bg-slate-800', 'border-transparent', 'text-gray-500', 'dark:text-slate-400');
     });
     const active = tab === 'paste' ? pasteTab : importTab;
     const inactive = tab === 'paste' ? importTab : pasteTab;
-    active.classList.add('border-primary', 'text-primary', 'bg-white');
-    inactive.classList.add('border-transparent', 'text-gray-500');
+    active.classList.add('border-primary', 'text-primary', 'bg-white', 'dark:bg-slate-800');
+    inactive.classList.add('border-transparent', 'text-gray-500', 'dark:text-slate-400');
 }
 
 let tags = [];
 
-// Available tags with their colors from the database
-const availableTags = <?= json_encode($availableTags) ?>;
+const availableTags = {{ availableTags|json_encode|raw }};
 const tagColors = {};
 availableTags.forEach(tag => {
     tagColors[tag.name] = tag.color;
@@ -274,12 +276,10 @@ availableTags.forEach(tag => {
 function addTag(tagName) {
     tagName = tagName.trim().toLowerCase();
     
-    // Validate tag (alphanumeric and hyphens only)
     if (!/^[a-z0-9-]+$/.test(tagName)) {
         return;
     }
     
-    // Check if tag already exists
     if (tags.includes(tagName)) {
         return;
     }
@@ -288,7 +288,6 @@ function addTag(tagName) {
     updateTagsDisplay();
     updateHiddenInput();
     
-    // Clear input
     document.getElementById('tags-input').value = '';
 }
 
@@ -303,7 +302,7 @@ function updateTagsDisplay() {
     display.innerHTML = '';
     
     if (tags.length === 0) {
-        display.innerHTML = '<span class="text-xs text-gray-400 italic">No tags added yet</span>';
+        display.innerHTML = '<span class="text-xs text-gray-400 dark:text-slate-500 italic">No tags added yet</span>';
         return;
     }
     
@@ -338,17 +337,14 @@ function addTagFromInput() {
     const value = input.value.trim();
     
     if (value) {
-        // Handle multiple tags separated by commas
         const newTags = value.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
         newTags.forEach(tag => addTag(tag));
         input.value = '';
     }
 }
 
-// Initialize display
 updateTagsDisplay();
 
-// --- Domain Import drag-and-drop & loading ---
 (function() {
     const dropzone = document.getElementById('domainDropzone');
     const fileInput = document.getElementById('domainFileInput');
@@ -371,7 +367,7 @@ updateTagsDisplay();
         fileSize.textContent = formatSize(file.size);
         content.classList.add('hidden');
         fileInfo.classList.remove('hidden');
-        dropzone.classList.remove('border-gray-300');
+        dropzone.classList.remove('border-gray-300', 'dark:border-slate-600');
         dropzone.classList.add('border-primary', 'bg-primary/5');
     }
 
@@ -379,7 +375,7 @@ updateTagsDisplay();
         fileInput.value = '';
         content.classList.remove('hidden');
         fileInfo.classList.add('hidden');
-        dropzone.classList.add('border-gray-300');
+        dropzone.classList.add('border-gray-300', 'dark:border-slate-600');
         dropzone.classList.remove('border-primary', 'bg-primary/5');
     }
 
@@ -397,7 +393,7 @@ updateTagsDisplay();
         dropzone.addEventListener(evt, function(e) {
             e.preventDefault();
             dropzone.classList.add('border-primary', 'bg-primary/5');
-            dropzone.classList.remove('border-gray-300');
+            dropzone.classList.remove('border-gray-300', 'dark:border-slate-600');
         });
     });
 
@@ -406,7 +402,7 @@ updateTagsDisplay();
             e.preventDefault();
             if (!fileInput.files.length) {
                 dropzone.classList.remove('border-primary', 'bg-primary/5');
-                dropzone.classList.add('border-gray-300');
+                dropzone.classList.add('border-gray-300', 'dark:border-slate-600');
             }
         });
     });
@@ -426,9 +422,4 @@ updateTagsDisplay();
     });
 })();
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
-
+{% endblock %}
diff --git a/app/Views/domains/create.php b/app/Views/domains/create.twig
similarity index 71%
rename from app/Views/domains/create.php
rename to app/Views/domains/create.twig
index e754745..cc2f80f 100644
--- a/app/Views/domains/create.php
+++ b/app/Views/domains/create.twig
@@ -1,57 +1,58 @@
-<?php
-$title = 'Add New Domain';
-$pageTitle = 'Add New Domain';
-$pageDescription = 'Start monitoring a new domain';
-$pageIcon = 'fas fa-plus-circle';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Add New Domain' %}
+{% set pageTitle = 'Add New Domain' %}
+{% set pageDescription = 'Start monitoring a new domain' %}
+{% set pageIcon = 'fas fa-plus-circle' %}
+
+{% block content %}
 
 <!-- Main Form -->
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-globe text-gray-400 mr-2 text-sm"></i>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-globe text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 Domain Information
             </h2>
         </div>
         
         <div class="p-6">
             <form method="POST" action="/domains/store" class="space-y-5">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
                 <!-- Domain Name -->
                 <div>
-                    <label for="domain_name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="domain_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Domain Name *
                     </label>
                     <input type="text" 
                            id="domain_name" 
                            name="domain_name" 
-                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                           class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
                            placeholder="example.com"
                            required
                            autofocus>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Enter the domain name without http:// or https://
                     </p>
                 </div>
 
                 <!-- Tags -->
                 <div>
-                    <label for="tags-input" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="tags-input" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Tags
-                        <span class="text-gray-400 font-normal">(Optional)</span>
+                        <span class="text-gray-400 dark:text-slate-500 font-normal">(Optional)</span>
                     </label>
                     
                     <!-- Tag Display Area -->
-                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50"></div>
+                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 dark:border-slate-600 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50 dark:bg-slate-900"></div>
                     
                     <!-- Tag Input -->
                     <div class="relative">
-                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
+                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-sm"></i>
                         <input type="text" 
                                id="tags-input" 
-                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
                                placeholder="Type any tag and press Enter or comma..."
                                onkeydown="handleTagInput(event)">
                         <button type="button" onclick="addTagFromInput()" class="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1 bg-primary text-white text-xs rounded hover:bg-primary-dark">
@@ -62,40 +63,40 @@ ob_start();
                     <!-- Hidden input to store tags for form submission -->
                     <input type="hidden" id="tags" name="tags" value="">
                     
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         <i class="fas fa-info-circle mr-1"></i>
-                        Type any custom tag (letters, numbers, hyphens). Press <kbd class="px-1 py-0.5 bg-gray-200 rounded text-xs">Enter</kbd> or <kbd class="px-1 py-0.5 bg-gray-200 rounded text-xs">,</kbd> to add.
+                        Type any custom tag (letters, numbers, hyphens). Press <kbd class="px-1 py-0.5 bg-gray-200 dark:bg-slate-600 rounded text-xs">Enter</kbd> or <kbd class="px-1 py-0.5 bg-gray-200 dark:bg-slate-600 rounded text-xs">,</kbd> to add.
                     </p>
                     
                     <!-- Available Tags -->
                     <div class="mt-2">
-                        <p class="text-xs text-gray-600 mb-1.5">💡 Available Tags:</p>
+                        <p class="text-xs text-gray-600 dark:text-slate-400 mb-1.5">💡 Available Tags:</p>
                         <div class="flex flex-wrap gap-1.5">
-                            <?php foreach ($availableTags as $tag): ?>
-                                <button type="button" onclick="addTag('<?= htmlspecialchars($tag['name']) ?>')" 
-                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?> hover:opacity-80 transition-colors">
+                            {% for tag in availableTags %}
+                                <button type="button" onclick="addTag('{{ tag.name }}')" 
+                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border {{ tag.color }} hover:opacity-80 transition-colors">
                                     <i class="fas fa-plus mr-1" style="font-size: 8px;"></i>
-                                    <?= htmlspecialchars($tag['name']) ?>
+                                    {{ tag.name }}
                                 </button>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
 
                 <!-- Notification Group -->
                 <div>
-                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Notification Group
                     </label>
                     <select id="notification_group_id" 
                             name="notification_group_id" 
-                            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                            class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
                         <option value="">-- No Group (No notifications) --</option>
-                        <?php foreach ($groups as $group): ?>
-                            <option value="<?= $group['id'] ?>"><?= htmlspecialchars($group['name']) ?></option>
-                        <?php endforeach; ?>
+                        {% for group in groups %}
+                            <option value="{{ group.id }}">{{ group.name }}</option>
+                        {% endfor %}
                     </select>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Optional: Assign to a notification group to receive expiry alerts
                     </p>
                 </div>
@@ -108,7 +109,7 @@ ob_start();
                         Add Domain
                     </button>
                     <a href="/domains" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -120,7 +121,7 @@ ob_start();
     <!-- Info Cards -->
     <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
         <!-- How it works -->
-        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
             <div class="flex items-start">
                 <div class="flex-shrink-0">
                     <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
@@ -128,8 +129,8 @@ ob_start();
                     </div>
                 </div>
                 <div class="ml-3">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-1">How It Works</h3>
-                    <p class="text-xs text-gray-600 leading-relaxed">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">How It Works</h3>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 leading-relaxed">
                         When you add a domain, we automatically fetch its WHOIS information including 
                         expiration date, registrar, nameservers, and other important details. This may take a few seconds.
                     </p>
@@ -138,7 +139,7 @@ ob_start();
         </div>
 
         <!-- What we track -->
-        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-800 rounded-lg p-4">
             <div class="flex items-start">
                 <div class="flex-shrink-0">
                     <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
@@ -146,8 +147,8 @@ ob_start();
                     </div>
                 </div>
                 <div class="ml-3">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-1">What We Track</h3>
-                    <ul class="text-xs text-gray-600 space-y-1">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">What We Track</h3>
+                    <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                         <li class="flex items-center">
                             <i class="fas fa-circle text-green-500" style="font-size: 6px;"></i>
                             <span class="ml-2">Domain expiration date</span>
@@ -171,11 +172,13 @@ ob_start();
     </div>
 </div>
 
+{% endblock %}
+
+{% block scripts %}
 <script>
 let tags = [];
 
-// Available tags with their colors from the database
-const availableTags = <?= json_encode($availableTags) ?>;
+const availableTags = {{ availableTags|json_encode|raw }};
 const tagColors = {};
 availableTags.forEach(tag => {
     tagColors[tag.name] = tag.color;
@@ -184,12 +187,10 @@ availableTags.forEach(tag => {
 function addTag(tagName) {
     tagName = tagName.trim().toLowerCase();
     
-    // Validate tag (alphanumeric and hyphens only)
     if (!/^[a-z0-9-]+$/.test(tagName)) {
         return;
     }
     
-    // Check if tag already exists
     if (tags.includes(tagName)) {
         return;
     }
@@ -198,7 +199,6 @@ function addTag(tagName) {
     updateTagsDisplay();
     updateHiddenInput();
     
-    // Clear input
     document.getElementById('tags-input').value = '';
 }
 
@@ -213,7 +213,7 @@ function updateTagsDisplay() {
     display.innerHTML = '';
     
     if (tags.length === 0) {
-        display.innerHTML = '<span class="text-xs text-gray-400 italic">No tags added yet</span>';
+        display.innerHTML = '<span class="text-xs text-gray-400 dark:text-slate-500 italic">No tags added yet</span>';
         return;
     }
     
@@ -248,18 +248,12 @@ function addTagFromInput() {
     const value = input.value.trim();
     
     if (value) {
-        // Handle multiple tags separated by commas
         const newTags = value.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
         newTags.forEach(tag => addTag(tag));
         input.value = '';
     }
 }
 
-// Initialize display
 updateTagsDisplay();
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/domains/edit.php b/app/Views/domains/edit.twig
similarity index 56%
rename from app/Views/domains/edit.php
rename to app/Views/domains/edit.twig
index a5cd4d5..0ca09e1 100644
--- a/app/Views/domains/edit.php
+++ b/app/Views/domains/edit.twig
@@ -1,60 +1,61 @@
-<?php
-$title = 'Edit Domain';
-$pageTitle = 'Edit Domain';
-$pageDescription = htmlspecialchars($domain['domain_name']);
-$pageIcon = 'fas fa-edit';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Edit Domain' %}
+{% set pageTitle = 'Edit Domain' %}
+{% set pageDescription = domain.domain_name %}
+{% set pageIcon = 'fas fa-edit' %}
+
+{% block content %}
 
 <!-- Main Form -->
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-cog text-gray-400 mr-2 text-sm"></i>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-cog text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 Domain Settings
             </h2>
         </div>
         
         <div class="p-6">
-            <form method="POST" action="/domains/<?= $domain['id'] ?>/update" class="space-y-5">
-                <?= csrf_field() ?>
+            <form method="POST" action="/domains/{{ domain.id }}/update" class="space-y-5">
+                {{ csrf_field() }}
 
                 <!-- Domain Name (Read-only) -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Domain Name
                     </label>
                     <div class="relative">
                         <input type="text" 
-                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-600 cursor-not-allowed text-sm" 
-                               value="<?= htmlspecialchars($domain['domain_name']) ?>" 
+                               class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-900 text-gray-600 dark:text-slate-400 cursor-not-allowed text-sm" 
+                               value="{{ domain.domain_name }}" 
                                disabled>
                         <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
-                            <i class="fas fa-lock text-gray-400 text-xs"></i>
+                            <i class="fas fa-lock text-gray-400 dark:text-slate-500 text-xs"></i>
                         </div>
                     </div>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Domain name cannot be changed after creation
                     </p>
                 </div>
 
                 <!-- Tags -->
                 <div>
-                    <label for="tags-input" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="tags-input" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Tags
-                        <span class="text-gray-400 font-normal">(Optional)</span>
+                        <span class="text-gray-400 dark:text-slate-500 font-normal">(Optional)</span>
                     </label>
                     
                     <!-- Tag Display Area -->
-                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50"></div>
+                    <div id="tags-display" class="min-h-[40px] p-2 border border-gray-300 dark:border-slate-600 rounded-lg mb-2 flex flex-wrap gap-1.5 bg-gray-50 dark:bg-slate-900"></div>
                     
                     <!-- Tag Input -->
                     <div class="relative">
-                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
+                        <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-sm"></i>
                         <input type="text" 
                                id="tags-input" 
-                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                               class="w-full pl-10 pr-20 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
                                placeholder="Type any tag and press Enter or comma..."
                                onkeydown="handleTagInput(event)">
                         <button type="button" onclick="addTagFromInput()" class="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1 bg-primary text-white text-xs rounded hover:bg-primary-dark">
@@ -63,91 +64,91 @@ ob_start();
                     </div>
                     
                     <!-- Hidden input to store tags for form submission -->
-                    <input type="hidden" id="tags" name="tags" value="<?= htmlspecialchars($domain['tags'] ?? '') ?>">
+                    <input type="hidden" id="tags" name="tags" value="{{ domain.tags|default('') }}">
                     
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         <i class="fas fa-info-circle mr-1"></i>
-                        Type any custom tag (letters, numbers, hyphens). Press <kbd class="px-1 py-0.5 bg-gray-200 rounded text-xs">Enter</kbd> or <kbd class="px-1 py-0.5 bg-gray-200 rounded text-xs">,</kbd> to add.
+                        Type any custom tag (letters, numbers, hyphens). Press <kbd class="px-1 py-0.5 bg-gray-200 dark:bg-slate-600 rounded text-xs">Enter</kbd> or <kbd class="px-1 py-0.5 bg-gray-200 dark:bg-slate-600 rounded text-xs">,</kbd> to add.
                     </p>
                     
                     <!-- Available Tags -->
                     <div class="mt-2">
-                        <p class="text-xs text-gray-600 mb-1.5">💡 Available Tags:</p>
+                        <p class="text-xs text-gray-600 dark:text-slate-400 mb-1.5">💡 Available Tags:</p>
                         <div class="flex flex-wrap gap-1.5">
-                            <?php foreach ($availableTags as $tag): ?>
-                                <button type="button" onclick="addTag('<?= htmlspecialchars($tag['name']) ?>')" 
-                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?> hover:opacity-80 transition-colors">
+                            {% for tag in availableTags %}
+                                <button type="button" onclick="addTag('{{ tag.name }}')" 
+                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border {{ tag.color }} hover:opacity-80 transition-colors">
                                     <i class="fas fa-plus mr-1" style="font-size: 8px;"></i>
-                                    <?= htmlspecialchars($tag['name']) ?>
+                                    {{ tag.name }}
                                 </button>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
 
                 <!-- Notification Group -->
                 <div>
-                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="notification_group_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Notification Group
                     </label>
                     <select id="notification_group_id" 
                             name="notification_group_id" 
-                            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                            class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
                         <option value="">-- No Group (No notifications) --</option>
-                        <?php foreach ($groups as $group): ?>
-                            <option value="<?= $group['id'] ?>" 
-                                    <?= $domain['notification_group_id'] == $group['id'] ? 'selected' : '' ?>>
-                                <?= htmlspecialchars($group['name']) ?>
+                        {% for group in groups %}
+                            <option value="{{ group.id }}" 
+                                    {{ domain.notification_group_id == group.id ? 'selected' : '' }}>
+                                {{ group.name }}
                             </option>
-                        <?php endforeach; ?>
+                        {% endfor %}
                     </select>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Change the notification group or remove it to stop receiving alerts
                     </p>
                 </div>
 
                 <!-- Manual Expiration Date -->
                 <div>
-                    <label for="manual_expiration_date" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="manual_expiration_date" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Manual Expiration Date
-                        <span class="text-gray-400 font-normal">(Optional)</span>
+                        <span class="text-gray-400 dark:text-slate-500 font-normal">(Optional)</span>
                     </label>
                     <div class="relative">
-                        <i class="fas fa-calendar-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
+                        <i class="fas fa-calendar-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-sm"></i>
                         <input type="date" 
                                id="manual_expiration_date" 
                                name="manual_expiration_date" 
-                               value="<?= $domain['expiration_date'] ? date('Y-m-d', strtotime($domain['expiration_date'])) : '' ?>"
-                               class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                               value="{{ domain.expiration_date ? domain.expiration_date|date('Y-m-d') : '' }}"
+                               class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
                     </div>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         <i class="fas fa-info-circle mr-1"></i>
                         Set a manual expiration date if WHOIS/RDAP doesn't provide one (e.g., for .nl domains). 
                         This will be used for expiration notifications and status calculations.
                     </p>
-                    <?php if ($domain['expiration_date']): ?>
-                        <p class="mt-1 text-xs text-green-600">
+                    {% if domain.expiration_date %}
+                        <p class="mt-1 text-xs text-green-600 dark:text-green-400">
                             <i class="fas fa-check-circle mr-1"></i>
-                            Current expiration date: <?= $domain['expiration_date'] ? date('M j, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?>
+                            Current expiration date: {{ domain.expiration_date|date('M j, Y') }}
                         </p>
-                    <?php else: ?>
-                        <p class="mt-1 text-xs text-amber-600">
+                    {% else %}
+                        <p class="mt-1 text-xs text-amber-600 dark:text-amber-400">
                             <i class="fas fa-exclamation-triangle mr-1"></i>
                             No expiration date available from WHOIS/RDAP. Consider setting a manual date.
                         </p>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
 
                 <!-- Active Monitoring -->
-                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
                     <label class="flex items-center cursor-pointer">
                         <input type="checkbox" 
                                name="is_active" 
-                               <?= $domain['is_active'] ? 'checked' : '' ?> 
-                               class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary cursor-pointer">
+                               {{ domain.is_active ? 'checked' : '' }} 
+                               class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 rounded focus:ring-primary cursor-pointer">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-gray-900">Enable Active Monitoring</span>
-                            <p class="text-xs text-gray-600 mt-0.5">When enabled, this domain will be checked regularly and notifications will be sent</p>
+                            <span class="text-sm font-medium text-gray-900 dark:text-white">Enable Active Monitoring</span>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">When enabled, this domain will be checked regularly and notifications will be sent</p>
                         </div>
                     </label>
                 </div>
@@ -159,8 +160,8 @@ ob_start();
                         <i class="fas fa-save mr-2"></i>
                         Update Domain
                     </button>
-                    <a href="<?= htmlspecialchars($referrer ?? '/domains/' . $domain['id']) ?>" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                    <a href="{{ referrer|default('/domains/' ~ domain.id) }}" 
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -171,37 +172,38 @@ ob_start();
 
     <!-- Quick Actions -->
     <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
-        <a href="/domains/<?= $domain['id'] ?>" 
-           class="flex items-center justify-center p-3 bg-white border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors group">
-            <i class="fas fa-eye text-blue-600 mr-2 text-sm"></i>
-            <span class="text-sm font-medium text-gray-700">View Details</span>
+        <a href="/domains/{{ domain.id }}" 
+           class="flex items-center justify-center p-3 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-blue-300 dark:hover:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors group">
+            <i class="fas fa-eye text-blue-600 dark:text-blue-400 mr-2 text-sm"></i>
+            <span class="text-sm font-medium text-gray-700 dark:text-slate-300">View Details</span>
         </a>
-        <form method="POST" action="/domains/<?= $domain['id'] ?>/refresh" class="m-0">
-            <?= csrf_field() ?>
+        <form method="POST" action="/domains/{{ domain.id }}/refresh" class="m-0">
+            {{ csrf_field() }}
             <button type="submit" 
-                    class="w-full flex items-center justify-center p-3 bg-white border border-gray-200 rounded-lg hover:border-green-300 hover:bg-green-50 transition-colors group">
-                <i class="fas fa-sync-alt text-green-600 mr-2 text-sm"></i>
-                <span class="text-sm font-medium text-gray-700">Refresh WHOIS</span>
+                    class="w-full flex items-center justify-center p-3 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-green-300 dark:hover:border-green-700 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors group">
+                <i class="fas fa-sync-alt text-green-600 dark:text-green-400 mr-2 text-sm"></i>
+                <span class="text-sm font-medium text-gray-700 dark:text-slate-300">Refresh WHOIS</span>
             </button>
         </form>
-        <form method="POST" action="/domains/<?= $domain['id'] ?>/delete" onsubmit="return confirm('Delete this domain permanently?')" class="m-0">
-            <?= csrf_field() ?>
+        <form method="POST" action="/domains/{{ domain.id }}/delete" onsubmit="return confirm('Delete this domain permanently?')" class="m-0">
+            {{ csrf_field() }}
             <button type="submit" 
-                    class="w-full flex items-center justify-center p-3 bg-white border border-gray-200 rounded-lg hover:border-red-300 hover:bg-red-50 transition-colors group">
-                <i class="fas fa-trash text-red-600 mr-2 text-sm"></i>
-                <span class="text-sm font-medium text-gray-700">Delete Domain</span>
+                    class="w-full flex items-center justify-center p-3 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-red-300 dark:hover:border-red-700 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors group">
+                <i class="fas fa-trash text-red-600 dark:text-red-400 mr-2 text-sm"></i>
+                <span class="text-sm font-medium text-gray-700 dark:text-slate-300">Delete Domain</span>
             </button>
         </form>
     </div>
 </div>
 
+{% endblock %}
+
+{% block scripts %}
 <script>
-// Initialize tags from existing domain data
-const existingTags = '<?= htmlspecialchars($domain['tags'] ?? '') ?>';
+const existingTags = {{ domain.tags|default('')|json_encode|raw }};
 let tags = existingTags ? existingTags.split(',').map(t => t.trim().toLowerCase()).filter(t => t) : [];
 
-// Available tags with their colors from the database
-const availableTags = <?= json_encode($availableTags) ?>;
+const availableTags = {{ availableTags|json_encode|raw }};
 const tagColors = {};
 availableTags.forEach(tag => {
     tagColors[tag.name] = tag.color;
@@ -210,12 +212,10 @@ availableTags.forEach(tag => {
 function addTag(tagName) {
     tagName = tagName.trim().toLowerCase();
     
-    // Validate tag (alphanumeric and hyphens only)
     if (!/^[a-z0-9-]+$/.test(tagName)) {
         return;
     }
     
-    // Check if tag already exists
     if (tags.includes(tagName)) {
         return;
     }
@@ -224,7 +224,6 @@ function addTag(tagName) {
     updateTagsDisplay();
     updateHiddenInput();
     
-    // Clear input
     document.getElementById('tags-input').value = '';
 }
 
@@ -239,7 +238,7 @@ function updateTagsDisplay() {
     display.innerHTML = '';
     
     if (tags.length === 0) {
-        display.innerHTML = '<span class="text-xs text-gray-400 italic">No tags added yet</span>';
+        display.innerHTML = '<span class="text-xs text-gray-400 dark:text-slate-500 italic">No tags added yet</span>';
         return;
     }
     
@@ -274,18 +273,12 @@ function addTagFromInput() {
     const value = input.value.trim();
     
     if (value) {
-        // Handle multiple tags separated by commas
         const newTags = value.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
         newTags.forEach(tag => addTag(tag));
         input.value = '';
     }
 }
 
-// Initialize display
 updateTagsDisplay();
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/domains/index.php b/app/Views/domains/index.twig
similarity index 56%
rename from app/Views/domains/index.php
rename to app/Views/domains/index.twig
index 5582ac1..2099e66 100644
--- a/app/Views/domains/index.php
+++ b/app/Views/domains/index.twig
@@ -1,47 +1,26 @@
-<?php
-$title = 'Domains';
-$pageTitle = 'Domain Management';
-$pageDescription = 'Monitor and manage your domain portfolio';
-$pageIcon = 'fas fa-globe';
-ob_start();
+{% extends 'layout/base.twig' %}
 
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $_GET;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/domains?' . http_build_query($params);
-}
+{% set title = 'Domains' %}
+{% set pageTitle = 'Domain Management' %}
+{% set pageDescription = 'Monitor and manage your domain portfolio' %}
+{% set pageIcon = 'fas fa-globe' %}
 
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
-
-// Get current filters
-$currentFilters = $filters ?? ['search' => '', 'status' => '', 'group' => '', 'sort' => 'domain_name', 'order' => 'asc'];
-?>
-
-<!-- Action Buttons -->
+{% block content %}
+{# Action Buttons #}
 <div class="mb-4 flex gap-2 justify-end">
-    <!-- Export Dropdown -->
+    {# Export Dropdown #}
     <div class="relative" id="domainExportDropdownWrapper">
         <button onclick="document.getElementById('domainExportMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors font-medium">
             <i class="fas fa-download mr-2"></i>
             Export
             <i class="fas fa-chevron-down ml-2 text-xs"></i>
         </button>
-        <div id="domainExportMenu" class="hidden absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 z-30 overflow-hidden">
-            <a href="/domains/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+        <div id="domainExportMenu" class="hidden absolute right-0 mt-1 w-44 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-30 overflow-hidden">
+            <a href="/domains/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                 <i class="fas fa-file-csv text-green-600 mr-2.5"></i>
                 Export as CSV
             </a>
-            <a href="/domains/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100">
+            <a href="/domains/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors border-t border-gray-100 dark:border-slate-700">
                 <i class="fas fa-file-code text-blue-600 mr-2.5"></i>
                 Export as JSON
             </a>
@@ -57,61 +36,58 @@ $currentFilters = $filters ?? ['search' => '', 'status' => '', 'group' => '', 's
     </a>
 </div>
 
-<!-- Filters & Search -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+{# Filters & Search #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
     <form method="GET" action="/domains" id="filter-form">
         <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search</label>
                 <div class="relative">
-                    <input type="text" name="search" id="domainSearch" value="<?= htmlspecialchars($currentFilters['search']) ?>" placeholder="Search domains..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                    <input type="text" name="search" id="domainSearch" value="{{ filters.search }}" placeholder="Search domains..." class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
                 </div>
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="status" id="statusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="status" id="statusFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                     <option value="">All Statuses</option>
-                    <option value="active" <?= $currentFilters['status'] === 'active' ? 'selected' : '' ?>>Active</option>
-                    <option value="expiring_soon" <?= $currentFilters['status'] === 'expiring_soon' ? 'selected' : '' ?>>Expiring Soon</option>
-                    <option value="expired" <?= $currentFilters['status'] === 'expired' ? 'selected' : '' ?>>Expired</option>
-                    <option value="available" <?= $currentFilters['status'] === 'available' ? 'selected' : '' ?>>Available</option>
-                    <option value="redemption_period" <?= $currentFilters['status'] === 'redemption_period' ? 'selected' : '' ?>>Redemption Period</option>
-                    <option value="pending_delete" <?= $currentFilters['status'] === 'pending_delete' ? 'selected' : '' ?>>Pending Delete</option>
-                    <option value="error" <?= $currentFilters['status'] === 'error' ? 'selected' : '' ?>>Error</option>
-                    <option value="inactive" <?= $currentFilters['status'] === 'inactive' ? 'selected' : '' ?>>Inactive</option>
+                    <option value="active" {{ filters.status == 'active' ? 'selected' : '' }}>Active</option>
+                    <option value="expiring_soon" {{ filters.status == 'expiring_soon' ? 'selected' : '' }}>Expiring Soon</option>
+                    <option value="expired" {{ filters.status == 'expired' ? 'selected' : '' }}>Expired</option>
+                    <option value="available" {{ filters.status == 'available' ? 'selected' : '' }}>Available</option>
+                    <option value="redemption_period" {{ filters.status == 'redemption_period' ? 'selected' : '' }}>Redemption Period</option>
+                    <option value="pending_delete" {{ filters.status == 'pending_delete' ? 'selected' : '' }}>Pending Delete</option>
+                    <option value="error" {{ filters.status == 'error' ? 'selected' : '' }}>Error</option>
+                    <option value="inactive" {{ filters.status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                 </select>
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Tags</label>
-                <select name="tag" id="tagFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Tags</label>
+                <select name="tag" id="tagFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                     <option value="">All Tags</option>
-                    <?php 
-                    $tagIcons = [
-                        'production' => '🟢',
-                        'staging' => '🟡',
-                        'development' => '🔵',
-                        'client' => '🟣',
-                        'personal' => '🟠',
-                        'archived' => '⚪'
-                    ];
-                    foreach ($allTags as $tagOption): 
-                        $icon = $tagIcons[$tagOption] ?? '🏷️';
-                        $selected = ($currentFilters['tag'] ?? '') === $tagOption ? 'selected' : '';
-                    ?>
-                        <option value="<?= htmlspecialchars($tagOption) ?>" <?= $selected ?>>
-                            <?= $icon ?> <?= htmlspecialchars(ucfirst($tagOption)) ?>
+                    {% set tagIcons = {
+                        'production': '🟢',
+                        'staging': '🟡',
+                        'development': '🔵',
+                        'client': '🟣',
+                        'personal': '🟠',
+                        'archived': '⚪'
+                    } %}
+                    {% for tagOption in allTags %}
+                        {% set icon = tagIcons[tagOption]|default('🏷️') %}
+                        <option value="{{ tagOption }}" {{ filters.tag|default('') == tagOption ? 'selected' : '' }}>
+                            {{ icon }} {{ tagOption|capitalize }}
                         </option>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </select>
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Group</label>
-                <select name="group" id="groupFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Group</label>
+                <select name="group" id="groupFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                     <option value="">All Groups</option>
-                    <?php foreach ($groups as $group): ?>
-                        <option value="<?= $group['id'] ?>" <?= $currentFilters['group'] == $group['id'] ? 'selected' : '' ?>><?= htmlspecialchars($group['name']) ?></option>
-                    <?php endforeach; ?>
+                    {% for group in groups %}
+                        <option value="{{ group.id }}" {{ filters.group == group.id ? 'selected' : '' }}>{{ group.name }}</option>
+                    {% endfor %}
                 </select>
             </div>
             <div class="flex items-end space-x-2">
@@ -119,107 +95,106 @@ $currentFilters = $filters ?? ['search' => '', 'status' => '', 'group' => '', 's
                     <i class="fas fa-filter mr-2"></i>
                     Apply
                 </button>
-                <a href="/domains" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
+                <a href="/domains" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
                     <i class="fas fa-times"></i>
                     Clear
                 </a>
             </div>
         </div>
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
+        <input type="hidden" name="sort" value="{{ filters.sort }}">
+        <input type="hidden" name="order" value="{{ filters.order }}">
     </form>
 </div>
 
-                <!-- Pagination Info & Per Page Selector -->
+{# Pagination Info & Per Page Selector #}
 <div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?></span> domain(s)
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from }}</span> to
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total }}</span> domain(s)
     </div>
-    
+
     <form method="GET" action="/domains" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="search" value="<?= htmlspecialchars($currentFilters['search']) ?>">
-        <input type="hidden" name="status" value="<?= htmlspecialchars($currentFilters['status']) ?>">
-        <input type="hidden" name="group" value="<?= htmlspecialchars($currentFilters['group']) ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= $pagination['per_page'] == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $pagination['per_page'] == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $pagination['per_page'] == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $pagination['per_page'] == 100 ? 'selected' : '' ?>>100</option>
+        <input type="hidden" name="search" value="{{ filters.search }}">
+        <input type="hidden" name="status" value="{{ filters.status }}">
+        <input type="hidden" name="group" value="{{ filters.group }}">
+        <input type="hidden" name="sort" value="{{ filters.sort }}">
+        <input type="hidden" name="order" value="{{ filters.order }}">
+
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+            <option value="10" {{ pagination.per_page == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ pagination.per_page == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ pagination.per_page == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ pagination.per_page == 100 ? 'selected' : '' }}>100</option>
         </select>
     </form>
 </div>
 
-<!-- Domains List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <!-- Bulk Actions Bar (shown when domains are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
+{# Domains List #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {# Bulk Actions Bar #}
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
             <div class="flex items-center gap-3 flex-wrap">
                 <div class="flex items-center gap-2">
                     <button type="button" onclick="bulkRefresh()" class="inline-flex items-center px-4 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                         <i class="fas fa-sync-alt mr-1"></i> Refresh Selected
                     </button>
-                    <?php if (\Core\Auth::isAdmin()): ?>
+                    {% if auth.isAdmin %}
                     <button type="button" onclick="bulkTransfer()" class="inline-flex items-center px-4 py-1.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
                         <i class="fas fa-exchange-alt mr-1"></i> Transfer Selected
                     </button>
-                    <?php endif; ?>
+                    {% endif %}
                     <div class="relative inline-block">
                         <button type="button" onclick="toggleAssignTagsDropdown()" class="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
                             <i class="fas fa-tags mr-1"></i> Manage Tags
                             <i class="fas fa-chevron-down ml-2 text-xs"></i>
                         </button>
-                        <div id="assign-tags-dropdown" class="hidden absolute left-0 mt-2 w-72 bg-white rounded-lg shadow-lg border border-gray-200 z-10">
+                        <div id="assign-tags-dropdown" class="hidden absolute left-0 mt-2 w-72 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-10">
                             <div class="p-3">
                                 <div class="flex items-center justify-between mb-3">
-                                    <label class="block text-xs font-medium text-gray-700">Tag Management</label>
-                                    <a href="/tags" class="text-xs text-blue-600 hover:text-blue-800">
+                                    <label class="block text-xs font-medium text-gray-700 dark:text-slate-300">Tag Management</label>
+                                    <a href="/tags" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                         <i class="fas fa-cog mr-1"></i>
                                         Manage Tags
                                     </a>
                                 </div>
                                 <div class="mb-4">
-                                    <label class="block text-xs font-medium text-gray-700 mb-2">Add Tags to Selected Domains</label>
+                                    <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-2">Add Tags to Selected Domains</label>
                                     <div class="flex flex-wrap gap-1.5 mb-3">
-                                        <?php foreach ($availableTags as $tag): ?>
-                                            <button type="button" onclick="bulkAssignExistingTag(<?= $tag['id'] ?>, '<?= htmlspecialchars($tag['name']) ?>')" 
-                                                    class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?> hover:opacity-80">
+                                        {% for tag in availableTags %}
+                                            <button type="button" onclick="bulkAssignExistingTag({{ tag.id }}, '{{ tag.name|e('js') }}')"
+                                                    class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border {{ tag.color }} hover:opacity-80">
                                                 <i class="fas fa-plus mr-1" style="font-size: 8px;"></i>
-                                                <?= htmlspecialchars($tag['name']) ?>
+                                                {{ tag.name }}
                                             </button>
-                                        <?php endforeach; ?>
+                                        {% endfor %}
                                     </div>
-                                    <div class="border-t border-gray-200 pt-2">
-                                        <button type="button" onclick="openTagSelector()" class="w-full px-3 py-1.5 bg-blue-100 text-blue-700 text-xs rounded hover:bg-blue-200 font-medium">
+                                    <div class="border-t border-gray-200 dark:border-slate-700 pt-2">
+                                        <button type="button" onclick="openTagSelector()" class="w-full px-3 py-1.5 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 text-xs rounded hover:bg-blue-200 dark:hover:bg-blue-500/30 font-medium">
                                             <i class="fas fa-plus mr-1"></i>
                                             Add Custom Tag
                                         </button>
                                     </div>
                                 </div>
-                                <div class="border-t border-gray-200 pt-3">
-                                    <label class="block text-xs font-medium text-gray-700 mb-2">Remove Tags from Selected Domains</label>
+                                <div class="border-t border-gray-200 dark:border-slate-700 pt-3">
+                                    <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-2">Remove Tags from Selected Domains</label>
                                     <div class="space-y-2">
-                                        <button type="button" onclick="bulkRemoveAllTags()" class="w-full px-3 py-1.5 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200 font-medium">
+                                        <button type="button" onclick="bulkRemoveAllTags()" class="w-full px-3 py-1.5 bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 text-xs rounded hover:bg-gray-200 dark:hover:bg-slate-600 font-medium">
                                             <i class="fas fa-times mr-1"></i>
                                             Remove All Tags
                                         </button>
-                                        <button type="button" onclick="openTagRemovalSelector()" class="w-full px-3 py-1.5 bg-red-100 text-red-700 text-xs rounded hover:bg-red-200 font-medium">
+                                        <button type="button" onclick="openTagRemovalSelector()" class="w-full px-3 py-1.5 bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 text-xs rounded hover:bg-red-200 dark:hover:bg-red-500/30 font-medium">
                                             <i class="fas fa-minus mr-1"></i>
                                             Remove Specific Tag
                                         </button>
                                     </div>
                                 </div>
                             </div>
-                            <div class="border-t border-gray-200 p-2">
-                                <button type="button" onclick="toggleAssignTagsDropdown()" class="w-full px-3 py-1.5 bg-gray-200 text-gray-700 text-xs rounded hover:bg-gray-300">
+                            <div class="border-t border-gray-200 dark:border-slate-700 p-2">
+                                <button type="button" onclick="toggleAssignTagsDropdown()" class="w-full px-3 py-1.5 bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-slate-300 text-xs rounded hover:bg-gray-300 dark:hover:bg-slate-500">
                                     Close
                                 </button>
                             </div>
@@ -230,22 +205,22 @@ $currentFilters = $filters ?? ['search' => '', 'status' => '', 'group' => '', 's
                             <i class="fas fa-bell mr-1"></i> Assign Group
                             <i class="fas fa-chevron-down ml-2 text-xs"></i>
                         </button>
-                        <div id="assign-group-dropdown" class="hidden absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 z-10">
+                        <div id="assign-group-dropdown" class="hidden absolute left-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-10">
                             <form method="POST" action="/domains/bulk-assign-group" id="bulk-assign-form">
-                                <?= csrf_field() ?>
+                                {{ csrf_field() }}
                                 <div class="p-3">
-                                    <select name="group_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                                    <select name="group_id" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                         <option value="">-- No Group --</option>
-                                        <?php foreach ($groups as $group): ?>
-                                            <option value="<?= $group['id'] ?>"><?= htmlspecialchars($group['name']) ?></option>
-                                        <?php endforeach; ?>
+                                        {% for group in groups %}
+                                            <option value="{{ group.id }}">{{ group.name }}</option>
+                                        {% endfor %}
                                     </select>
                                 </div>
-                                <div class="border-t border-gray-200 p-2 flex gap-2">
+                                <div class="border-t border-gray-200 dark:border-slate-700 p-2 flex gap-2">
                                     <button type="submit" class="flex-1 px-3 py-1.5 bg-primary text-white text-xs rounded hover:bg-primary-dark">
                                         Assign
                                     </button>
-                                    <button type="button" onclick="toggleAssignGroupDropdown()" class="flex-1 px-3 py-1.5 bg-gray-200 text-gray-700 text-xs rounded hover:bg-gray-300">
+                                    <button type="button" onclick="toggleAssignGroupDropdown()" class="flex-1 px-3 py-1.5 bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-slate-300 text-xs rounded hover:bg-gray-300 dark:hover:bg-slate-500">
                                         Cancel
                                     </button>
                                 </div>
@@ -258,294 +233,266 @@ $currentFilters = $filters ?? ['search' => '', 'status' => '', 'group' => '', 's
                 </div>
             </div>
         </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
             <i class="fas fa-times mr-1.5"></i> Clear Selection
         </button>
     </div>
-    <?php if (!empty($domains)): ?>
-        <!-- Table View (Desktop) -->
+    {% if domains is not empty %}
+        {# Table View (Desktop) #}
         <div class="hidden lg:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
                     <tr>
                         <th class="px-6 py-3 text-left">
-                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 text-primary focus:ring-primary">
+                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('domain_name', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Domain <?= sortIcon('domain_name', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('domain_name', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Domain {{ sort_icon('domain_name', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('registrar', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Registrar <?= sortIcon('registrar', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('registrar', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Registrar {{ sort_icon('registrar', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('expiration_date', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Expiration <?= sortIcon('expiration_date', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('expiration_date', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Expiration {{ sort_icon('expiration_date', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('status', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Status <?= sortIcon('status', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('status', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Status {{ sort_icon('status', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('group_name', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Group <?= sortIcon('group_name', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('group_name', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Group {{ sort_icon('group_name', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('last_checked', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Last Checked <?= sortIcon('last_checked', $currentFilters['sort'], $currentFilters['order']) ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('last_checked', filters.sort, filters.order, filters) }}" class="hover:text-primary flex items-center">
+                                Last Checked {{ sort_icon('last_checked', filters.sort, filters.order)|raw }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($domains as $domain): ?>
-                        <?php
-                        // Display data prepared by DomainHelper in controller
-                        $daysLeft = $domain['daysLeft'];
-                        $expiryClass = $domain['expiryClass'];
-                        $statusClass = $domain['statusClass'];
-                        $statusText = $domain['statusText'];
-                        $statusIcon = $domain['statusIcon'];
-                        ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150 domain-row">
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for domain in domains %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150 domain-row">
                             <td class="px-6 py-4">
-                                <input type="checkbox" class="domain-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="<?= $domain['id'] ?>" onchange="updateBulkActions()">
+                                <input type="checkbox" class="domain-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" value="{{ domain.id }}" onchange="updateBulkActions()">
                             </td>
                             <td class="px-6 py-4">
                                 <div class="flex items-center">
-                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 dark:bg-opacity-20 rounded-lg flex items-center justify-center">
                                         <i class="fas fa-globe text-primary"></i>
                                     </div>
                                     <div class="ml-4">
-                                        <a href="/domains/<?= $domain['id'] ?>" class="text-sm font-semibold text-gray-900 hover:text-primary"><?= htmlspecialchars($domain['domain_name']) ?></a>
+                                        <a href="/domains/{{ domain.id }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-primary">{{ domain.domain_name }}</a>
                                         <div class="flex items-center gap-1.5 mt-1">
-                                            <?php
-                                            // Display tags using new tag system
-                                            $tags = !empty($domain['tags']) ? explode(',', $domain['tags']) : [];
-                                            $tagColors = !empty($domain['tag_colors']) ? explode('|', $domain['tag_colors']) : [];
-                                            
-                                            foreach ($tags as $index => $tag):
-                                                $tag = trim($tag);
-                                                $colorClass = isset($tagColors[$index]) ? $tagColors[$index] : 'bg-gray-100 text-gray-700 border-gray-200';
-                                            ?>
-                                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border <?= $colorClass ?>">
+                                            {% set domainTags = domain.tags ? domain.tags|split(',') : [] %}
+                                            {% set tagColors = domain.tag_colors ? domain.tag_colors|split('|') : [] %}
+                                            {% for tag in domainTags %}
+                                                {% set colorClass = tagColors[loop.index0]|default('bg-gray-100 text-gray-700 border-gray-200 dark:bg-slate-700 dark:text-slate-300 dark:border-slate-600') %}
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ colorClass }}">
                                                     <i class="fas fa-tag mr-1" style="font-size: 9px;"></i>
-                                                    <?= htmlspecialchars(ucfirst($tag)) ?>
+                                                    {{ tag|trim|capitalize }}
                                                 </span>
-                                            <?php endforeach; ?>
-                                            <?php if (!empty($domain['nameservers']) && empty($tags)): ?>
-                                                <span class="text-xs text-gray-500">NS: <?= htmlspecialchars(explode(',', $domain['nameservers'])[0]) ?></span>
-                                            <?php endif; ?>
+                                            {% endfor %}
+                                            {% if domain.nameservers and domainTags is empty %}
+                                                <span class="text-xs text-gray-500 dark:text-slate-400">NS: {{ domain.nameservers|split(',')[0] }}</span>
+                                            {% endif %}
                                         </div>
                                     </div>
                                 </div>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if (!empty($domain['registrar'])): ?>
+                                {% if domain.registrar %}
                                     <div class="flex items-center">
-                                        <i class="fas fa-building text-gray-400 mr-2"></i>
-                                        <span class="text-sm text-gray-900"><?= htmlspecialchars($domain['registrar']) ?></span>
+                                        <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2"></i>
+                                        <span class="text-sm text-gray-900 dark:text-white">{{ domain.registrar }}</span>
                                     </div>
-                                <?php else: ?>
-                                    <span class="text-sm text-gray-400">Unknown</span>
-                                <?php endif; ?>
+                                {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">Unknown</span>
+                                {% endif %}
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if (!empty($domain['expiration_date'])): ?>
+                                {% if domain.expiration_date %}
                                     <div class="text-sm">
-                                        <div class="font-medium text-gray-900 flex items-center">
-                                            <?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?>
-                                            <?php if ($domain['isManualExpiration']): ?>
-                                                <span class="ml-1 inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800" title="Manual expiration date">
+                                        <div class="font-medium text-gray-900 dark:text-white flex items-center">
+                                            {{ domain.expiration_date|date('M d, Y') }}
+                                            {% if domain.isManualExpiration %}
+                                                <span class="ml-1 inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-amber-100 dark:bg-amber-500/10 text-amber-800 dark:text-amber-400" title="Manual expiration date">
                                                     <i class="fas fa-edit" style="font-size: 8px;"></i>
                                                 </span>
-                                            <?php endif; ?>
+                                            {% endif %}
                                         </div>
-                                        <div class="text-xs <?= $expiryClass ?>">
-                                            <?= $daysLeft ?> days
+                                        <div class="text-xs {{ domain.expiryClass }}">
+                                            {{ domain.daysLeft }} days
                                         </div>
                                     </div>
-                                <?php else: ?>
-                                    <span class="text-sm text-gray-400">Not set</span>
-                                <?php endif; ?>
+                                {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">Not set</span>
+                                {% endif %}
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $statusClass ?>">
-                                    <i class="fas <?= $statusIcon ?> mr-1"></i>
-                                    <?= $statusText ?>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ domain.statusClass }}">
+                                    <i class="fas {{ domain.statusIcon }} mr-1"></i>
+                                    {{ domain.statusText }}
                                 </span>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                <?php if (!empty($domain['group_name'])): ?>
-                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                {% if domain.group_name %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-400">
                                         <i class="fas fa-bell mr-1"></i>
-                                        <?= htmlspecialchars($domain['group_name']) ?>
+                                        {{ domain.group_name }}
                                     </span>
-                                <?php else: ?>
-                                    <span class="text-gray-400">No Group</span>
-                                <?php endif; ?>
+                                {% else %}
+                                    <span class="text-gray-400 dark:text-slate-500">No Group</span>
+                                {% endif %}
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <?php if (!empty($domain['last_checked'])): ?>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                {% if domain.last_checked %}
                                     <div class="flex items-center">
                                         <i class="far fa-clock mr-2"></i>
-                                        <?= date('M d, H:i', strtotime($domain['last_checked'])) ?>
+                                        {{ domain.last_checked|date('M d, H:i') }}
                                     </div>
-                                <?php else: ?>
-                                    <span class="text-gray-400">Never</span>
-                                <?php endif; ?>
+                                {% else %}
+                                    <span class="text-gray-400 dark:text-slate-500">Never</span>
+                                {% endif %}
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                 <div class="flex items-center justify-end space-x-2">
-                                    <a href="/domains/<?= $domain['id'] ?>" class="text-blue-600 hover:text-blue-800" title="View">
+                                    <a href="/domains/{{ domain.id }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="View">
                                         <i class="fas fa-eye"></i>
                                     </a>
-                                    <form method="POST" action="/domains/<?= $domain['id'] ?>/refresh" class="inline">
-                                        <?= csrf_field() ?>
-                                        <button type="submit" class="text-green-600 hover:text-green-800" title="Refresh WHOIS">
+                                    <form method="POST" action="/domains/{{ domain.id }}/refresh" class="inline">
+                                        {{ csrf_field() }}
+                                        <button type="submit" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" title="Refresh WHOIS">
                                             <i class="fas fa-sync-alt"></i>
                                         </button>
                                     </form>
-                                    <a href="/domains/<?= $domain['id'] ?>/edit?from=/domains" class="text-yellow-600 hover:text-yellow-800" title="Edit">
+                                    <a href="/domains/{{ domain.id }}/edit?from=/domains" class="text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300" title="Edit">
                                         <i class="fas fa-edit"></i>
                                     </a>
-                                    <form method="POST" action="/domains/<?= $domain['id'] ?>/delete" class="inline" onsubmit="return confirm('Delete this domain?')">
-                                        <?= csrf_field() ?>
-                                        <button type="submit" class="text-red-600 hover:text-red-800" title="Delete">
+                                    <form method="POST" action="/domains/{{ domain.id }}/delete" class="inline" onsubmit="return confirm('Delete this domain?')">
+                                        {{ csrf_field() }}
+                                        <button type="submit" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" title="Delete">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </form>
                                 </div>
                             </td>
                         </tr>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </tbody>
             </table>
         </div>
 
-        <!-- Card View (Mobile) - Simplified for brevity -->
-        <div class="lg:hidden divide-y divide-gray-200">
-            <?php foreach ($domains as $domain): ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
+        {# Card View (Mobile) #}
+        <div class="lg:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for domain in domains %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
                     <div class="flex items-center mb-3">
-                        <input type="checkbox" class="domain-checkbox-mobile rounded border-gray-300 text-primary focus:ring-primary mr-3" value="<?= $domain['id'] ?>" onchange="updateBulkActions()">
-                        <a href="/domains/<?= $domain['id'] ?>" class="text-lg font-semibold text-gray-900 hover:text-primary"><?= htmlspecialchars($domain['domain_name']) ?></a>
+                        <input type="checkbox" class="domain-checkbox-mobile rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary mr-3" value="{{ domain.id }}" onchange="updateBulkActions()">
+                        <a href="/domains/{{ domain.id }}" class="text-lg font-semibold text-gray-900 dark:text-white hover:text-primary">{{ domain.domain_name }}</a>
                     </div>
-                    <!-- Add mobile view content here if needed -->
                 </div>
-            <?php endforeach; ?>
+            {% endfor %}
         </div>
-    <?php else: ?>
+    {% else %}
         <div class="text-center py-12 px-6">
             <div class="mb-4">
-                <i class="fas fa-globe text-gray-300 text-6xl"></i>
+                <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-6xl"></i>
             </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Domains Yet</h3>
-            <p class="text-sm text-gray-500 mb-4">Start monitoring your domains by adding your first one</p>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Domains Yet</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Start monitoring your domains by adding your first one</p>
             <a href="/domains/create" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                 <i class="fas fa-plus mr-2"></i>
                 <span>Add Your First Domain</span>
             </a>
         </div>
-    <?php endif; ?>
+    {% endif %}
 </div>
 
-<!-- Pagination Controls -->
-<?php if ($pagination['total_pages'] > 1): ?>
+{# Pagination Controls #}
+{% if pagination.total_pages > 1 %}
+{% set currentPage = pagination.current_page %}
+{% set totalPages = pagination.total_pages %}
+{% set range = 2 %}
+{% set start = max(1, currentPage - range) %}
+{% set end = min(totalPages, currentPage + range) %}
 <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?></span>
+    {# Page Info #}
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ currentPage }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ totalPages }}</span>
     </div>
-    
-    <!-- Pagination Buttons -->
+
+    {# Pagination Buttons #}
     <div class="flex items-center gap-1">
-        <?php
-        $currentPage = $pagination['current_page'];
-        $totalPages = $pagination['total_pages'];
-        
-        // Helper function to build pagination URL
-        function paginationUrl($page, $filters, $perPage) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/domains?' . http_build_query($params);
-        }
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {# First Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(1, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-double-left"></i>
             </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {% endif %}
+
+        {# Previous Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(currentPage - 1, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-left"></i> Previous
             </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2; // Show 2 pages on each side of current page
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        // Show first page + ellipsis if needed
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        // Page numbers
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        // Show last page + ellipsis if needed
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {% endif %}
+
+        {# First page + ellipsis if needed #}
+        {% if start > 1 %}
+            <a href="{{ pagination_url(1, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if start > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+
+        {# Page Numbers #}
+        {% for i in start..end %}
+            {% if i == currentPage %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {# Last page + ellipsis if needed #}
+        {% if end < totalPages %}
+            {% if end < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+
+        {# Next Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(currentPage + 1, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 Next <i class="fas fa-angle-right"></i>
             </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {% endif %}
+
+        {# Last Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(totalPages, filters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-double-right"></i>
             </a>
-        <?php endif; ?>
+        {% endif %}
     </div>
 </div>
-<?php endif; ?>
+{% endif %}
+{% endblock %}
 
+{% block scripts %}
 <script>
-// Multi-select functionality
 function toggleSelectAll(checkbox) {
     const checkboxes = document.querySelectorAll('.domain-checkbox, .domain-checkbox-mobile');
     checkboxes.forEach(cb => {
@@ -559,20 +506,17 @@ function updateBulkActions() {
     const bulkActions = document.getElementById('bulk-actions');
     const selectedCount = document.getElementById('selected-count');
     const selectAllCheckbox = document.getElementById('select-all');
-    
-    // Get unique domain IDs (avoid counting both desktop and mobile checkboxes)
+
     const uniqueIds = new Set(Array.from(checkboxes).map(cb => cb.value));
     const count = uniqueIds.size;
-    
+
     if (count > 0) {
         bulkActions.classList.remove('hidden');
         selectedCount.textContent = count + ' domain(s) selected';
     } else {
         bulkActions.classList.add('hidden');
     }
-    
-    // Update select all checkbox state
-    // Only count desktop checkboxes to avoid double counting
+
     const allCheckboxes = document.querySelectorAll('.domain-checkbox');
     const checkedDesktopBoxes = document.querySelectorAll('.domain-checkbox:checked');
     if (selectAllCheckbox) {
@@ -592,7 +536,6 @@ function clearSelection() {
 
 function getSelectedIds() {
     const checkboxes = document.querySelectorAll('.domain-checkbox:checked, .domain-checkbox-mobile:checked');
-    // Return unique IDs only (avoid duplicates from desktop and mobile views)
     const ids = Array.from(checkboxes).map(cb => cb.value);
     return [...new Set(ids)];
 }
@@ -600,18 +543,17 @@ function getSelectedIds() {
 function bulkRefresh() {
     const ids = getSelectedIds();
     if (ids.length === 0) return;
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-refresh';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -619,7 +561,7 @@ function bulkRefresh() {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
@@ -627,22 +569,21 @@ function bulkRefresh() {
 function bulkDelete() {
     const ids = getSelectedIds();
     if (ids.length === 0) return;
-    
+
     if (!confirm(`Delete ${ids.length} domain(s)? This action cannot be undone.`)) {
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-delete';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -650,7 +591,7 @@ function bulkDelete() {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
@@ -671,26 +612,23 @@ function bulkAddTag(tagName) {
         alert('Please select at least one domain');
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-add-tags';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
-    // Add tag to add
+
     const tagInput = document.createElement('input');
     tagInput.type = 'hidden';
     tagInput.name = 'tag';
     tagInput.value = tagName;
     form.appendChild(tagInput);
-    
-    // Add domain IDs
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -698,7 +636,7 @@ function bulkAddTag(tagName) {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
@@ -709,23 +647,21 @@ function bulkRemoveAllTags() {
         alert('Please select at least one domain');
         return;
     }
-    
+
     if (!confirm(`Remove all tags from ${ids.length} domain(s)?`)) {
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-remove-tags';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
-    // Add domain IDs
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -733,53 +669,50 @@ function bulkRemoveAllTags() {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
 
-// Bulk transfer domains
 function bulkTransfer() {
     const ids = getSelectedIds();
     if (ids.length === 0) {
         alert('Please select at least one domain');
         return;
     }
-    
-    // Get list of users for transfer
-    const users = <?= json_encode($users ?? []) ?>;
+
+    const users = {{ users|default([])|json_encode|raw }};
     if (users.length === 0) {
         alert('No users available for transfer');
         return;
     }
-    
-    // Create user selection options
-    let userOptions = users.map(user => 
+
+    let userOptions = users.map(user =>
         `<option value="${user.id}">${user.username} (${user.full_name || user.email})</option>`
     ).join('');
-    
+
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50';
     modal.innerHTML = `
-        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div class="relative top-20 mx-auto p-5 border border-gray-200 dark:border-slate-700 w-96 shadow-lg rounded-md bg-white dark:bg-slate-800">
             <div class="mt-3">
-                <h3 class="text-lg font-medium text-gray-900 mb-4">Transfer ${ids.length} Domain(s)</h3>
-                <p class="text-sm text-gray-500 mb-4">Select the user to transfer the selected domains to:</p>
-                
+                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Transfer ${ids.length} Domain(s)</h3>
+                <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Select the user to transfer the selected domains to:</p>
+
                 <form method="POST" action="/domains/bulk-transfer">
-                    <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                     ${ids.map(id => `<input type="hidden" name="domain_ids[]" value="${id}">`).join('')}
-                    
+
                     <div class="mb-4">
-                        <label for="target_user_id" class="block text-sm font-medium text-gray-700 mb-2">Transfer to User:</label>
-                        <select name="target_user_id" id="target_user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <label for="target_user_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Transfer to User:</label>
+                        <select name="target_user_id" id="target_user_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                             <option value="">Select a user...</option>
                             ${userOptions}
                         </select>
                     </div>
-                    
+
                     <div class="flex justify-end space-x-3">
-                        <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
+                        <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 bg-gray-300 dark:bg-slate-600 text-gray-700 dark:text-slate-300 rounded-md hover:bg-gray-400 dark:hover:bg-slate-500">
                             Cancel
                         </button>
                         <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark">
@@ -790,19 +723,16 @@ function bulkTransfer() {
             </div>
         </div>
     `;
-    
+
     document.body.appendChild(modal);
 }
 
-// Update bulk assign form with selected IDs
 document.getElementById('bulk-assign-form')?.addEventListener('submit', function(e) {
     const ids = getSelectedIds();
     const container = this;
-    
-    // Clear existing hidden inputs
+
     container.querySelectorAll('input[name="domain_ids[]"]').forEach(el => el.remove());
-    
-    // Add selected IDs
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -812,52 +742,44 @@ document.getElementById('bulk-assign-form')?.addEventListener('submit', function
     });
 });
 
-
-// Close dropdowns when clicking outside
 document.addEventListener('click', function(event) {
     const groupDropdown = document.getElementById('assign-group-dropdown');
     const tagsDropdown = document.getElementById('assign-tags-dropdown');
     const groupButton = event.target.closest('button[onclick="toggleAssignGroupDropdown()"]');
     const tagsButton = event.target.closest('button[onclick="toggleAssignTagsDropdown()"]');
-    
+
     if (!groupButton && !groupDropdown.contains(event.target)) {
         groupDropdown?.classList.add('hidden');
     }
-    
+
     if (!tagsButton && !tagsDropdown.contains(event.target)) {
         tagsDropdown?.classList.add('hidden');
     }
 });
 
-// Tags are now loaded server-side, no need for fetch()
-
-// Bulk assign existing tag to domains
 function bulkAssignExistingTag(tagId, tagName) {
     const ids = getSelectedIds();
     if (ids.length === 0) {
         alert('Please select at least one domain');
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-assign-existing-tag';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
-    // Add tag ID
+
     const tagInput = document.createElement('input');
     tagInput.type = 'hidden';
     tagInput.name = 'tag_id';
     tagInput.value = tagId;
     form.appendChild(tagInput);
-    
-    // Add domain IDs
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -865,37 +787,35 @@ function bulkAssignExistingTag(tagId, tagName) {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
 
-// Open tag selector modal for custom tags
 function openTagSelector() {
     const ids = getSelectedIds();
     if (ids.length === 0) {
         alert('Please select at least one domain');
         return;
     }
-    
-    // Create modal for tag selection
+
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 z-50';
     modal.innerHTML = `
         <div class="flex items-center justify-center min-h-screen p-4">
-            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h3 class="text-lg font-medium text-gray-900">Add Custom Tag</h3>
+            <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add Custom Tag</h3>
                 </div>
                 <div class="px-6 py-4">
                     <div class="mb-4">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Tag Name</label>
-                        <input type="text" id="custom-tag-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter tag name">
-                        <p class="text-xs text-gray-500 mt-1">Use only letters, numbers, and hyphens</p>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Tag Name</label>
+                        <input type="text" id="custom-tag-name" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white" placeholder="Enter tag name">
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Use only letters, numbers, and hyphens</p>
                     </div>
                 </div>
-                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
-                    <button type="button" onclick="closeTagSelector()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+                <div class="px-6 py-4 bg-gray-50 dark:bg-slate-900 flex justify-end space-x-3 rounded-b-lg">
+                    <button type="button" onclick="closeTagSelector()" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-md hover:bg-gray-50 dark:hover:bg-slate-600">
                         Cancel
                     </button>
                     <button type="button" onclick="submitCustomTag()" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
@@ -905,7 +825,7 @@ function openTagSelector() {
             </div>
         </div>
     `;
-    
+
     document.body.appendChild(modal);
     document.getElementById('custom-tag-name').focus();
 }
@@ -923,43 +843,41 @@ function submitCustomTag() {
         alert('Please enter a tag name');
         return;
     }
-    
+
     if (!/^[a-z0-9-]+$/.test(tagName)) {
         alert('Invalid tag name format (use only letters, numbers, and hyphens)');
         return;
     }
-    
+
     bulkAddTag(tagName);
     closeTagSelector();
 }
 
-// Open tag removal selector
 function openTagRemovalSelector() {
     const ids = getSelectedIds();
     if (ids.length === 0) {
         alert('Please select at least one domain');
         return;
     }
-    
-    // Create modal for tag removal
+
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 z-50';
     modal.innerHTML = `
         <div class="flex items-center justify-center min-h-screen p-4">
-            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h3 class="text-lg font-medium text-gray-900">Remove Specific Tag</h3>
+            <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Remove Specific Tag</h3>
                 </div>
                 <div class="px-6 py-4">
                     <div class="mb-4">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Select Tag to Remove</label>
-                        <select id="tag-to-remove" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Select Tag to Remove</label>
+                        <select id="tag-to-remove" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                             <option value="">Loading tags...</option>
                         </select>
                     </div>
                 </div>
-                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
-                    <button type="button" onclick="closeTagRemovalSelector()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+                <div class="px-6 py-4 bg-gray-50 dark:bg-slate-900 flex justify-end space-x-3 rounded-b-lg">
+                    <button type="button" onclick="closeTagRemovalSelector()" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-md hover:bg-gray-50 dark:hover:bg-slate-600">
                         Cancel
                     </button>
                     <button type="button" onclick="submitTagRemoval()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700">
@@ -969,14 +887,12 @@ function openTagRemovalSelector() {
             </div>
         </div>
     `;
-    
+
     document.body.appendChild(modal);
-    
-    // Load tags for removal (only tags assigned to selected domains)
+
     const select = document.getElementById('tag-to-remove');
     select.innerHTML = '<option value="">Loading tags...</option>';
-    
-    // Fetch tags that are actually assigned to the selected domains
+
     fetch('/domains/get-tags-for-domains', {
         method: 'POST',
         headers: {
@@ -984,7 +900,7 @@ function openTagRemovalSelector() {
         },
         body: JSON.stringify({
             domain_ids: ids,
-            csrf_token: '<?= csrf_token() ?>'
+            csrf_token: '{{ csrf_token() }}'
         })
     })
     .then(response => response.json())
@@ -1020,32 +936,29 @@ function submitTagRemoval() {
         alert('Please select a tag to remove');
         return;
     }
-    
+
     const ids = getSelectedIds();
     if (ids.length === 0) {
         alert('Please select at least one domain');
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/domains/bulk-remove-specific-tag';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
-    // Add tag ID
+
     const tagInput = document.createElement('input');
     tagInput.type = 'hidden';
     tagInput.name = 'tag_id';
     tagInput.value = tagId;
     form.appendChild(tagInput);
-    
-    // Add domain IDs
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -1053,24 +966,16 @@ function submitTagRemoval() {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
 
-// Tags are loaded server-side, no need for DOMContentLoaded
-
-// Close export dropdown when clicking outside
 document.addEventListener('click', function(e) {
     const wrapper = document.getElementById('domainExportDropdownWrapper');
     if (wrapper && !wrapper.contains(e.target)) {
         document.getElementById('domainExportMenu').classList.add('hidden');
     }
 });
-
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/domains/view.php b/app/Views/domains/view.php
deleted file mode 100644
index 40d7385..0000000
--- a/app/Views/domains/view.php
+++ /dev/null
@@ -1,446 +0,0 @@
-<?php
-$title = 'Domain Details';
-$pageTitle = htmlspecialchars($domain['domain_name']);
-$pageDescription = 'Domain information and monitoring status';
-$pageIcon = 'fas fa-globe';
-
-// Data already formatted by controller via DomainHelper
-$whoisData = json_decode($domain['whois_data'] ?? '{}', true);
-$daysLeft = $domain['daysLeft'];
-$domainStatus = $domain['displayStatus'];
-$expiryColor = $domain['expiryColor'];
-
-ob_start();
-?>
-
-<!-- Top Action Bar -->
-<div class="mb-3 flex flex-wrap gap-2 justify-between items-center">
-    <div class="flex flex-wrap gap-2">
-        <?php
-        // Status badge data prepared by DomainHelper in controller
-        $statusClass = $domain['statusClass'];
-        $statusText = $domain['statusText'];
-        $statusIcon = $domain['statusIcon'];
-        ?>
-        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold <?= $statusClass ?>">
-            <i class="fas <?= $statusIcon ?> mr-1.5"></i>
-            <?= $statusText ?>
-        </span>
-        <?php if ($domainStatus !== 'available'): ?>
-        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-<?= $expiryColor ?>-100 text-<?= $expiryColor ?>-800 border border-<?= $expiryColor ?>-200">
-            <i class="fas fa-calendar-alt mr-1.5"></i>
-            <?= $daysLeft !== null ? $daysLeft . ' days left' : 'No expiry date' ?>
-        </span>
-        <?php endif; ?>
-        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-indigo-100 text-indigo-800 border border-indigo-200">
-            <i class="fas fa-<?= $domain['is_active'] ? 'check-circle' : 'pause-circle' ?> mr-1.5"></i>
-            <?= $domain['is_active'] ? 'Monitoring Active' : 'Monitoring Paused' ?>
-        </span>
-        
-        <!-- Tags Display -->
-        <?php
-        $tags = !empty($domain['tags']) ? explode(',', $domain['tags']) : [];
-        $tagColors = !empty($domain['tag_colors']) ? explode('|', $domain['tag_colors']) : [];
-        
-        // Create a mapping of tag names to their colors
-        $tagColorMap = [];
-        foreach ($availableTags as $availableTag) {
-            $tagColorMap[$availableTag['name']] = $availableTag['color'];
-        }
-        
-        foreach ($tags as $index => $tag):
-            $tag = trim($tag);
-            // Use the color from the database if available, otherwise use the stored color, otherwise default
-            $colorClass = $tagColorMap[$tag] ?? (isset($tagColors[$index]) ? $tagColors[$index] : 'bg-gray-100 text-gray-700 border-gray-200');
-        ?>
-            <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold border <?= $colorClass ?>">
-                <i class="fas fa-tag mr-1.5" style="font-size: 10px;"></i>
-                <?= htmlspecialchars(ucfirst($tag)) ?>
-            </span>
-        <?php endforeach; ?>
-    </div>
-    <div class="flex gap-2 items-center">
-        <form method="POST" action="/domains/<?= $domain['id'] ?>/refresh" class="inline">
-            <?= csrf_field() ?>
-            <button type="submit" class="inline-flex items-center justify-center px-3 py-2 bg-green-600 text-white text-xs rounded-lg hover:bg-green-700 transition-colors font-medium min-w-[80px] h-[32px]">
-                <i class="fas fa-sync-alt mr-1.5"></i>
-                Refresh
-            </button>
-        </form>
-        <a href="/domains/<?= $domain['id'] ?>/edit?from=/domains/<?= $domain['id'] ?>" class="inline-flex items-center justify-center px-3 py-2 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition-colors font-medium min-w-[80px] h-[32px]">
-            <i class="fas fa-edit mr-1.5"></i>
-            Edit
-        </a>
-        <form method="POST" action="/domains/<?= $domain['id'] ?>/delete" onsubmit="return confirm('Delete this domain?')" class="inline">
-            <?= csrf_field() ?>
-            <button type="submit" class="inline-flex items-center justify-center px-3 py-2 bg-red-600 text-white text-xs rounded-lg hover:bg-red-700 transition-colors font-medium min-w-[80px] h-[32px]">
-                <i class="fas fa-trash mr-1.5"></i>
-                Delete
-            </button>
-        </form>
-        <a href="/domains" class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 text-gray-700 text-xs rounded-lg hover:bg-gray-50 transition-colors font-medium min-w-[80px] h-[32px]">
-            <i class="fas fa-arrow-left mr-1.5"></i>
-            Back
-        </a>
-    </div>
-</div>
-
-<!-- Main 2-Column Layout -->
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
-    
-    <!-- LEFT COLUMN -->
-    <div class="space-y-3">
-        
-        <!-- Registration Details -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-building text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Registration Details
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Registrar</label>
-                        <p class="text-gray-900 font-semibold"><?= htmlspecialchars($domain['registrar'] ?? 'Unknown') ?></p>
-                    </div>
-                    <?php if (!empty($domain['registrar_url'])): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Registrar URL</label>
-                        <a href="<?= htmlspecialchars($domain['registrar_url']) ?>" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
-                            <i class="fas fa-external-link-alt mr-1" style="font-size: 9px;"></i>
-                            Visit
-                        </a>
-                    </div>
-                    <?php endif; ?>
-                    <?php if (!empty($domain['abuse_email'])): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Abuse Contact</label>
-                        <a href="mailto:<?= htmlspecialchars($domain['abuse_email']) ?>" class="text-blue-600 hover:text-blue-800">
-                            <?= htmlspecialchars($domain['abuse_email']) ?>
-                        </a>
-                    </div>
-                    <?php endif; ?>
-                    <?php if (isset($whoisData['whois_server'])): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">WHOIS Server</label>
-                        <p class="text-gray-900 font-mono"><?= htmlspecialchars($whoisData['whois_server']) ?></p>
-                    </div>
-                    <?php endif; ?>
-                    <?php if (isset($whoisData['owner'])): ?>
-                    <div class="col-span-2">
-                        <label class="text-gray-500 font-medium block mb-0.5">Owner</label>
-                        <p class="text-gray-900"><?= htmlspecialchars($whoisData['owner']) ?></p>
-                    </div>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <!-- Important Dates -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-calendar text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Important Dates
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="space-y-2">
-                    <?php if (!empty($domain['expiration_date'])): ?>
-                    <div class="flex items-center justify-between p-2 bg-<?= $expiryColor ?>-50 rounded border border-<?= $expiryColor ?>-200">
-                        <div class="flex items-center">
-                            <div class="w-7 h-7 bg-<?= $expiryColor ?>-500 rounded flex items-center justify-center mr-2">
-                                <i class="fas fa-exclamation-triangle text-white text-xs"></i>
-                            </div>
-                            <div>
-                                <p class="text-xs text-gray-600 font-medium">
-                                    Expiration
-                                    <?php if ($domain['isManualExpiration']): ?>
-                                        <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
-                                            <i class="fas fa-edit mr-1" style="font-size: 8px;"></i>
-                                            Manual
-                                        </span>
-                                    <?php endif; ?>
-                                </p>
-                                <p class="text-xs font-semibold text-gray-900"><?= $domain['expiration_date'] ? date('M j, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?></p>
-                            </div>
-                        </div>
-                        <span class="px-2 py-1 bg-<?= $expiryColor ?>-100 text-<?= $expiryColor ?>-800 rounded text-xs font-bold">
-                            <?= $daysLeft ?> days
-                        </span>
-                    </div>
-                    <?php endif; ?>
-
-                    <?php if (!empty($domain['updated_date'])): ?>
-                    <div class="flex items-center p-2 bg-blue-50 rounded border border-blue-200">
-                        <div class="w-7 h-7 bg-blue-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-clock text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">Last Updated</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y', strtotime($domain['updated_date'])) ?></p>
-                        </div>
-                    </div>
-                    <?php endif; ?>
-
-                    <?php if (isset($whoisData['creation_date'])): ?>
-                    <div class="flex items-center p-2 bg-green-50 rounded border border-green-200">
-                        <div class="w-7 h-7 bg-green-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-calendar-plus text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">Created</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y', strtotime($whoisData['creation_date'])) ?></p>
-                        </div>
-                    </div>
-                    <?php endif; ?>
-
-                    <div class="flex items-center p-2 bg-indigo-50 rounded border border-indigo-200">
-                        <div class="w-7 h-7 bg-indigo-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-sync text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">Last Checked</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y H:i', strtotime($domain['last_checked'])) ?></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Nameservers -->
-        <?php if (!empty($whoisData['nameservers'])): ?>
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-server text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Nameservers (<?= count($whoisData['nameservers']) ?>)
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="space-y-1.5">
-                    <?php foreach ($whoisData['nameservers'] as $index => $ns): ?>
-                    <div class="flex items-center p-2 bg-gray-50 rounded hover:bg-gray-100 transition-colors">
-                        <div class="w-6 h-6 bg-teal-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
-                            <?= $index + 1 ?>
-                        </div>
-                        <p class="font-mono text-xs text-gray-800"><?= htmlspecialchars($ns) ?></p>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-            </div>
-        </div>
-        <?php endif; ?>
-
-        <!-- Domain Status -->
-        <?php if (!empty($domain['parsedStatuses'])): ?>
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-info-circle text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Domain Status (<?= count($domain['parsedStatuses']) ?>)
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="flex flex-wrap gap-1.5">
-                    <?php foreach ($domain['parsedStatuses'] as $cleanStatus): ?>
-                        <?php
-                        // Format status text using helper
-                        $readableStatus = \App\Helpers\DomainHelper::formatStatusText($cleanStatus);
-                        ?>
-                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium" title="<?= htmlspecialchars($cleanStatus) ?>">
-                        <?= htmlspecialchars($readableStatus) ?>
-                    </span>
-                    <?php endforeach; ?>
-                </div>
-            </div>
-        </div>
-        <?php endif; ?>
-
-    </div>
-
-    <!-- RIGHT COLUMN -->
-    <div class="space-y-3">
-        
-        <!-- Notification Group -->
-        <?php if (!empty($domain['group_name'])): ?>
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-bell text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Notification Group
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="flex items-center mb-3">
-                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
-                        <i class="fas fa-users text-green-600"></i>
-                    </div>
-                    <div>
-                        <p class="font-semibold text-sm text-gray-900"><?= htmlspecialchars($domain['group_name']) ?></p>
-                        <?php if (!empty($domain['channels'])): ?>
-                        <p class="text-xs text-gray-600">
-                            <?= $domain['activeChannelCount'] ?? 0 ?> / <?= count($domain['channels']) ?> channels active
-                        </p>
-                        <?php endif; ?>
-                    </div>
-                </div>
-                <?php if (!empty($domain['channels'])): ?>
-                <div class="grid grid-cols-2 gap-2">
-                    <?php foreach ($domain['channels'] as $channel): ?>
-                    <div class="flex items-center p-2 rounded <?= $channel['is_active'] ? 'bg-green-50 border border-green-200' : 'bg-gray-50 border border-gray-200' ?>">
-                        <i class="fas fa-<?= $channel['is_active'] ? 'check-circle text-green-600' : 'times-circle text-gray-400' ?> mr-2 text-xs"></i>
-                        <span class="text-xs font-medium text-gray-700"><?= ucfirst($channel['channel_type']) ?></span>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-                <?php endif; ?>
-            </div>
-        </div>
-        <?php else: ?>
-        <div class="bg-orange-50 rounded-lg border border-orange-200 p-4">
-            <div class="flex items-start mb-2">
-                <i class="fas fa-exclamation-triangle text-orange-500 mr-2 mt-0.5"></i>
-                <div>
-                    <h3 class="text-xs font-semibold text-gray-900">No Group Assigned</h3>
-                    <p class="text-xs text-gray-600 mt-0.5">Won't receive notifications</p>
-                </div>
-            </div>
-            <a href="/domains/<?= $domain['id'] ?>/edit?from=/domains/<?= $domain['id'] ?>" class="block w-full text-center px-3 py-1.5 bg-orange-500 text-white text-xs rounded-lg hover:bg-orange-600 transition-colors font-medium">
-                <i class="fas fa-plus mr-1"></i>
-                Assign Group
-            </a>
-        </div>
-        <?php endif; ?>
-
-        <!-- Notes Section -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-sticky-note text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Notes
-                </h3>
-            </div>
-            <div class="p-4">
-                <form method="POST" action="/domains/<?= $domain['id'] ?>/update-notes" id="notes-form">
-                    <?= csrf_field() ?>
-                    <textarea 
-                        name="notes" 
-                        id="notes-textarea"
-                        rows="6" 
-                        class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-                        placeholder="Add notes about this domain..."><?= htmlspecialchars($domain['notes'] ?? '') ?></textarea>
-                    
-                    <div class="flex gap-2 mt-3">
-                        <button 
-                            type="submit" 
-                            class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition-colors font-medium">
-                            <i class="fas fa-save mr-1.5"></i>
-                            Update Notes
-                        </button>
-                        <button 
-                            type="button" 
-                            onclick="resetNotes()" 
-                            class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-gray-300 text-gray-700 text-xs rounded-lg hover:bg-gray-50 transition-colors font-medium">
-                            <i class="fas fa-times mr-1.5"></i>
-                            Cancel
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Notification History -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-history text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Notification History (<?= count($logs) ?>)
-                </h3>
-            </div>
-            <div class="overflow-hidden">
-                <?php if (empty($logs)): ?>
-                <div class="p-8 text-center">
-                    <i class="fas fa-bell-slash text-gray-300 text-3xl mb-2"></i>
-                    <p class="text-xs text-gray-500">No notifications sent yet</p>
-                </div>
-                <?php else: ?>
-                <div class="max-h-96 overflow-y-auto">
-                    <table class="min-w-full divide-y divide-gray-200 text-xs">
-                        <thead class="bg-gray-50 sticky top-0">
-                            <tr>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Channel</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Date</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Message</th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            <?php foreach ($logs as $log): ?>
-                            <tr class="hover:bg-gray-50">
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <span class="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
-                                        <?= ucfirst($log['channel_type']) ?>
-                                    </span>
-                                </td>
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <?php $statusClass = $log['status'] === 'sent' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>
-                                    <span class="px-2 py-0.5 rounded text-xs font-medium <?= $statusClass ?>">
-                                        <?= ucfirst($log['status']) ?>
-                                    </span>
-                                </td>
-                                <td class="px-3 py-2 whitespace-nowrap text-gray-600"><?= date('M j, H:i', strtotime($log['sent_at'])) ?></td>
-                                <td class="px-3 py-2 text-gray-700 max-w-xs truncate" title="<?= htmlspecialchars($log['message']) ?>">
-                                    <?= htmlspecialchars($log['message']) ?>
-                                </td>
-                            </tr>
-                            <?php endforeach; ?>
-                        </tbody>
-                    </table>
-                </div>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <!-- Raw WHOIS Data (Collapsible) -->
-        <?php if (!empty($domain['whois_data'])): ?>
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <button onclick="toggleWhoisData()" class="w-full px-4 py-2 border-b border-gray-200 bg-gray-50 text-left hover:bg-gray-100 transition-colors">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center justify-between">
-                    <span class="flex items-center">
-                        <i class="fas fa-code text-gray-400 mr-2" style="font-size: 10px;"></i>
-                        Raw WHOIS Data
-                    </span>
-                    <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="whois-chevron"></i>
-                </h3>
-            </button>
-            <div id="whois-data" class="hidden p-4 bg-gray-900 max-h-64 overflow-y-auto">
-                <pre class="text-xs text-green-400 font-mono"><?= htmlspecialchars(json_encode($whoisData, JSON_PRETTY_PRINT)) ?></pre>
-            </div>
-        </div>
-        <?php endif; ?>
-
-    </div>
-
-</div>
-
-<script>
-function toggleWhoisData() {
-    const dataDiv = document.getElementById('whois-data');
-    const chevron = document.getElementById('whois-chevron');
-    dataDiv.classList.toggle('hidden');
-    chevron.classList.toggle('rotate-180');
-}
-
-function resetNotes() {
-    const originalNotes = <?= json_encode($domain['notes'] ?? '') ?>;
-    document.getElementById('notes-textarea').value = originalNotes;
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
diff --git a/app/Views/domains/view.twig b/app/Views/domains/view.twig
new file mode 100644
index 0000000..a3ac76c
--- /dev/null
+++ b/app/Views/domains/view.twig
@@ -0,0 +1,431 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Domain Details' %}
+{% set pageTitle = domain.domain_name %}
+{% set pageDescription = 'Domain information and monitoring status' %}
+{% set pageIcon = 'fas fa-globe' %}
+
+{% set daysLeft = domain.daysLeft %}
+{% set domainStatus = domain.displayStatus %}
+{% set expiryColor = domain.expiryColor %}
+
+{% block content %}
+
+<!-- Top Action Bar -->
+<div class="mb-3 flex flex-wrap gap-2 justify-between items-center">
+    <div class="flex flex-wrap gap-2">
+        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold {{ domain.statusClass }}">
+            <i class="fas {{ domain.statusIcon }} mr-1.5"></i>
+            {{ domain.statusText }}
+        </span>
+        {% if domainStatus != 'available' %}
+        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-{{ expiryColor }}-100 text-{{ expiryColor }}-800 dark:bg-{{ expiryColor }}-500/10 dark:text-{{ expiryColor }}-400 border border-{{ expiryColor }}-200 dark:border-{{ expiryColor }}-800">
+            <i class="fas fa-calendar-alt mr-1.5"></i>
+            {{ daysLeft is not null ? daysLeft ~ ' days left' : 'No expiry date' }}
+        </span>
+        {% endif %}
+        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-indigo-100 dark:bg-indigo-500/10 text-indigo-800 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800">
+            <i class="fas fa-{{ domain.is_active ? 'check-circle' : 'pause-circle' }} mr-1.5"></i>
+            {{ domain.is_active ? 'Monitoring Active' : 'Monitoring Paused' }}
+        </span>
+        
+        <!-- Tags Display -->
+        {% set domainTags = domain.tags ? domain.tags|split(',') : [] %}
+        {% set tagColorList = domain.tag_colors ? domain.tag_colors|split('|') : [] %}
+        
+        {% for tag in domainTags %}
+            {% set tagName = tag|trim %}
+            {% set matchedTags = availableTags|filter(t => t.name == tagName) %}
+            {% if matchedTags|length > 0 %}
+                {% set colorClass = matchedTags|first.color %}
+            {% elseif tagColorList[loop.index0] is defined %}
+                {% set colorClass = tagColorList[loop.index0] %}
+            {% else %}
+                {% set colorClass = 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 border-gray-200 dark:border-slate-700' %}
+            {% endif %}
+            <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold border {{ colorClass }}">
+                <i class="fas fa-tag mr-1.5" style="font-size: 10px;"></i>
+                {{ tagName|capitalize }}
+            </span>
+        {% endfor %}
+    </div>
+    <div class="flex gap-2 items-center">
+        <form method="POST" action="/domains/{{ domain.id }}/refresh" class="inline">
+            {{ csrf_field() }}
+            <button type="submit" class="inline-flex items-center justify-center px-3 py-2 bg-green-600 text-white text-xs rounded-lg hover:bg-green-700 transition-colors font-medium min-w-[80px] h-[32px]">
+                <i class="fas fa-sync-alt mr-1.5"></i>
+                Refresh
+            </button>
+        </form>
+        <a href="/domains/{{ domain.id }}/edit?from=/domains/{{ domain.id }}" class="inline-flex items-center justify-center px-3 py-2 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition-colors font-medium min-w-[80px] h-[32px]">
+            <i class="fas fa-edit mr-1.5"></i>
+            Edit
+        </a>
+        <form method="POST" action="/domains/{{ domain.id }}/delete" onsubmit="return confirm('Delete this domain?')" class="inline">
+            {{ csrf_field() }}
+            <button type="submit" class="inline-flex items-center justify-center px-3 py-2 bg-red-600 text-white text-xs rounded-lg hover:bg-red-700 transition-colors font-medium min-w-[80px] h-[32px]">
+                <i class="fas fa-trash mr-1.5"></i>
+                Delete
+            </button>
+        </form>
+        <a href="/domains" class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-xs rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium min-w-[80px] h-[32px]">
+            <i class="fas fa-arrow-left mr-1.5"></i>
+            Back
+        </a>
+    </div>
+</div>
+
+<!-- Main 2-Column Layout -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+    
+    <!-- LEFT COLUMN -->
+    <div class="space-y-3">
+        
+        <!-- Registration Details -->
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Registration Details
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Registrar</label>
+                        <p class="text-gray-900 dark:text-white font-semibold">{{ domain.registrar|default('Unknown') }}</p>
+                    </div>
+                    {% if domain.registrar_url is not empty %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Registrar URL</label>
+                        <a href="{{ domain.registrar_url }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex items-center">
+                            <i class="fas fa-external-link-alt mr-1" style="font-size: 9px;"></i>
+                            Visit
+                        </a>
+                    </div>
+                    {% endif %}
+                    {% if domain.abuse_email is not empty %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Abuse Contact</label>
+                        <a href="mailto:{{ domain.abuse_email }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
+                            {{ domain.abuse_email }}
+                        </a>
+                    </div>
+                    {% endif %}
+                    {% if whoisData.whois_server is defined %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">WHOIS Server</label>
+                        <p class="text-gray-900 dark:text-white font-mono">{{ whoisData.whois_server }}</p>
+                    </div>
+                    {% endif %}
+                    {% if whoisData.owner is defined %}
+                    <div class="col-span-2">
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Owner</label>
+                        <p class="text-gray-900 dark:text-white">{{ whoisData.owner }}</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        <!-- Important Dates -->
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-calendar text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Important Dates
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="space-y-2">
+                    {% if domain.expiration_date is not empty %}
+                    <div class="flex items-center justify-between p-2 bg-{{ expiryColor }}-50 dark:bg-{{ expiryColor }}-500/10 rounded border border-{{ expiryColor }}-200 dark:border-{{ expiryColor }}-800">
+                        <div class="flex items-center">
+                            <div class="w-7 h-7 bg-{{ expiryColor }}-500 rounded flex items-center justify-center mr-2">
+                                <i class="fas fa-exclamation-triangle text-white text-xs"></i>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">
+                                    Expiration
+                                    {% if domain.isManualExpiration %}
+                                        <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 dark:bg-amber-500/10 text-amber-800 dark:text-amber-400">
+                                            <i class="fas fa-edit mr-1" style="font-size: 8px;"></i>
+                                            Manual
+                                        </span>
+                                    {% endif %}
+                                </p>
+                                <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ domain.expiration_date ? domain.expiration_date|date('M j, Y') : 'Unknown' }}</p>
+                            </div>
+                        </div>
+                        <span class="px-2 py-1 bg-{{ expiryColor }}-100 dark:bg-{{ expiryColor }}-500/20 text-{{ expiryColor }}-800 dark:text-{{ expiryColor }}-400 rounded text-xs font-bold">
+                            {{ daysLeft }} days
+                        </span>
+                    </div>
+                    {% endif %}
+
+                    {% if domain.updated_date is not empty %}
+                    <div class="flex items-center p-2 bg-blue-50 dark:bg-blue-500/10 rounded border border-blue-200 dark:border-blue-800">
+                        <div class="w-7 h-7 bg-blue-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-clock text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">Last Updated</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ domain.updated_date|date('M j, Y') }}</p>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    {% if whoisData.creation_date is defined %}
+                    <div class="flex items-center p-2 bg-green-50 dark:bg-green-500/10 rounded border border-green-200 dark:border-green-800">
+                        <div class="w-7 h-7 bg-green-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-calendar-plus text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">Created</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ whoisData.creation_date|date('M j, Y') }}</p>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    <div class="flex items-center p-2 bg-indigo-50 dark:bg-indigo-500/10 rounded border border-indigo-200 dark:border-indigo-800">
+                        <div class="w-7 h-7 bg-indigo-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-sync text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">Last Checked</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ domain.last_checked|date('M j, Y H:i') }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Nameservers -->
+        {% if whoisData.nameservers is not empty %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-server text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Nameservers ({{ whoisData.nameservers|length }})
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="space-y-1.5">
+                    {% for ns in whoisData.nameservers %}
+                    <div class="flex items-center p-2 bg-gray-50 dark:bg-slate-700 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors">
+                        <div class="w-6 h-6 bg-teal-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
+                            {{ loop.index }}
+                        </div>
+                        <p class="font-mono text-xs text-gray-800 dark:text-slate-200">{{ ns }}</p>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+        <!-- Domain Status -->
+        {% if domain.parsedStatuses is not empty %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-info-circle text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Domain Status ({{ domain.parsedStatuses|length }})
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="flex flex-wrap gap-1.5">
+                    {% for status in domain.parsedStatuses %}
+                    <span class="px-2 py-1 bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400 rounded text-xs font-medium" title="{{ status }}">
+                        {{ status }}
+                    </span>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+    </div>
+
+    <!-- RIGHT COLUMN -->
+    <div class="space-y-3">
+        
+        <!-- Notification Group -->
+        {% if domain.group_name is not empty %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-bell text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Notification Group
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="flex items-center mb-3">
+                    <div class="w-10 h-10 bg-green-100 dark:bg-green-500/10 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-users text-green-600 dark:text-green-400"></i>
+                    </div>
+                    <div>
+                        <p class="font-semibold text-sm text-gray-900 dark:text-white">{{ domain.group_name }}</p>
+                        {% if domain.channels is not empty %}
+                        <p class="text-xs text-gray-600 dark:text-slate-400">
+                            {{ domain.activeChannelCount|default(0) }} / {{ domain.channels|length }} channels active
+                        </p>
+                        {% endif %}
+                    </div>
+                </div>
+                {% if domain.channels is not empty %}
+                <div class="grid grid-cols-2 gap-2">
+                    {% for channel in domain.channels %}
+                    <div class="flex items-center p-2 rounded {{ channel.is_active ? 'bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-800' : 'bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-700' }}">
+                        <i class="fas fa-{{ channel.is_active ? 'check-circle text-green-600 dark:text-green-400' : 'times-circle text-gray-400 dark:text-slate-500' }} mr-2 text-xs"></i>
+                        <span class="text-xs font-medium text-gray-700 dark:text-slate-300">{{ channel.channel_type|capitalize }}</span>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        {% else %}
+        <div class="bg-orange-50 dark:bg-orange-500/10 rounded-lg border border-orange-200 dark:border-orange-800 p-4">
+            <div class="flex items-start mb-2">
+                <i class="fas fa-exclamation-triangle text-orange-500 dark:text-orange-400 mr-2 mt-0.5"></i>
+                <div>
+                    <h3 class="text-xs font-semibold text-gray-900 dark:text-white">No Group Assigned</h3>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">Won't receive notifications</p>
+                </div>
+            </div>
+            <a href="/domains/{{ domain.id }}/edit?from=/domains/{{ domain.id }}" class="block w-full text-center px-3 py-1.5 bg-orange-500 text-white text-xs rounded-lg hover:bg-orange-600 transition-colors font-medium">
+                <i class="fas fa-plus mr-1"></i>
+                Assign Group
+            </a>
+        </div>
+        {% endif %}
+
+        <!-- Notes Section -->
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-sticky-note text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Notes
+                </h3>
+            </div>
+            <div class="p-4">
+                <form method="POST" action="/domains/{{ domain.id }}/update-notes" id="notes-form">
+                    {{ csrf_field() }}
+                    <textarea 
+                        name="notes" 
+                        id="notes-textarea"
+                        rows="6" 
+                        class="w-full px-3 py-2 text-xs border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                        placeholder="Add notes about this domain...">{{ domain.notes|default('') }}</textarea>
+                    
+                    <div class="flex gap-2 mt-3">
+                        <button 
+                            type="submit" 
+                            class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition-colors font-medium">
+                            <i class="fas fa-save mr-1.5"></i>
+                            Update Notes
+                        </button>
+                        <button 
+                            type="button" 
+                            onclick="resetNotes()" 
+                            class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-xs rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
+                            <i class="fas fa-times mr-1.5"></i>
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Notification History -->
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-history text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Notification History ({{ logs|length }})
+                </h3>
+            </div>
+            <div class="overflow-hidden">
+                {% if logs is empty %}
+                <div class="p-8 text-center">
+                    <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-3xl mb-2"></i>
+                    <p class="text-xs text-gray-500 dark:text-slate-400">No notifications sent yet</p>
+                </div>
+                {% else %}
+                <div class="max-h-96 overflow-y-auto">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700 text-xs">
+                        <thead class="bg-gray-50 dark:bg-slate-900 sticky top-0">
+                            <tr>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Channel</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Status</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Date</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Message</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                            {% for log in logs %}
+                            <tr class="hover:bg-gray-50 dark:hover:bg-slate-700">
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    <span class="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">
+                                        {{ log.channel_type|capitalize }}
+                                    </span>
+                                </td>
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    {% set logStatusClass = log.status == 'sent' ? 'bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400' : 'bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400' %}
+                                    <span class="px-2 py-0.5 rounded text-xs font-medium {{ logStatusClass }}">
+                                        {{ log.status|capitalize }}
+                                    </span>
+                                </td>
+                                <td class="px-3 py-2 whitespace-nowrap text-gray-600 dark:text-slate-400">{{ log.sent_at|date('M j, H:i') }}</td>
+                                <td class="px-3 py-2 text-gray-700 dark:text-slate-300 max-w-xs truncate" title="{{ log.message }}">
+                                    {{ log.message }}
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Raw WHOIS Data (Collapsible) -->
+        {% if domain.whois_data is not empty %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <button onclick="toggleWhoisData()" class="w-full px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 text-left hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center justify-between">
+                    <span class="flex items-center">
+                        <i class="fas fa-code text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                        Raw WHOIS Data
+                    </span>
+                    <i class="fas fa-chevron-down text-gray-400 dark:text-slate-500 text-xs transition-transform" id="whois-chevron"></i>
+                </h3>
+            </button>
+            <div id="whois-data" class="hidden p-4 bg-gray-900 max-h-64 overflow-y-auto">
+                <pre class="text-xs text-green-400 font-mono">{{ whoisData|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
+            </div>
+        </div>
+        {% endif %}
+
+    </div>
+
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+function toggleWhoisData() {
+    const dataDiv = document.getElementById('whois-data');
+    const chevron = document.getElementById('whois-chevron');
+    dataDiv.classList.toggle('hidden');
+    chevron.classList.toggle('rotate-180');
+}
+
+function resetNotes() {
+    const originalNotes = {{ domain.notes|default('')|json_encode|raw }};
+    document.getElementById('notes-textarea').value = originalNotes;
+}
+</script>
+{% endblock %}
diff --git a/app/Views/errors/404.php b/app/Views/errors/404.twig
similarity index 93%
rename from app/Views/errors/404.php
rename to app/Views/errors/404.twig
index b72bb9d..114ae73 100644
--- a/app/Views/errors/404.php
+++ b/app/Views/errors/404.twig
@@ -5,10 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>404 - Page Not Found</title>
     
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    
-    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
     <script>
@@ -29,19 +26,16 @@
 <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-6">
     <div class="max-w-2xl w-full">
         <div class="bg-white rounded-2xl shadow-2xl p-12 text-center">
-            <!-- 404 Icon -->
             <div class="mb-8">
                 <i class="fas fa-exclamation-triangle text-yellow-500 text-8xl mb-4 animate-pulse"></i>
             </div>
             
-            <!-- Error Message -->
             <h1 class="text-9xl font-bold text-gray-800 mb-4">404</h1>
             <h2 class="text-3xl font-bold text-gray-700 mb-4">Page Not Found</h2>
             <p class="text-gray-600 text-lg mb-8 leading-relaxed">
                 Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
             </p>
             
-            <!-- Action Buttons -->
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <a href="/" class="inline-flex items-center justify-center px-8 py-4 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                     <i class="fas fa-home mr-2"></i>
@@ -53,7 +47,6 @@
                 </button>
             </div>
             
-            <!-- Helpful Links -->
             <div class="mt-12 pt-8 border-t border-gray-200">
                 <p class="text-sm text-gray-500 mb-4">Quick Links:</p>
                 <div class="flex flex-wrap justify-center gap-4">
@@ -73,11 +66,10 @@
             </div>
         </div>
         
-        <!-- Footer -->
         <div class="text-center mt-8">
             <p class="text-gray-600">
                 <i class="fas fa-globe text-primary"></i>
-                <span class="ml-2"><a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a> © <?= date('Y') ?></span>
+                <span class="ml-2"><a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a> &copy; {{ "now"|date("Y") }}</span>
             </p>
         </div>
     </div>
diff --git a/app/Views/errors/500.php b/app/Views/errors/500.twig
similarity index 89%
rename from app/Views/errors/500.php
rename to app/Views/errors/500.twig
index 4241f2f..7f8af42 100644
--- a/app/Views/errors/500.php
+++ b/app/Views/errors/500.twig
@@ -5,10 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>500 - Internal Server Error</title>
     
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    
-    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
     <script>
@@ -29,20 +26,17 @@
 <body class="bg-gradient-to-br from-red-50 to-orange-100 min-h-screen flex items-center justify-center p-6">
     <div class="max-w-2xl w-full">
         <div class="bg-white rounded-2xl shadow-2xl p-12 text-center">
-            <!-- Error Icon -->
             <div class="mb-8">
                 <i class="fas fa-exclamation-circle text-red-500 text-8xl mb-4"></i>
             </div>
             
-            <!-- Error Message -->
             <h1 class="text-9xl font-bold text-gray-800 mb-4">500</h1>
             <h2 class="text-3xl font-bold text-gray-700 mb-4">Internal Server Error</h2>
             <p class="text-gray-600 text-lg mb-8 leading-relaxed">
                 Oops! Something went wrong on our end. We're working to fix the issue.
             </p>
             
-            <!-- Error Reference ID -->
-            <?php if (!empty($error_id)): ?>
+            {% if error_id is defined and error_id %}
             <div class="bg-blue-50 border border-blue-200 rounded-lg p-5 mb-8">
                 <div class="flex items-center justify-center space-x-3">
                     <div class="flex-shrink-0">
@@ -52,7 +46,7 @@
                         <p class="text-sm font-medium text-gray-700 mb-1">Error Reference ID:</p>
                         <div class="flex items-center space-x-2">
                             <code class="text-lg font-mono font-bold text-primary bg-white px-3 py-1 rounded border border-blue-200">
-                                <?= htmlspecialchars($error_id) ?>
+                                {{ error_id }}
                             </code>
                             <button onclick="copyErrorId()" 
                                     class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
@@ -67,9 +61,8 @@
                     </div>
                 </div>
             </div>
-            <?php endif; ?>
+            {% endif %}
             
-            <!-- Action Buttons -->
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <a href="/" class="inline-flex items-center justify-center px-8 py-4 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                     <i class="fas fa-home mr-2"></i>
@@ -85,7 +78,6 @@
                 </button>
             </div>
             
-            <!-- Helpful Links -->
             <div class="mt-12 pt-8 border-t border-gray-200">
                 <p class="text-sm text-gray-500 mb-4">Quick Links:</p>
                 <div class="flex flex-wrap justify-center gap-4">
@@ -101,41 +93,39 @@
                         <i class="fas fa-search mr-1"></i>
                         WHOIS Lookup
                     </a>
-                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
+                    {% if auth is defined and auth.isAdmin|default(false) %}
                     <a href="/settings" class="text-primary hover:text-primary-dark transition-colors duration-150">
                         <i class="fas fa-cog mr-1"></i>
                         Settings
                     </a>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
             </div>
             
-            <!-- Support Info -->
             <div class="mt-8 bg-gray-50 rounded-lg p-4">
                 <p class="text-sm text-gray-600">
                     <i class="fas fa-life-ring text-primary mr-1"></i>
                     If this problem persists, please contact your system administrator
-                    <?php if (!empty($error_id)): ?>
+                    {% if error_id is defined and error_id %}
                         and provide the error reference ID above.
-                    <?php else: ?>
+                    {% else %}
                         .
-                    <?php endif; ?>
+                    {% endif %}
                 </p>
             </div>
         </div>
         
-        <!-- Footer -->
         <div class="text-center mt-8">
             <p class="text-gray-600">
                 <i class="fas fa-globe text-primary"></i>
-                <span class="ml-2">Domain Monitor &copy; <?= date('Y') ?></span>
+                <span class="ml-2">Domain Monitor &copy; {{ "now"|date("Y") }}</span>
             </p>
         </div>
     </div>
 
     <script>
         function copyErrorId() {
-            const errorId = '<?= htmlspecialchars($error_id ?? '') ?>';
+            const errorId = {{ (error_id|default(''))|json_encode|raw }};
             
             if (navigator.clipboard && window.isSecureContext) {
                 navigator.clipboard.writeText(errorId).then(() => {
@@ -184,4 +174,3 @@
     </script>
 </body>
 </html>
-
diff --git a/app/Views/errors/admin-detail.php b/app/Views/errors/admin-detail.php
deleted file mode 100644
index 149daca..0000000
--- a/app/Views/errors/admin-detail.php
+++ /dev/null
@@ -1,572 +0,0 @@
-<?php
-$title = 'Error Details';
-$pageTitle = 'Error Details';
-$pageDescription = 'Detailed information about this error';
-$pageIcon = 'fas fa-bug';
-ob_start();
-
-$isResolved = (bool)$error['is_resolved'];
-$errorTypeShort = substr(strrchr($error['error_type'], '\\'), 1) ?: $error['error_type'];
-?>
-
-<!-- Back Navigation -->
-<div class="mb-4 flex items-center justify-between">
-    <a href="/errors" class="inline-flex items-center px-3 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
-        <i class="fas fa-arrow-left mr-2"></i>
-        Back to Error Logs
-    </a>
-    
-    <div class="flex items-center space-x-2">
-        <button onclick="copyErrorReport()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-            <i class="fas fa-clipboard mr-2"></i>
-            Copy Error Report
-        </button>
-        <?php if ($isResolved): ?>
-            <form method="POST" action="/errors/<?= htmlspecialchars($error['error_id']) ?>/unresolve" class="inline">
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
-                <button type="submit" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium">
-                    <i class="fas fa-undo mr-2"></i>
-                    Mark as Unresolved
-                </button>
-            </form>
-        <?php else: ?>
-            <button onclick="markResolved()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
-                <i class="fas fa-check mr-2"></i>
-                Mark as Resolved
-            </button>
-        <?php endif; ?>
-        
-        <button onclick="deleteError()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
-            <i class="fas fa-trash mr-2"></i>
-            Delete Error
-        </button>
-    </div>
-</div>
-
-<!-- Error Header Card -->
-<div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
-    <div class="flex items-start justify-between mb-4">
-        <div class="flex items-start">
-            <div class="flex-shrink-0 h-14 w-14 bg-red-100 rounded-lg flex items-center justify-center mr-4">
-                <i class="fas fa-bug text-red-600 text-2xl"></i>
-            </div>
-            <div>
-                <div class="flex items-center gap-3 mb-2">
-                    <h2 class="text-2xl font-semibold text-gray-900"><?= htmlspecialchars($errorTypeShort) ?></h2>
-                    <?php if ($isResolved): ?>
-                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
-                            <i class="fas fa-check-circle mr-1"></i>
-                            Resolved
-                        </span>
-                    <?php else: ?>
-                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200">
-                            <i class="fas fa-exclamation-triangle mr-1"></i>
-                            Unresolved
-                        </span>
-                    <?php endif; ?>
-                </div>
-                <p class="text-gray-600 mb-3"><?= htmlspecialchars($error['error_message']) ?></p>
-                <div class="flex items-center gap-4 text-sm text-gray-500">
-                    <div class="flex items-center">
-                        <i class="fas fa-hashtag mr-1.5"></i>
-                        <span class="font-mono font-semibold text-primary"><?= htmlspecialchars($error['error_id']) ?></span>
-                        <button onclick="copyToClipboard('<?= htmlspecialchars($error['error_id']) ?>')" class="ml-2 text-gray-400 hover:text-primary" title="Copy Error ID">
-                            <i class="fas fa-copy"></i>
-                        </button>
-                    </div>
-                    <div class="flex items-center">
-                        <i class="fas fa-redo mr-1.5"></i>
-                        <span><?= $error['occurrences'] ?? 1 ?> occurrence<?= ($error['occurrences'] ?? 1) != 1 ? 's' : '' ?></span>
-                    </div>
-                    <div class="flex items-center">
-                        <i class="far fa-clock mr-1.5"></i>
-                        <span>Last: <?= date('M d, Y H:i:s', strtotime($error['last_occurred_at'] ?? $error['occurred_at'])) ?></span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Location Info -->
-    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">File</p>
-                <p class="font-mono text-sm text-gray-900 break-all"><?= htmlspecialchars($error['error_file']) ?></p>
-            </div>
-            <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Line</p>
-                <p class="font-mono text-sm text-gray-900"><?= $error['error_line'] ?></p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Resolution Info (if resolved) -->
-<?php if ($isResolved && $error['resolved_at']): ?>
-<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
-    <div class="flex items-start">
-        <i class="fas fa-check-circle text-green-600 mt-0.5 mr-3"></i>
-        <div class="flex-1">
-            <h3 class="text-sm font-semibold text-green-900 mb-2">Resolved</h3>
-            <div class="text-sm text-green-800 space-y-1">
-                <p><strong>Date:</strong> <?= date('M d, Y H:i:s', strtotime($error['resolved_at'])) ?></p>
-                <?php if (!empty($error['notes'])): ?>
-                    <p><strong>Notes:</strong> <?= htmlspecialchars($error['notes']) ?></p>
-                <?php endif; ?>
-            </div>
-        </div>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Tabs -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-6">
-    <div class="border-b border-gray-200">
-        <nav class="-mb-px flex">
-            <button onclick="switchTab('stack-trace')" id="tab-stack-trace" class="tab-button active px-6 py-3 text-sm font-medium border-b-2 border-primary text-primary">
-                <i class="fas fa-layer-group mr-2"></i>
-                Stack Trace
-            </button>
-            <button onclick="switchTab('request')" id="tab-request" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
-                <i class="fas fa-exchange-alt mr-2"></i>
-                Request Data
-            </button>
-            <button onclick="switchTab('session')" id="tab-session" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
-                <i class="fas fa-user mr-2"></i>
-                Session Data
-            </button>
-            <button onclick="switchTab('occurrences')" id="tab-occurrences" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
-                <i class="fas fa-history mr-2"></i>
-                Occurrence Details (<?= $error['occurrences'] ?? 1 ?>)
-            </button>
-        </nav>
-    </div>
-
-    <!-- Tab Content -->
-    <div class="p-6">
-        <!-- Stack Trace Tab -->
-        <div id="content-stack-trace" class="tab-content">
-            <?php if (!empty($error['stack_trace_array'])): ?>
-                <div class="space-y-2">
-                    <?php foreach ($error['stack_trace_array'] as $index => $trace): ?>
-                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center font-semibold text-sm mr-3">
-                                    <?= $index ?>
-                                </div>
-                                <div class="flex-1 min-w-0">
-                                    <?php if (isset($trace['file'])): ?>
-                                        <p class="font-mono text-xs text-gray-600 break-all mb-1">
-                                            <?= htmlspecialchars($trace['file']) ?> 
-                                            <span class="text-primary font-semibold">line <?= $trace['line'] ?? '?' ?></span>
-                                        </p>
-                                    <?php endif; ?>
-                                    <?php if (isset($trace['function'])): ?>
-                                        <p class="font-mono text-sm text-gray-900">
-                                            <?php if (isset($trace['class'])): ?>
-                                                <span class="text-blue-600"><?= htmlspecialchars($trace['class']) ?></span><?= htmlspecialchars($trace['type']) ?>
-                                            <?php endif; ?>
-                                            <span class="text-indigo-600"><?= htmlspecialchars($trace['function']) ?></span>()
-                                        </p>
-                                    <?php endif; ?>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            <?php else: ?>
-                <p class="text-gray-500 text-center py-8">No stack trace available</p>
-            <?php endif; ?>
-        </div>
-
-        <!-- Request Data Tab -->
-        <div id="content-request" class="tab-content hidden">
-            <?php if (!empty($error['request_data'])): ?>
-                <div class="space-y-4">
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-700 mb-2">Request Info</h3>
-                        <div class="bg-gray-50 rounded-lg p-4 font-mono text-xs">
-                            <p><strong>Method:</strong> <?= htmlspecialchars($error['request_method']) ?></p>
-                            <p><strong>URI:</strong> <?= htmlspecialchars($error['request_uri']) ?></p>
-                            <p><strong>IP:</strong> <?= htmlspecialchars($error['ip_address']) ?></p>
-                            <p><strong>User Agent:</strong> <?= htmlspecialchars($error['user_agent']) ?></p>
-                        </div>
-                    </div>
-                    <?php foreach ($error['request_data'] as $key => $value): ?>
-                        <div>
-                            <h3 class="text-sm font-semibold text-gray-700 mb-2"><?= htmlspecialchars(strtoupper($key)) ?></h3>
-                            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs"><?= htmlspecialchars(json_encode($value, JSON_PRETTY_PRINT)) ?></pre>
-                        </div>
-                    <?php endforeach; ?>
-                </div>
-            <?php else: ?>
-                <p class="text-gray-500 text-center py-8">No request data available</p>
-            <?php endif; ?>
-        </div>
-
-        <!-- Session Data Tab -->
-        <div id="content-session" class="tab-content hidden">
-            <?php if (!empty($error['session_data'])): ?>
-                <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs"><?= htmlspecialchars(json_encode($error['session_data'], JSON_PRETTY_PRINT)) ?></pre>
-            <?php else: ?>
-                <p class="text-gray-500 text-center py-8">No session data available</p>
-            <?php endif; ?>
-        </div>
-
-        <!-- Occurrences Tab -->
-        <div id="content-occurrences" class="tab-content hidden">
-            <div class="space-y-4">
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                    <div class="flex items-start">
-                        <i class="fas fa-info-circle text-blue-600 mt-0.5 mr-3"></i>
-                        <div>
-                            <p class="text-sm font-semibold text-blue-900 mb-1">Error Occurrence Tracking</p>
-                            <p class="text-sm text-blue-800">
-                                This error has occurred <strong><?= $error['occurrences'] ?? 1 ?> time<?= ($error['occurrences'] ?? 1) != 1 ? 's' : '' ?></strong>.
-                                Similar errors are automatically grouped together and the occurrence count is incremented.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Occurrence Information</h3>
-                    <div class="space-y-3">
-                        <div>
-                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">First Occurred</p>
-                            <p class="text-sm text-gray-900"><?= date('M d, Y H:i:s', strtotime($error['occurred_at'])) ?></p>
-                        </div>
-                        <div>
-                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Last Occurred</p>
-                            <p class="text-sm text-gray-900"><?= date('M d, Y H:i:s', strtotime($error['last_occurred_at'] ?? $error['occurred_at'])) ?></p>
-                        </div>
-                        <div>
-                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Total Occurrences</p>
-                            <p class="text-sm text-gray-900"><?= $error['occurrences'] ?? 1 ?></p>
-                        </div>
-                        <div>
-                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Request Details</p>
-                            <p class="text-xs text-gray-600">
-                                <?= htmlspecialchars($error['request_method']) ?> 
-                                <?= htmlspecialchars($error['request_uri']) ?>
-                            </p>
-                            <p class="text-xs text-gray-600 mt-1">
-                                IP: <?= htmlspecialchars($error['ip_address']) ?>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- System Information -->
-<div class="bg-white rounded-lg border border-gray-200 p-6">
-    <h3 class="text-lg font-semibold text-gray-900 mb-4">System Information</h3>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div>
-            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">PHP Version</p>
-            <p class="text-sm text-gray-900"><?= htmlspecialchars($error['php_version']) ?></p>
-        </div>
-        <div>
-            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Memory Usage</p>
-            <p class="text-sm text-gray-900"><?= htmlspecialchars($error['memory_usage']) ?></p>
-        </div>
-        <div>
-            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">First Occurred</p>
-            <p class="text-sm text-gray-900"><?= date('M d, Y H:i:s', strtotime($error['occurred_at'])) ?></p>
-        </div>
-    </div>
-</div>
-
-<!-- Resolution Notes Modal -->
-<div id="resolutionModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-lg bg-white">
-        <div class="mt-3">
-            <!-- Modal Header -->
-            <div class="flex items-center justify-between mb-4">
-                <h3 class="text-lg font-semibold text-gray-900">
-                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
-                    Mark Error as Resolved
-                </h3>
-                <button onclick="closeResolutionModal()" class="text-gray-400 hover:text-gray-600">
-                    <i class="fas fa-times text-xl"></i>
-                </button>
-            </div>
-            
-            <!-- Modal Body -->
-            <div class="mb-4">
-                <label for="resolutionNotes" class="block text-sm font-medium text-gray-700 mb-2">
-                    Resolution Notes (Optional)
-                </label>
-                <textarea 
-                    id="resolutionNotes" 
-                    rows="4" 
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
-                    placeholder="Describe how you resolved this error or any relevant notes..."
-                ></textarea>
-                <p class="mt-1 text-xs text-gray-500">
-                    Add any details about the fix or resolution for future reference.
-                </p>
-            </div>
-            
-            <!-- Modal Footer -->
-            <div class="flex items-center justify-end gap-3">
-                <button 
-                    onclick="closeResolutionModal()" 
-                    class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium"
-                >
-                    Cancel
-                </button>
-                <button 
-                    onclick="submitResolution()" 
-                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium"
-                >
-                    <i class="fas fa-check mr-2"></i>
-                    Mark as Resolved
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-function switchTab(tabName) {
-    // Hide all tab contents
-    document.querySelectorAll('.tab-content').forEach(content => {
-        content.classList.add('hidden');
-    });
-    
-    // Remove active class from all tabs
-    document.querySelectorAll('.tab-button').forEach(button => {
-        button.classList.remove('active', 'border-primary', 'text-primary');
-        button.classList.add('border-transparent', 'text-gray-500');
-    });
-    
-    // Show selected tab content
-    document.getElementById('content-' + tabName).classList.remove('hidden');
-    
-    // Add active class to selected tab
-    const activeTab = document.getElementById('tab-' + tabName);
-    activeTab.classList.add('active', 'border-primary', 'text-primary');
-    activeTab.classList.remove('border-transparent', 'text-gray-500');
-}
-
-function copyToClipboard(text) {
-    if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(text).then(() => {
-            showCopySuccess();
-        }).catch(() => {
-            fallbackCopy(text);
-        });
-    } else {
-        fallbackCopy(text);
-    }
-}
-
-function fallbackCopy(text) {
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-999999px';
-    document.body.appendChild(textArea);
-    textArea.select();
-    try {
-        document.execCommand('copy');
-        showCopySuccess();
-    } catch (err) {
-        console.error('Copy failed:', err);
-    }
-    document.body.removeChild(textArea);
-}
-
-function copyErrorReport() {
-    const errorType = <?= json_encode($error['error_type'] ?? 'Error') ?>;
-    const errorMessage = <?= json_encode($error['error_message'] ?? 'Unknown error') ?>;
-    const errorFile = <?= json_encode($error['error_file'] ?? 'Unknown') ?>;
-    const errorLine = <?= json_encode($error['error_line'] ?? '?') ?>;
-    const errorId = <?= json_encode($error['error_id'] ?? 'N/A') ?>;
-    const phpVersion = <?= json_encode($error['php_version'] ?? 'Unknown') ?>;
-    const memoryUsage = <?= json_encode($error['memory_usage'] ?? 'Unknown') ?>;
-    const requestMethod = <?= json_encode($error['request_method'] ?? 'GET') ?>;
-    const requestUri = <?= json_encode($error['request_uri'] ?? '/') ?>;
-    const userAgent = <?= json_encode($error['user_agent'] ?? 'Unknown') ?>;
-    const ipAddress = <?= json_encode($error['ip_address'] ?? 'Unknown') ?>;
-    const occurredAt = <?= json_encode(date('Y-m-d H:i:s', strtotime($error['occurred_at']))) ?>;
-    const lastOccurredAt = <?= json_encode(date('Y-m-d H:i:s', strtotime($error['last_occurred_at'] ?? $error['occurred_at']))) ?>;
-    const occurrences = <?= json_encode($error['occurrences'] ?? 1) ?>;
-    const isResolved = <?= json_encode($isResolved) ?>;
-    const requestData = <?= json_encode($error['request_data'] ?? null) ?>;
-    const sessionData = <?= json_encode($error['session_data'] ?? null) ?>;
-
-    // Get stack trace from the rendered elements
-    const traceFrames = document.querySelectorAll('#content-stack-trace .bg-gray-50');
-    let stackTrace = 'Not available';
-    if (traceFrames.length > 0) {
-        let traceLines = [];
-        traceFrames.forEach((frame, i) => {
-            const fileLine = frame.querySelector('.font-mono.text-xs');
-            const funcLine = frame.querySelector('.font-mono.text-sm');
-            let line = '#' + i + ' ';
-            if (fileLine) line += fileLine.textContent.trim().replace(/\s+/g, ' ');
-            if (funcLine) line += ' ' + funcLine.textContent.trim().replace(/\s+/g, '');
-            traceLines.push(line);
-        });
-        stackTrace = traceLines.join('\n');
-    }
-
-    // Format request data sections
-    let requestDataText = 'Not available';
-    if (requestData && typeof requestData === 'object' && Object.keys(requestData).length > 0) {
-        let sections = [];
-        for (const [key, value] of Object.entries(requestData)) {
-            sections.push(`  [${key.toUpperCase()}]\n  ${JSON.stringify(value, null, 2).split('\n').join('\n  ')}`);
-        }
-        requestDataText = sections.join('\n\n');
-    }
-
-    // Format session data
-    let sessionDataText = 'Not available';
-    if (sessionData && typeof sessionData === 'object' && Object.keys(sessionData).length > 0) {
-        sessionDataText = '  ' + JSON.stringify(sessionData, null, 2).split('\n').join('\n  ');
-    }
-
-    const errorReport = `=== DOMAIN MONITOR ERROR REPORT ===
-
-ERROR INFORMATION:
-- Error ID: ${errorId}
-- Type: ${errorType}
-- Message: ${errorMessage}
-- Status: ${isResolved ? 'Resolved' : 'Unresolved'}
-- Occurrences: ${occurrences}
-
-LOCATION:
-- File: ${errorFile}
-- Line: ${errorLine}
-
-REQUEST DETAILS:
-- Method: ${requestMethod}
-- URI: ${requestUri}
-- IP Address: ${ipAddress}
-- User Agent: ${userAgent}
-- First Occurred: ${occurredAt}
-- Last Occurred: ${lastOccurredAt}
-
-REQUEST DATA:
-${requestDataText}
-
-SESSION DATA:
-${sessionDataText}
-
-SYSTEM INFORMATION:
-- PHP Version: ${phpVersion}
-- Memory Usage: ${memoryUsage}
-
-STACK TRACE:
-${stackTrace}
-
-=== END OF ERROR REPORT ===
-
-Reference ID: ${errorId}
-Please include this report when reporting bugs.`;
-
-    copyToClipboard(errorReport);
-}
-
-function showCopySuccess() {
-    // Use the existing toast container from messages.php
-    let container = document.getElementById('toast-container');
-    if (!container) {
-        container = document.createElement('div');
-        container.id = 'toast-container';
-        container.className = 'fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm';
-        document.body.appendChild(container);
-    }
-
-    const toast = document.createElement('div');
-    toast.className = 'toast bg-white border-l-4 border-green-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in';
-    toast.innerHTML = `
-        <div class="flex-shrink-0">
-            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                <i class="fas fa-check text-green-600 text-sm"></i>
-            </div>
-        </div>
-        <div class="ml-3 flex-1">
-            <p class="text-sm font-medium text-gray-900">Success</p>
-            <p class="text-sm text-gray-600 mt-0.5">Copied to clipboard!</p>
-        </div>
-        <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-            <i class="fas fa-times text-sm"></i>
-        </button>
-    `;
-    container.appendChild(toast);
-
-    setTimeout(() => {
-        toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
-        toast.style.opacity = '0';
-        toast.style.transform = 'translateX(100%)';
-        setTimeout(() => toast.remove(), 300);
-    }, 3000);
-}
-
-function markResolved() {
-    document.getElementById('resolutionModal').classList.remove('hidden');
-}
-
-function closeResolutionModal() {
-    document.getElementById('resolutionModal').classList.add('hidden');
-    document.getElementById('resolutionNotes').value = '';
-}
-
-function submitResolution() {
-    const notes = document.getElementById('resolutionNotes').value;
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/errors/<?= htmlspecialchars($error['error_id']) ?>/resolve';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    if (notes) {
-        const notesInput = document.createElement('input');
-        notesInput.type = 'hidden';
-        notesInput.name = 'notes';
-        notesInput.value = notes;
-        form.appendChild(notesInput);
-    }
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-function deleteError() {
-    if (!confirm('Are you sure you want to delete this error and all its occurrences? This action cannot be undone.')) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/errors/<?= htmlspecialchars($error['error_id']) ?>/delete';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
-
diff --git a/app/Views/errors/admin-detail.twig b/app/Views/errors/admin-detail.twig
new file mode 100644
index 0000000..0cf663a
--- /dev/null
+++ b/app/Views/errors/admin-detail.twig
@@ -0,0 +1,482 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Error Details' %}
+{% set pageTitle = 'Error Details' %}
+{% set pageDescription = 'Detailed information about this error' %}
+{% set pageIcon = 'fas fa-bug' %}
+
+{% set isResolved = error.is_resolved %}
+{% set errorTypeShort = error.error_type|split('\\')|last %}
+
+{% block content %}
+<!-- Back Navigation -->
+<div class="mb-4 flex items-center justify-between">
+    <a href="/errors" class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
+        <i class="fas fa-arrow-left mr-2"></i>
+        Back to Error Logs
+    </a>
+    
+    <div class="flex items-center space-x-2">
+        <button onclick="copyErrorReport()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+            <i class="fas fa-clipboard mr-2"></i>
+            Copy Error Report
+        </button>
+        {% if isResolved %}
+            <form method="POST" action="/errors/{{ error.error_id }}/unresolve" class="inline">
+                {{ csrf_field() }}
+                <button type="submit" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-undo mr-2"></i>
+                    Mark as Unresolved
+                </button>
+            </form>
+        {% else %}
+            <button onclick="markResolved()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
+                <i class="fas fa-check mr-2"></i>
+                Mark as Resolved
+            </button>
+        {% endif %}
+        
+        <button onclick="deleteError()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
+            <i class="fas fa-trash mr-2"></i>
+            Delete Error
+        </button>
+    </div>
+</div>
+
+<!-- Error Header Card -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6 mb-6">
+    <div class="flex items-start justify-between mb-4">
+        <div class="flex items-start">
+            <div class="flex-shrink-0 h-14 w-14 bg-red-100 dark:bg-red-500/10 rounded-lg flex items-center justify-center mr-4">
+                <i class="fas fa-bug text-red-600 dark:text-red-400 text-2xl"></i>
+            </div>
+            <div>
+                <div class="flex items-center gap-3 mb-2">
+                    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ errorTypeShort }}</h2>
+                    {% if isResolved %}
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400 border border-green-200 dark:border-green-500/20">
+                            <i class="fas fa-check-circle mr-1"></i>Resolved
+                        </span>
+                    {% else %}
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400 border border-orange-200 dark:border-orange-500/20">
+                            <i class="fas fa-exclamation-triangle mr-1"></i>Unresolved
+                        </span>
+                    {% endif %}
+                </div>
+                <p class="text-gray-600 dark:text-slate-400 mb-3">{{ error.error_message }}</p>
+                <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-slate-400">
+                    <div class="flex items-center">
+                        <i class="fas fa-hashtag mr-1.5"></i>
+                        <span class="font-mono font-semibold text-primary">{{ error.error_id }}</span>
+                        <button onclick="copyToClipboard('{{ error.error_id }}')" class="ml-2 text-gray-400 dark:text-slate-500 hover:text-primary" title="Copy Error ID">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center">
+                        <i class="fas fa-redo mr-1.5"></i>
+                        <span>{{ error.occurrences|default(1) }} occurrence{{ error.occurrences|default(1) != 1 ? 's' : '' }}</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i class="far fa-clock mr-1.5"></i>
+                        <span>Last: {{ (error.last_occurred_at|default(error.occurred_at))|date("M d, Y H:i:s") }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">File</p>
+                <p class="font-mono text-sm text-gray-900 dark:text-white break-all">{{ error.error_file }}</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">Line</p>
+                <p class="font-mono text-sm text-gray-900 dark:text-white">{{ error.error_line }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% if isResolved and error.resolved_at %}
+<div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg p-4 mb-6">
+    <div class="flex items-start">
+        <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5 mr-3"></i>
+        <div class="flex-1">
+            <h3 class="text-sm font-semibold text-green-900 dark:text-green-400 mb-2">Resolved</h3>
+            <div class="text-sm text-green-800 dark:text-green-300 space-y-1">
+                <p><strong>Date:</strong> {{ error.resolved_at|date("M d, Y H:i:s") }}</p>
+                {% if error.notes %}
+                    <p><strong>Notes:</strong> {{ error.notes }}</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<!-- Tabs -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden mb-6">
+    <div class="border-b border-gray-200 dark:border-slate-700">
+        <nav class="-mb-px flex">
+            <button onclick="switchTab('stack-trace')" id="tab-stack-trace" class="tab-button active px-6 py-3 text-sm font-medium border-b-2 border-primary text-primary">
+                <i class="fas fa-layer-group mr-2"></i>Stack Trace
+            </button>
+            <button onclick="switchTab('request')" id="tab-request" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600">
+                <i class="fas fa-exchange-alt mr-2"></i>Request Data
+            </button>
+            <button onclick="switchTab('session')" id="tab-session" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600">
+                <i class="fas fa-user mr-2"></i>Session Data
+            </button>
+            <button onclick="switchTab('occurrences')" id="tab-occurrences" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600">
+                <i class="fas fa-history mr-2"></i>Occurrence Details ({{ error.occurrences|default(1) }})
+            </button>
+        </nav>
+    </div>
+
+    <div class="p-6">
+        <!-- Stack Trace Tab -->
+        <div id="content-stack-trace" class="tab-content">
+            {% if error.stack_trace_array is defined and error.stack_trace_array %}
+                <div class="space-y-2">
+                    {% for index, trace in error.stack_trace_array %}
+                        <div class="bg-gray-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg p-4 hover:border-primary transition-colors">
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center font-semibold text-sm mr-3">
+                                    {{ index }}
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                    {% if trace.file is defined %}
+                                        <p class="font-mono text-xs text-gray-600 dark:text-slate-400 break-all mb-1">
+                                            {{ trace.file }} 
+                                            <span class="text-primary font-semibold">line {{ trace.line|default('?') }}</span>
+                                        </p>
+                                    {% endif %}
+                                    {% if trace.function is defined %}
+                                        <p class="font-mono text-sm text-gray-900 dark:text-white">
+                                            {% if trace.class is defined %}
+                                                <span class="text-blue-600 dark:text-blue-400">{{ trace.class }}</span>{{ trace.type }}
+                                            {% endif %}
+                                            <span class="text-indigo-600 dark:text-indigo-400">{{ trace.function }}</span>()
+                                        </p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p class="text-gray-500 dark:text-slate-400 text-center py-8">No stack trace available</p>
+            {% endif %}
+        </div>
+
+        <!-- Request Data Tab -->
+        <div id="content-request" class="tab-content hidden">
+            {% if error.request_data is defined and error.request_data %}
+                <div class="space-y-4">
+                    <div>
+                        <h3 class="text-sm font-semibold text-gray-700 dark:text-slate-300 mb-2">Request Info</h3>
+                        <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4 font-mono text-xs">
+                            <p><strong>Method:</strong> {{ error.request_method }}</p>
+                            <p><strong>URI:</strong> {{ error.request_uri }}</p>
+                            <p><strong>IP:</strong> {{ error.ip_address }}</p>
+                            <p><strong>User Agent:</strong> {{ error.user_agent }}</p>
+                        </div>
+                    </div>
+                    {% for key, value in error.request_data %}
+                        <div>
+                            <h3 class="text-sm font-semibold text-gray-700 dark:text-slate-300 mb-2">{{ key|upper }}</h3>
+                            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs">{{ value|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p class="text-gray-500 dark:text-slate-400 text-center py-8">No request data available</p>
+            {% endif %}
+        </div>
+
+        <!-- Session Data Tab -->
+        <div id="content-session" class="tab-content hidden">
+            {% if error.session_data is defined and error.session_data %}
+                <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs">{{ error.session_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
+            {% else %}
+                <p class="text-gray-500 dark:text-slate-400 text-center py-8">No session data available</p>
+            {% endif %}
+        </div>
+
+        <!-- Occurrences Tab -->
+        <div id="content-occurrences" class="tab-content hidden">
+            <div class="space-y-4">
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
+                    <div class="flex items-start">
+                        <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-0.5 mr-3"></i>
+                        <div>
+                            <p class="text-sm font-semibold text-blue-900 dark:text-blue-400 mb-1">Error Occurrence Tracking</p>
+                            <p class="text-sm text-blue-800 dark:text-blue-300">
+                                This error has occurred <strong>{{ error.occurrences|default(1) }} time{{ error.occurrences|default(1) != 1 ? 's' : '' }}</strong>.
+                                Similar errors are automatically grouped together and the occurrence count is incremented.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-gray-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg p-4">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">Occurrence Information</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">First Occurred</p>
+                            <p class="text-sm text-gray-900 dark:text-white">{{ error.occurred_at|date("M d, Y H:i:s") }}</p>
+                        </div>
+                        <div>
+                            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">Last Occurred</p>
+                            <p class="text-sm text-gray-900 dark:text-white">{{ (error.last_occurred_at|default(error.occurred_at))|date("M d, Y H:i:s") }}</p>
+                        </div>
+                        <div>
+                            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">Total Occurrences</p>
+                            <p class="text-sm text-gray-900 dark:text-white">{{ error.occurrences|default(1) }}</p>
+                        </div>
+                        <div>
+                            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">Request Details</p>
+                            <p class="text-xs text-gray-600 dark:text-slate-400">{{ error.request_method }} {{ error.request_uri }}</p>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 mt-1">IP: {{ error.ip_address }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- System Information -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
+    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">System Information</h3>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">PHP Version</p>
+            <p class="text-sm text-gray-900 dark:text-white">{{ error.php_version }}</p>
+        </div>
+        <div>
+            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">Memory Usage</p>
+            <p class="text-sm text-gray-900 dark:text-white">{{ error.memory_usage }}</p>
+        </div>
+        <div>
+            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide mb-1">First Occurred</p>
+            <p class="text-sm text-gray-900 dark:text-white">{{ error.occurred_at|date("M d, Y H:i:s") }}</p>
+        </div>
+    </div>
+</div>
+
+<!-- Resolution Notes Modal -->
+<div id="resolutionModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-lg bg-white">
+        <div class="mt-3">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-900">
+                    <i class="fas fa-check-circle text-green-600 mr-2"></i>Mark Error as Resolved
+                </h3>
+                <button onclick="closeResolutionModal()" class="text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <label for="resolutionNotes" class="block text-sm font-medium text-gray-700 mb-2">Resolution Notes (Optional)</label>
+                <textarea id="resolutionNotes" rows="4" 
+                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
+                    placeholder="Describe how you resolved this error or any relevant notes..."></textarea>
+                <p class="mt-1 text-xs text-gray-500">Add any details about the fix or resolution for future reference.</p>
+            </div>
+            <div class="flex items-center justify-end gap-3">
+                <button onclick="closeResolutionModal()" class="px-4 py-2 bg-gray-200 dark:bg-slate-700 text-gray-800 dark:text-slate-200 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors text-sm font-medium">Cancel</button>
+                <button onclick="submitResolution()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-check mr-2"></i>Mark as Resolved
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function switchTab(tabName) {
+    document.querySelectorAll('.tab-content').forEach(content => { content.classList.add('hidden'); });
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.classList.remove('active', 'border-primary', 'text-primary');
+        button.classList.add('border-transparent', 'text-gray-500', 'dark:text-slate-400');
+    });
+    document.getElementById('content-' + tabName).classList.remove('hidden');
+    const activeTab = document.getElementById('tab-' + tabName);
+    activeTab.classList.add('active', 'border-primary', 'text-primary');
+    activeTab.classList.remove('border-transparent', 'text-gray-500', 'dark:text-slate-400');
+}
+
+function copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(() => { showCopySuccess(); }).catch(() => { fallbackCopy(text); });
+    } else {
+        fallbackCopy(text);
+    }
+}
+
+function fallbackCopy(text) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.select();
+    try { document.execCommand('copy'); showCopySuccess(); } catch (err) { console.error('Copy failed:', err); }
+    document.body.removeChild(textArea);
+}
+
+function copyErrorReport() {
+    const errorType = {{ error.error_type|default('Error')|json_encode|raw }};
+    const errorMessage = {{ error.error_message|default('Unknown error')|json_encode|raw }};
+    const errorFile = {{ error.error_file|default('Unknown')|json_encode|raw }};
+    const errorLine = {{ error.error_line|default('?')|json_encode|raw }};
+    const errorId = {{ error.error_id|default('N/A')|json_encode|raw }};
+    const phpVersion = {{ error.php_version|default('Unknown')|json_encode|raw }};
+    const memoryUsage = {{ error.memory_usage|default('Unknown')|json_encode|raw }};
+    const requestMethod = {{ error.request_method|default('GET')|json_encode|raw }};
+    const requestUri = {{ error.request_uri|default('/')|json_encode|raw }};
+    const userAgent = {{ error.user_agent|default('Unknown')|json_encode|raw }};
+    const ipAddress = {{ error.ip_address|default('Unknown')|json_encode|raw }};
+    const occurredAt = {{ error.occurred_at|date("Y-m-d H:i:s")|json_encode|raw }};
+    const lastOccurredAt = {{ (error.last_occurred_at|default(error.occurred_at))|date("Y-m-d H:i:s")|json_encode|raw }};
+    const occurrences = {{ error.occurrences|default(1)|json_encode|raw }};
+    const isResolved = {{ isResolved|json_encode|raw }};
+    const requestData = {{ error.request_data|default(null)|json_encode|raw }};
+    const sessionData = {{ error.session_data|default(null)|json_encode|raw }};
+
+    const traceFrames = document.querySelectorAll('#content-stack-trace .bg-gray-50');
+    let stackTrace = 'Not available';
+    if (traceFrames.length > 0) {
+        let traceLines = [];
+        traceFrames.forEach((frame, i) => {
+            const fileLine = frame.querySelector('.font-mono.text-xs');
+            const funcLine = frame.querySelector('.font-mono.text-sm');
+            let line = '#' + i + ' ';
+            if (fileLine) line += fileLine.textContent.trim().replace(/\s+/g, ' ');
+            if (funcLine) line += ' ' + funcLine.textContent.trim().replace(/\s+/g, '');
+            traceLines.push(line);
+        });
+        stackTrace = traceLines.join('\n');
+    }
+
+    let requestDataText = 'Not available';
+    if (requestData && typeof requestData === 'object' && Object.keys(requestData).length > 0) {
+        let sections = [];
+        for (const [key, value] of Object.entries(requestData)) {
+            sections.push(`  [${key.toUpperCase()}]\n  ${JSON.stringify(value, null, 2).split('\n').join('\n  ')}`);
+        }
+        requestDataText = sections.join('\n\n');
+    }
+
+    let sessionDataText = 'Not available';
+    if (sessionData && typeof sessionData === 'object' && Object.keys(sessionData).length > 0) {
+        sessionDataText = '  ' + JSON.stringify(sessionData, null, 2).split('\n').join('\n  ');
+    }
+
+    const errorReport = `=== DOMAIN MONITOR ERROR REPORT ===
+
+ERROR INFORMATION:
+- Error ID: ${errorId}
+- Type: ${errorType}
+- Message: ${errorMessage}
+- Status: ${isResolved ? 'Resolved' : 'Unresolved'}
+- Occurrences: ${occurrences}
+
+LOCATION:
+- File: ${errorFile}
+- Line: ${errorLine}
+
+REQUEST DETAILS:
+- Method: ${requestMethod}
+- URI: ${requestUri}
+- IP Address: ${ipAddress}
+- User Agent: ${userAgent}
+- First Occurred: ${occurredAt}
+- Last Occurred: ${lastOccurredAt}
+
+REQUEST DATA:
+${requestDataText}
+
+SESSION DATA:
+${sessionDataText}
+
+SYSTEM INFORMATION:
+- PHP Version: ${phpVersion}
+- Memory Usage: ${memoryUsage}
+
+STACK TRACE:
+${stackTrace}
+
+=== END OF ERROR REPORT ===
+
+Reference ID: ${errorId}
+Please include this report when reporting bugs.`;
+
+    copyToClipboard(errorReport);
+}
+
+function showCopySuccess() {
+    let container = document.getElementById('toast-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toast-container';
+        container.className = 'fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm';
+        document.body.appendChild(container);
+    }
+    const toast = document.createElement('div');
+    toast.className = 'toast bg-white dark:bg-slate-800 border-l-4 border-green-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in';
+    toast.innerHTML = '<div class="flex-shrink-0"><div class="w-8 h-8 bg-green-100 dark:bg-green-500/10 rounded-full flex items-center justify-center"><i class="fas fa-check text-green-600 dark:text-green-400 text-sm"></i></div></div><div class="ml-3 flex-1"><p class="text-sm font-medium text-gray-900 dark:text-white">Success</p><p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">Copied to clipboard!</p></div><button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition-colors"><i class="fas fa-times text-sm"></i></button>';
+    container.appendChild(toast);
+    setTimeout(() => { toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'; toast.style.opacity = '0'; toast.style.transform = 'translateX(100%)'; setTimeout(() => toast.remove(), 300); }, 3000);
+}
+
+function markResolved() {
+    document.getElementById('resolutionModal').classList.remove('hidden');
+}
+
+function closeResolutionModal() {
+    document.getElementById('resolutionModal').classList.add('hidden');
+    document.getElementById('resolutionNotes').value = '';
+}
+
+function submitResolution() {
+    const notes = document.getElementById('resolutionNotes').value;
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/errors/{{ error.error_id }}/resolve';
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+    if (notes) {
+        const notesInput = document.createElement('input');
+        notesInput.type = 'hidden';
+        notesInput.name = 'notes';
+        notesInput.value = notes;
+        form.appendChild(notesInput);
+    }
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function deleteError() {
+    if (!confirm('Are you sure you want to delete this error and all its occurrences? This action cannot be undone.')) return;
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/errors/{{ error.error_id }}/delete';
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+    document.body.appendChild(form);
+    form.submit();
+}
+</script>
+{% endblock %}
diff --git a/app/Views/errors/admin-index.php b/app/Views/errors/admin-index.php
deleted file mode 100644
index 064656f..0000000
--- a/app/Views/errors/admin-index.php
+++ /dev/null
@@ -1,605 +0,0 @@
-<?php
-$title = 'Error Logs';
-$pageTitle = 'Error Logs';
-$pageDescription = 'Monitor and manage application errors';
-$pageIcon = 'fas fa-bug';
-ob_start();
-
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder, $filters) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $filters;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/errors?' . http_build_query($params);
-}
-
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
-
-// Get current filters
-$currentFilters = $filters ?? ['resolved' => '', 'type' => '', 'sort' => 'last_occurred_at', 'order' => 'desc'];
-?>
-
-<!-- Statistics Cards -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-    <!-- Total Errors Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Errors</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $errorStats['total_errors'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-exclamation-triangle text-red-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Unresolved Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Unresolved</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $errorStats['unresolved'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-exclamation-circle text-orange-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Last 24h Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Last 24h</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $errorStats['last_24h'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-clock text-blue-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Total Occurrences Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Occurrences</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $errorStats['total_occurrences'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-layer-group text-indigo-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Filters -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
-    <form method="GET" action="/errors" id="filter-form">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="resolved" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="">All Errors</option>
-                    <option value="0" <?= $currentFilters['resolved'] === '0' ? 'selected' : '' ?>>Unresolved Only</option>
-                    <option value="1" <?= $currentFilters['resolved'] === '1' ? 'selected' : '' ?>>Resolved Only</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Error Type</label>
-                <input type="text" name="type" value="<?= htmlspecialchars($currentFilters['type']) ?>" placeholder="e.g., PDOException" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Sort By</label>
-                <select name="sort" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="last_occurred_at" <?= $currentFilters['sort'] === 'last_occurred_at' ? 'selected' : '' ?>>Last Occurred</option>
-                    <option value="occurrences" <?= $currentFilters['sort'] === 'occurrences' ? 'selected' : '' ?>>Most Frequent</option>
-                    <option value="occurred_at" <?= $currentFilters['sort'] === 'occurred_at' ? 'selected' : '' ?>>First Occurred</option>
-                </select>
-            </div>
-            <div class="flex items-end space-x-2">
-                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                    <i class="fas fa-filter mr-2"></i>
-                    Apply
-                </button>
-                <a href="/errors" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
-                    <i class="fas fa-times mr-2"></i>
-                    Clear
-                </a>
-            </div>
-        </div>
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-    </form>
-</div>
-
-<!-- Pagination Info -->
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?></span> error(s)
-    </div>
-    
-    <form method="GET" action="/errors" class="flex items-center gap-2">
-        <!-- Preserve filters -->
-        <input type="hidden" name="resolved" value="<?= htmlspecialchars($currentFilters['resolved']) ?>">
-        <input type="hidden" name="type" value="<?= htmlspecialchars($currentFilters['type']) ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
-            <option value="10" <?= $pagination['per_page'] == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $pagination['per_page'] == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $pagination['per_page'] == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $pagination['per_page'] == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-
-<!-- Errors List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <!-- Bulk Actions Bar (shown when errors are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
-        <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
-            <div class="flex items-center gap-3 flex-wrap">
-                <div class="flex items-center gap-2">
-                    <button type="button" onclick="bulkDelete()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
-                        <i class="fas fa-trash mr-1"></i> Delete Selected
-                    </button>
-                </div>
-            </div>
-        </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
-            <i class="fas fa-times mr-1.5"></i> Clear Selection
-        </button>
-    </div>
-    <?php if (!empty($errors)): ?>
-        <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-6 py-3 text-left">
-                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 text-primary focus:ring-primary">
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Error
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Location
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Occurrences
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Last Occurred
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Status
-                        </th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($errors as $error): ?>
-                        <?php
-                        $errorTypeShort = substr(strrchr($error['error_type'], '\\'), 1) ?: $error['error_type'];
-                        $isResolved = (bool)$error['is_resolved'];
-                        ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150">
-                            <td class="px-6 py-4">
-                                <input type="checkbox" class="error-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="<?= htmlspecialchars($error['error_id']) ?>" onchange="updateBulkActions()">
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
-                                        <i class="fas fa-bug text-red-600"></i>
-                                    </div>
-                                    <div class="min-w-0 flex-1">
-                                        <div class="flex items-center gap-2 mb-1">
-                                            <span class="text-xs font-mono font-semibold text-primary"><?= htmlspecialchars($error['error_id']) ?></span>
-                                            <button onclick="copyToClipboard('<?= htmlspecialchars($error['error_id']) ?>')" class="text-gray-400 hover:text-primary" title="Copy Error ID">
-                                                <i class="fas fa-copy text-xs"></i>
-                                            </button>
-                                        </div>
-                                        <p class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($errorTypeShort) ?></p>
-                                        <p class="text-xs text-gray-600 mt-0.5 truncate" style="max-width: 300px;" title="<?= htmlspecialchars($error['error_message']) ?>">
-                                            <?= htmlspecialchars($error['error_message']) ?>
-                                        </p>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-xs">
-                                    <p class="font-mono text-gray-600 truncate" style="max-width: 200px;" title="<?= htmlspecialchars($error['error_file']) ?>">
-                                        <?= htmlspecialchars(basename($error['error_file'])) ?>
-                                    </p>
-                                    <p class="text-gray-500 mt-0.5">
-                                        <i class="fas fa-hashtag mr-1"></i>
-                                        Line <?= $error['error_line'] ?>
-                                    </p>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold <?= $error['occurrences'] >= 10 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800' ?>">
-                                    <i class="fas fa-redo mr-1"></i>
-                                    <?= $error['occurrences'] ?>×
-                                </span>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <div class="flex items-center">
-                                    <i class="far fa-clock mr-2"></i>
-                                    <?= date('M d, H:i', strtotime($error['last_occurred_at'])) ?>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if ($isResolved): ?>
-                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
-                                        <i class="fas fa-check-circle mr-1"></i>
-                                        Resolved
-                                    </span>
-                                <?php else: ?>
-                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200">
-                                        <i class="fas fa-exclamation-triangle mr-1"></i>
-                                        Unresolved
-                                    </span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <div class="flex items-center justify-end space-x-2">
-                                    <a href="/errors/<?= htmlspecialchars($error['error_id']) ?>" class="text-blue-600 hover:text-blue-800" title="View Details">
-                                        <i class="fas fa-eye"></i>
-                                    </a>
-                                    <?php if (!$isResolved): ?>
-                                        <button onclick="markResolved('<?= htmlspecialchars($error['error_id']) ?>')" class="text-green-600 hover:text-green-800" title="Mark as Resolved">
-                                            <i class="fas fa-check"></i>
-                                        </button>
-                                    <?php endif; ?>
-                                    <button onclick="deleteError('<?= htmlspecialchars($error['error_id']) ?>')" class="text-red-600 hover:text-red-800" title="Delete Error">
-                                        <i class="fas fa-trash"></i>
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-    <?php else: ?>
-        <div class="text-center py-12 px-6">
-            <div class="mb-4">
-                <i class="fas fa-check-circle text-green-500 text-6xl"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Errors Found</h3>
-            <p class="text-sm text-gray-500 mb-4">
-                <?php if (!empty($currentFilters['resolved']) || !empty($currentFilters['type'])): ?>
-                    No errors match your filter criteria.
-                <?php else: ?>
-                    Great! Your application is running smoothly.
-                <?php endif; ?>
-            </p>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Pagination Controls -->
-<?php if ($pagination['total_pages'] > 1): ?>
-<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?></span>
-    </div>
-    
-    <div class="flex items-center gap-1">
-        <?php
-        $currentPage = $pagination['current_page'];
-        $totalPages = $pagination['total_pages'];
-        
-        function paginationUrl($page, $filters, $perPage) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/errors?' . http_build_query($params);
-        }
-        ?>
-        
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
-                <i class="fas fa-angle-double-left"></i>
-            </a>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
-                <i class="fas fa-angle-left"></i> Previous
-            </a>
-        <?php endif; ?>
-        
-        <?php
-        $range = 2;
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">1</a>';
-            if ($start > 2) echo '<span class="px-2 text-gray-500">...</span>';
-        }
-        
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">' . $i . '</a>';
-            }
-        }
-        
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) echo '<span class="px-2 text-gray-500">...</span>';
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
-                Next <i class="fas fa-angle-right"></i>
-            </a>
-            <a href="<?= paginationUrl($totalPages, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
-                <i class="fas fa-angle-double-right"></i>
-            </a>
-        <?php endif; ?>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Resolution Notes Modal -->
-<div id="resolutionModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-lg bg-white">
-        <div class="mt-3">
-            <!-- Modal Header -->
-            <div class="flex items-center justify-between mb-4">
-                <h3 class="text-lg font-semibold text-gray-900">
-                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
-                    Mark Error as Resolved
-                </h3>
-                <button onclick="closeResolutionModal()" class="text-gray-400 hover:text-gray-600">
-                    <i class="fas fa-times text-xl"></i>
-                </button>
-            </div>
-            
-            <!-- Modal Body -->
-            <div class="mb-4">
-                <label for="resolutionNotes" class="block text-sm font-medium text-gray-700 mb-2">
-                    Resolution Notes (Optional)
-                </label>
-                <textarea 
-                    id="resolutionNotes" 
-                    rows="4" 
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
-                    placeholder="Describe how you resolved this error or any relevant notes..."
-                ></textarea>
-                <p class="mt-1 text-xs text-gray-500">
-                    Add any details about the fix or resolution for future reference.
-                </p>
-            </div>
-            
-            <!-- Modal Footer -->
-            <div class="flex items-center justify-end gap-3">
-                <button 
-                    onclick="closeResolutionModal()" 
-                    class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium"
-                >
-                    Cancel
-                </button>
-                <button 
-                    onclick="submitResolution()" 
-                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium"
-                >
-                    <i class="fas fa-check mr-2"></i>
-                    Mark as Resolved
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-function copyToClipboard(text) {
-    if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(text).then(() => {
-            showCopySuccess();
-        });
-    } else {
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textArea);
-        showCopySuccess();
-    }
-}
-
-function showCopySuccess() {
-    // Use the existing toast container from messages.php
-    let container = document.getElementById('toast-container');
-    if (!container) {
-        container = document.createElement('div');
-        container.id = 'toast-container';
-        container.className = 'fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm';
-        document.body.appendChild(container);
-    }
-
-    const toast = document.createElement('div');
-    toast.className = 'toast bg-white border-l-4 border-green-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in';
-    toast.innerHTML = `
-        <div class="flex-shrink-0">
-            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                <i class="fas fa-check text-green-600 text-sm"></i>
-            </div>
-        </div>
-        <div class="ml-3 flex-1">
-            <p class="text-sm font-medium text-gray-900">Success</p>
-            <p class="text-sm text-gray-600 mt-0.5">Copied to clipboard!</p>
-        </div>
-        <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-            <i class="fas fa-times text-sm"></i>
-        </button>
-    `;
-    container.appendChild(toast);
-
-    setTimeout(() => {
-        toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
-        toast.style.opacity = '0';
-        toast.style.transform = 'translateX(100%)';
-        setTimeout(() => toast.remove(), 300);
-    }, 3000);
-}
-
-let currentErrorId = null;
-
-function markResolved(errorId) {
-    currentErrorId = errorId;
-    document.getElementById('resolutionModal').classList.remove('hidden');
-}
-
-function closeResolutionModal() {
-    document.getElementById('resolutionModal').classList.add('hidden');
-    document.getElementById('resolutionNotes').value = '';
-    currentErrorId = null;
-}
-
-function submitResolution() {
-    if (!currentErrorId) return;
-    
-    const notes = document.getElementById('resolutionNotes').value;
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/errors/' + currentErrorId + '/resolve';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    if (notes) {
-        const notesInput = document.createElement('input');
-        notesInput.type = 'hidden';
-        notesInput.name = 'notes';
-        notesInput.value = notes;
-        form.appendChild(notesInput);
-    }
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-function deleteError(errorId) {
-    if (!confirm('Are you sure you want to delete this error and all its occurrences? This action cannot be undone.')) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/errors/' + errorId + '/delete';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-// Checkbox selection functions
-function toggleSelectAll(checkbox) {
-    const checkboxes = document.querySelectorAll('.error-checkbox');
-    checkboxes.forEach(cb => {
-        cb.checked = checkbox.checked;
-    });
-    updateBulkActions();
-}
-
-function updateBulkActions() {
-    const checkboxes = document.querySelectorAll('.error-checkbox:checked');
-    const bulkActions = document.getElementById('bulk-actions');
-    const selectedCount = document.getElementById('selected-count');
-    const selectAllCheckbox = document.getElementById('select-all');
-    
-    if (checkboxes.length > 0) {
-        bulkActions.classList.remove('hidden');
-        selectedCount.textContent = checkboxes.length + ' error(s) selected';
-    } else {
-        bulkActions.classList.add('hidden');
-    }
-    
-    // Update select all checkbox state
-    const allCheckboxes = document.querySelectorAll('.error-checkbox');
-    selectAllCheckbox.checked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
-    selectAllCheckbox.indeterminate = checkboxes.length > 0 && checkboxes.length < allCheckboxes.length;
-}
-
-function getSelectedErrorIds() {
-    const checkboxes = document.querySelectorAll('.error-checkbox:checked');
-    return Array.from(checkboxes).map(cb => cb.value);
-}
-
-function clearSelection() {
-    const checkboxes = document.querySelectorAll('.error-checkbox');
-    checkboxes.forEach(cb => {
-        cb.checked = false;
-    });
-    document.getElementById('select-all').checked = false;
-    updateBulkActions();
-}
-
-function bulkDelete() {
-    const errorIds = getSelectedErrorIds();
-    
-    if (errorIds.length === 0) {
-        alert('Please select at least one error to delete');
-        return;
-    }
-    
-    if (!confirm(`Are you sure you want to delete ${errorIds.length} error(s) and all their occurrences? This action cannot be undone.`)) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/errors/bulk-delete';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    const idsInput = document.createElement('input');
-    idsInput.type = 'hidden';
-    idsInput.name = 'error_ids';
-    idsInput.value = JSON.stringify(errorIds);
-    form.appendChild(idsInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
-
diff --git a/app/Views/errors/admin-index.twig b/app/Views/errors/admin-index.twig
new file mode 100644
index 0000000..24a52ad
--- /dev/null
+++ b/app/Views/errors/admin-index.twig
@@ -0,0 +1,481 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Error Logs' %}
+{% set pageTitle = 'Error Logs' %}
+{% set pageDescription = 'Monitor and manage application errors' %}
+{% set pageIcon = 'fas fa-bug' %}
+
+{% set currentFilters = filters|default({resolved: '', type: '', sort: 'last_occurred_at', order: 'desc'}) %}
+
+{% block content %}
+<!-- Statistics Cards -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Total Errors</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ errorStats.total_errors|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-red-50 dark:bg-red-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Unresolved</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ errorStats.unresolved|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-orange-50 dark:bg-orange-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-exclamation-circle text-orange-600 dark:text-orange-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Last 24h</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ errorStats.last_24h|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-clock text-blue-600 dark:text-blue-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Occurrences</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ errorStats.total_occurrences|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-layer-group text-indigo-600 dark:text-indigo-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Filters -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
+    <form method="GET" action="/errors" id="filter-form">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="resolved" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="">All Errors</option>
+                    <option value="0" {{ currentFilters.resolved == '0' ? 'selected' : '' }}>Unresolved Only</option>
+                    <option value="1" {{ currentFilters.resolved == '1' ? 'selected' : '' }}>Resolved Only</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Error Type</label>
+                <input type="text" name="type" value="{{ currentFilters.type }}" placeholder="e.g., PDOException" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Sort By</label>
+                <select name="sort" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="last_occurred_at" {{ currentFilters.sort == 'last_occurred_at' ? 'selected' : '' }}>Last Occurred</option>
+                    <option value="occurrences" {{ currentFilters.sort == 'occurrences' ? 'selected' : '' }}>Most Frequent</option>
+                    <option value="occurred_at" {{ currentFilters.sort == 'occurred_at' ? 'selected' : '' }}>First Occurred</option>
+                </select>
+            </div>
+            <div class="flex items-end space-x-2">
+                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                    <i class="fas fa-filter mr-2"></i>
+                    Apply
+                </button>
+                <a href="/errors" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-times mr-2"></i>
+                    Clear
+                </a>
+            </div>
+        </div>
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+    </form>
+</div>
+
+<!-- Pagination Info -->
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from }}</span> to 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to }}</span> of 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total }}</span> error(s)
+    </div>
+    
+    <form method="GET" action="/errors" class="flex items-center gap-2">
+        <input type="hidden" name="resolved" value="{{ currentFilters.resolved }}">
+        <input type="hidden" name="type" value="{{ currentFilters.type }}">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+        
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+            <option value="10" {{ pagination.per_page == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ pagination.per_page == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ pagination.per_page == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ pagination.per_page == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+
+<!-- Errors List -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/20 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
+            <div class="flex items-center gap-3 flex-wrap">
+                <div class="flex items-center gap-2">
+                    <button type="button" onclick="bulkDelete()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
+                        <i class="fas fa-trash mr-1"></i> Delete Selected
+                    </button>
+                </div>
+            </div>
+        </div>
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
+            <i class="fas fa-times mr-1.5"></i> Clear Selection
+        </button>
+    </div>
+    {% if errors is defined and errors is not empty %}
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left">
+                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Error</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Location</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Occurrences</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Last Occurred</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Status</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for error in errors %}
+                        {% set errorTypeShort = error.error_type|split('\\')|last %}
+                        {% set isResolved = error.is_resolved %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <td class="px-6 py-4">
+                                <input type="checkbox" class="error-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" value="{{ error.error_id }}" onchange="updateBulkActions()">
+                            </td>
+                            <td class="px-6 py-4">
+                                <div class="flex items-start">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-red-100 dark:bg-red-500/10 rounded-lg flex items-center justify-center mr-3">
+                                        <i class="fas fa-bug text-red-600 dark:text-red-400"></i>
+                                    </div>
+                                    <div class="min-w-0 flex-1">
+                                        <div class="flex items-center gap-2 mb-1">
+                                            <span class="text-xs font-mono font-semibold text-primary">{{ error.error_id }}</span>
+                                            <button onclick="copyToClipboard('{{ error.error_id }}')" class="text-gray-400 dark:text-slate-500 hover:text-primary" title="Copy Error ID">
+                                                <i class="fas fa-copy text-xs"></i>
+                                            </button>
+                                        </div>
+                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ errorTypeShort }}</p>
+                                        <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5 truncate" style="max-width: 300px;" title="{{ error.error_message }}">
+                                            {{ error.error_message }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                <div class="text-xs">
+                                    <p class="font-mono text-gray-600 dark:text-slate-400 truncate" style="max-width: 200px;" title="{{ error.error_file }}">
+                                        {{ error.error_file|split('/')|last|split('\\')|last }}
+                                    </p>
+                                    <p class="text-gray-500 dark:text-slate-500 mt-0.5">
+                                        <i class="fas fa-hashtag mr-1"></i>
+                                        Line {{ error.error_line }}
+                                    </p>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ error.occurrences >= 10 ? 'bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400' : 'bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-300' }}">
+                                    <i class="fas fa-redo mr-1"></i>
+                                    {{ error.occurrences }}&times;
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                <div class="flex items-center">
+                                    <i class="far fa-clock mr-2"></i>
+                                    {{ error.last_occurred_at|date("M d, H:i") }}
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if isResolved %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400 border border-green-200 dark:border-green-500/20">
+                                        <i class="fas fa-check-circle mr-1"></i>
+                                        Resolved
+                                    </span>
+                                {% else %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400 border border-orange-200 dark:border-orange-500/20">
+                                        <i class="fas fa-exclamation-triangle mr-1"></i>
+                                        Unresolved
+                                    </span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <div class="flex items-center justify-end space-x-2">
+                                    <a href="/errors/{{ error.error_id }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" title="View Details">
+                                        <i class="fas fa-eye"></i>
+                                    </a>
+                                    {% if not isResolved %}
+                                        <button onclick="markResolved('{{ error.error_id }}')" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300" title="Mark as Resolved">
+                                            <i class="fas fa-check"></i>
+                                        </button>
+                                    {% endif %}
+                                    <button onclick="deleteError('{{ error.error_id }}')" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" title="Delete Error">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    {% else %}
+        <div class="text-center py-12 px-6">
+            <div class="mb-4">
+                <i class="fas fa-check-circle text-green-500 dark:text-green-400 text-6xl"></i>
+            </div>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Errors Found</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">
+                {% if currentFilters.resolved or currentFilters.type %}
+                    No errors match your filter criteria.
+                {% else %}
+                    Great! Your application is running smoothly.
+                {% endif %}
+            </p>
+        </div>
+    {% endif %}
+</div>
+
+<!-- Pagination Controls -->
+{% if pagination.total_pages > 1 %}
+        <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.current_page }}</span> of 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total_pages }}</span>
+    </div>
+    
+    <div class="flex items-center gap-1">
+        {% if pagination.current_page > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">
+                <i class="fas fa-angle-double-left"></i>
+            </a>
+            <a href="{{ pagination_url(pagination.current_page - 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">
+                <i class="fas fa-angle-left"></i> Previous
+            </a>
+        {% endif %}
+        
+        {% set range = 2 %}
+        {% set startPage = max(1, pagination.current_page - range) %}
+        {% set endPage = min(pagination.total_pages, pagination.current_page + range) %}
+        
+        {% if startPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">1</a>
+            {% if startPage > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+        
+        {% for i in startPage..endPage %}
+            {% if i == pagination.current_page %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+        
+        {% if endPage < pagination.total_pages %}
+            {% if endPage < pagination.total_pages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(pagination.total_pages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">{{ pagination.total_pages }}</a>
+        {% endif %}
+        
+        {% if pagination.current_page < pagination.total_pages %}
+            <a href="{{ pagination_url(pagination.current_page + 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">
+                Next <i class="fas fa-angle-right"></i>
+            </a>
+            <a href="{{ pagination_url(pagination.total_pages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 transition-colors">
+                <i class="fas fa-angle-double-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+<!-- Resolution Notes Modal -->
+<div id="resolutionModal" class="hidden fixed inset-0 bg-gray-600/50 dark:bg-black/50 overflow-y-auto h-full w-full z-50">
+    <div class="relative top-20 mx-auto p-5 border border-gray-200 dark:border-slate-700 w-full max-w-md shadow-lg rounded-lg bg-white dark:bg-slate-800">
+        <div class="mt-3">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                    <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-2"></i>
+                    Mark Error as Resolved
+                </h3>
+                <button onclick="closeResolutionModal()" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <label for="resolutionNotes" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
+                    Resolution Notes (Optional)
+                </label>
+                <textarea id="resolutionNotes" rows="4" 
+                    class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
+                    placeholder="Describe how you resolved this error or any relevant notes..."></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-slate-400">Add any details about the fix or resolution for future reference.</p>
+            </div>
+            <div class="flex items-center justify-end gap-3">
+                <button onclick="closeResolutionModal()" class="px-4 py-2 bg-gray-200 dark:bg-slate-700 text-gray-800 dark:text-slate-200 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors text-sm font-medium">Cancel</button>
+                <button onclick="submitResolution()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-check mr-2"></i>Mark as Resolved
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(() => { showCopySuccess(); });
+    } else {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        showCopySuccess();
+    }
+}
+
+function showCopySuccess() {
+    let container = document.getElementById('toast-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toast-container';
+        container.className = 'fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm';
+        document.body.appendChild(container);
+    }
+    const toast = document.createElement('div');
+    toast.className = 'toast bg-white dark:bg-slate-800 border-l-4 border-green-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in';
+    toast.innerHTML = '<div class="flex-shrink-0"><div class="w-8 h-8 bg-green-100 dark:bg-green-500/10 rounded-full flex items-center justify-center"><i class="fas fa-check text-green-600 dark:text-green-400 text-sm"></i></div></div><div class="ml-3 flex-1"><p class="text-sm font-medium text-gray-900 dark:text-white">Success</p><p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">Copied to clipboard!</p></div><button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition-colors"><i class="fas fa-times text-sm"></i></button>';
+    container.appendChild(toast);
+    setTimeout(() => { toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'; toast.style.opacity = '0'; toast.style.transform = 'translateX(100%)'; setTimeout(() => toast.remove(), 300); }, 3000);
+}
+
+let currentErrorId = null;
+
+function markResolved(errorId) {
+    currentErrorId = errorId;
+    document.getElementById('resolutionModal').classList.remove('hidden');
+}
+
+function closeResolutionModal() {
+    document.getElementById('resolutionModal').classList.add('hidden');
+    document.getElementById('resolutionNotes').value = '';
+    currentErrorId = null;
+}
+
+function submitResolution() {
+    if (!currentErrorId) return;
+    const notes = document.getElementById('resolutionNotes').value;
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/errors/' + currentErrorId + '/resolve';
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+    if (notes) {
+        const notesInput = document.createElement('input');
+        notesInput.type = 'hidden';
+        notesInput.name = 'notes';
+        notesInput.value = notes;
+        form.appendChild(notesInput);
+    }
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function deleteError(errorId) {
+    if (!confirm('Are you sure you want to delete this error and all its occurrences? This action cannot be undone.')) return;
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/errors/' + errorId + '/delete';
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function toggleSelectAll(checkbox) {
+    document.querySelectorAll('.error-checkbox').forEach(cb => { cb.checked = checkbox.checked; });
+    updateBulkActions();
+}
+
+function updateBulkActions() {
+    const checkboxes = document.querySelectorAll('.error-checkbox:checked');
+    const bulkActions = document.getElementById('bulk-actions');
+    const selectedCount = document.getElementById('selected-count');
+    const selectAllCheckbox = document.getElementById('select-all');
+    if (checkboxes.length > 0) {
+        bulkActions.classList.remove('hidden');
+        selectedCount.textContent = checkboxes.length + ' error(s) selected';
+    } else {
+        bulkActions.classList.add('hidden');
+    }
+    const allCheckboxes = document.querySelectorAll('.error-checkbox');
+    selectAllCheckbox.checked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
+    selectAllCheckbox.indeterminate = checkboxes.length > 0 && checkboxes.length < allCheckboxes.length;
+}
+
+function getSelectedErrorIds() {
+    return Array.from(document.querySelectorAll('.error-checkbox:checked')).map(cb => cb.value);
+}
+
+function clearSelection() {
+    document.querySelectorAll('.error-checkbox').forEach(cb => { cb.checked = false; });
+    document.getElementById('select-all').checked = false;
+    updateBulkActions();
+}
+
+function bulkDelete() {
+    const errorIds = getSelectedErrorIds();
+    if (errorIds.length === 0) { alert('Please select at least one error to delete'); return; }
+    if (!confirm(`Are you sure you want to delete ${errorIds.length} error(s) and all their occurrences? This action cannot be undone.`)) return;
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/errors/bulk-delete';
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+    const idsInput = document.createElement('input');
+    idsInput.type = 'hidden';
+    idsInput.name = 'error_ids';
+    idsInput.value = JSON.stringify(errorIds);
+    form.appendChild(idsInput);
+    document.body.appendChild(form);
+    form.submit();
+}
+</script>
+{% endblock %}
diff --git a/app/Views/errors/debug.php b/app/Views/errors/debug.twig
similarity index 77%
rename from app/Views/errors/debug.php
rename to app/Views/errors/debug.twig
index 2df6062..371f442 100644
--- a/app/Views/errors/debug.php
+++ b/app/Views/errors/debug.twig
@@ -3,12 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Error - <?= htmlspecialchars($error_type ?? 'Application Error') ?></title>
+    <title>Debug Error - {{ error_type|default('Application Error') }}</title>
     
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    
-    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
     <script>
@@ -28,28 +25,15 @@
     </script>
     
     <style>
-        body {
-            background-color: #f8f9fa;
-        }
+        body { background-color: #f8f9fa; }
         
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         }
-        
-        .animate-fade-in {
-            animation: fadeIn 0.4s ease-out;
-        }
-        
-        .code-block {
-            background-color: #1e1e1e;
-            color: #d4d4d4;
-        }
-        
-        .line-number {
-            color: #858585;
-            user-select: none;
-        }
+        .animate-fade-in { animation: fadeIn 0.4s ease-out; }
+        .code-block { background-color: #1e1e1e; color: #d4d4d4; }
+        .line-number { color: #858585; user-select: none; }
     </style>
 </head>
 <body class="min-h-screen p-6">
@@ -84,18 +68,16 @@
         <!-- Primary Error Card -->
         <div class="bg-white rounded-lg shadow-sm border-l-4 border-red-500 mb-6 animate-fade-in">
             <div class="p-6">
-                <!-- Error Header -->
                 <div class="flex items-start mb-6">
                     <div class="flex-shrink-0 w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mr-4">
                         <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                     </div>
                     <div class="flex-1">
                         <h2 class="text-2xl font-bold text-gray-900 mb-2">
-                            <?= htmlspecialchars($error_type ?? 'Error') ?>
+                            {{ error_type|default('Error') }}
                         </h2>
-                        <p class="text-lg text-gray-700 mb-4"><?= htmlspecialchars($error_message ?? 'An error occurred') ?></p>
+                        <p class="text-lg text-gray-700 mb-4">{{ error_message|default('An error occurred') }}</p>
                         
-                        <!-- Error Location - Most Critical -->
                         <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                             <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center">
                                 <i class="fas fa-map-marker-alt text-red-500 mr-2 text-xs"></i>
@@ -105,12 +87,12 @@
                                 <div>
                                     <span class="text-xs font-medium text-gray-600">File:</span>
                                     <code class="block mt-1 bg-white px-3 py-2 rounded text-sm text-gray-800 border border-gray-200 font-mono break-all">
-                                        <?= htmlspecialchars($error_file ?? 'Unknown') ?>
+                                        {{ error_file|default('Unknown') }}
                                     </code>
                                 </div>
                                 <div class="flex items-center">
                                     <span class="text-xs font-medium text-gray-600 mr-2">Line:</span>
-                                    <span class="font-mono text-red-600 font-bold text-lg"><?= htmlspecialchars($error_line ?? '?') ?></span>
+                                    <span class="font-mono text-red-600 font-bold text-lg">{{ error_line|default('?') }}</span>
                                 </div>
                             </div>
                         </div>
@@ -119,67 +101,63 @@
 
                 <!-- Quick Info Grid -->
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <!-- Error Reference ID -->
                     <div class="bg-blue-50 rounded-lg border border-blue-200 p-4">
                         <div class="flex items-center justify-between mb-2">
                             <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Error ID</h4>
-                            <button onclick="copyToClipboard('<?= htmlspecialchars($error_id ?? 'N/A') ?>')" 
+                            <button onclick="copyToClipboard('{{ error_id|default('N/A') }}')" 
                                     class="text-primary hover:text-primary-dark" title="Copy Error ID">
                                 <i class="fas fa-copy text-xs"></i>
                             </button>
                         </div>
-                        <code class="text-sm font-mono font-bold text-primary"><?= htmlspecialchars($error_id ?? 'N/A') ?></code>
+                        <code class="text-sm font-mono font-bold text-primary">{{ error_id|default('N/A') }}</code>
                         <p class="text-xs text-gray-600 mt-2">
                             <i class="fas fa-info-circle mr-1"></i>
                             Use for bug reports
                         </p>
                     </div>
 
-                    <!-- Request Info -->
                     <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
                         <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Request</h4>
                         <div class="space-y-1">
                             <p class="text-sm">
-                                <span class="font-mono font-bold text-gray-900"><?= htmlspecialchars($request_method ?? 'GET') ?></span>
+                                <span class="font-mono font-bold text-gray-900">{{ request_method|default('GET') }}</span>
                             </p>
-                            <code class="text-xs text-gray-600 font-mono block truncate" title="<?= htmlspecialchars($request_uri ?? '/') ?>">
-                                <?= htmlspecialchars($request_uri ?? '/') ?>
+                            <code class="text-xs text-gray-600 font-mono block truncate" title="{{ request_uri|default('/') }}">
+                                {{ request_uri|default('/') }}
                             </code>
                         </div>
                     </div>
 
-                    <!-- User Context -->
                     <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
                         <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">User</h4>
-                        <?php if ($user_info): ?>
-                            <p class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($user_info['username']) ?></p>
+                        {% if user_info %}
+                            <p class="text-sm font-semibold text-gray-900">{{ user_info.username }}</p>
                             <p class="text-xs text-gray-600">
                                 <i class="fas fa-user mr-1"></i>
-                                <?= htmlspecialchars($user_info['role']) ?>
+                                {{ user_info.role }}
                             </p>
-                        <?php else: ?>
+                        {% else %}
                             <p class="text-sm text-gray-500">
                                 <i class="fas fa-user-slash mr-1"></i>
                                 Guest (Not logged in)
                             </p>
-                        <?php endif; ?>
+                        {% endif %}
                     </div>
 
-                    <!-- System Info -->
                     <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
                         <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">System</h4>
                         <div class="space-y-1">
                             <p class="text-xs text-gray-600">
                                 <i class="fas fa-code mr-1"></i>
-                                PHP <?= htmlspecialchars($php_version ?? PHP_VERSION) ?>
+                                PHP {{ php_version|default('unknown') }}
                             </p>
                             <p class="text-xs text-gray-600">
                                 <i class="fas fa-memory mr-1"></i>
-                                <?= round(($memory_usage ?? memory_get_usage(true)) / 1024 / 1024, 2) ?>MB
+                                {{ memory_usage_mb|default(0) }}MB
                             </p>
                             <p class="text-xs text-gray-600">
                                 <i class="fas fa-clock mr-1"></i>
-                                <?= date('H:i:s', strtotime($occurred_at ?? 'now')) ?>
+                                {{ occurred_at|default('now')|date("H:i:s") }}
                             </p>
                         </div>
                     </div>
@@ -193,8 +171,7 @@
             <!-- Left Column -->
             <div class="space-y-6">
                 
-                <!-- Stack Trace -->
-                <?php if (!empty($stack_trace)): ?>
+                {% if stack_trace is defined and stack_trace %}
                 <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-fade-in">
                     <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                         <div class="flex items-center justify-between">
@@ -211,24 +188,20 @@
                     </div>
                     <div class="p-6">
                         <div class="code-block rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto border border-gray-700" id="stack-trace">
-                            <?php 
-                            $traceLines = explode("\n", $stack_trace);
-                            foreach ($traceLines as $index => $line) {
-                                if (trim($line)) {
-                                    echo '<div class="flex font-mono text-sm">';
-                                    echo '<span class="line-number mr-4 text-right" style="min-width: 2rem">' . str_pad($index, 2, '0', STR_PAD_LEFT) . '</span>';
-                                    echo '<span class="flex-1 text-green-400">' . htmlspecialchars($line) . '</span>';
-                                    echo '</div>';
-                                }
-                            }
-                            ?>
+                            {% for line in stack_trace|split("\n") %}
+                                {% if line|trim %}
+                                <div class="flex font-mono text-sm">
+                                    <span class="line-number mr-4 text-right" style="min-width: 2rem">{{ '%02d'|format(loop.index0) }}</span>
+                                    <span class="flex-1 text-green-400">{{ line }}</span>
+                                </div>
+                                {% endif %}
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
-                <?php endif; ?>
+                {% endif %}
 
-                <!-- Request Data -->
-                <?php if (!empty($request_data)): ?>
+                {% if request_data is defined and request_data %}
                 <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-fade-in">
                     <button onclick="toggleSection('request-data')" 
                             class="w-full px-6 py-4 border-b border-gray-200 bg-gray-50 text-left hover:bg-gray-100 transition-colors">
@@ -237,7 +210,7 @@
                                 <i class="fas fa-paper-plane text-blue-500 mr-2 text-sm"></i>
                                 Request Data
                                 <span class="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded font-medium">
-                                    <?= count($request_data) ?>
+                                    {{ request_data|length }}
                                 </span>
                             </span>
                             <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="request-data-chevron"></i>
@@ -245,20 +218,24 @@
                     </button>
                     <div id="request-data" class="hidden p-6">
                         <div class="space-y-3">
-                            <?php foreach ($request_data as $key => $value): ?>
+                            {% for key, value in request_data %}
                                 <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                                     <span class="text-xs font-semibold text-gray-700 uppercase tracking-wide block mb-1">
-                                        <?= htmlspecialchars($key) ?>
+                                        {{ key }}
                                     </span>
                                     <code class="text-sm text-gray-800 font-mono block break-all">
-                                        <?= htmlspecialchars(is_array($value) ? json_encode($value, JSON_PRETTY_PRINT) : $value) ?>
+                                        {% if value is iterable %}
+                                            {{ value|json_encode(constant('JSON_PRETTY_PRINT')) }}
+                                        {% else %}
+                                            {{ value }}
+                                        {% endif %}
                                     </code>
                                 </div>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
-                <?php endif; ?>
+                {% endif %}
 
             </div>
 
@@ -277,24 +254,24 @@
                         <div class="space-y-3 text-sm">
                             <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600">Method</span>
-                                <span class="font-mono font-bold text-gray-900"><?= htmlspecialchars($request_method ?? 'GET') ?></span>
+                                <span class="font-mono font-bold text-gray-900">{{ request_method|default('GET') }}</span>
                             </div>
                             <div class="py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600 block mb-1">URI</span>
                                 <code class="text-xs text-gray-800 font-mono block break-all bg-gray-50 px-2 py-1 rounded">
-                                    <?= htmlspecialchars($request_uri ?? '/') ?>
+                                    {{ request_uri|default('/') }}
                                 </code>
                             </div>
                             <div class="py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600 block mb-1">IP Address</span>
                                 <code class="text-xs text-gray-800 font-mono block bg-gray-50 px-2 py-1 rounded">
-                                    <?= htmlspecialchars($ip_address ?? 'Unknown') ?>
+                                    {{ ip_address|default('Unknown') }}
                                 </code>
                             </div>
                             <div class="py-2">
                                 <span class="font-medium text-gray-600 block mb-1">User Agent</span>
                                 <code class="text-xs text-gray-600 font-mono block break-all bg-gray-50 px-2 py-1 rounded">
-                                    <?= htmlspecialchars($user_agent ?? 'Unknown') ?>
+                                    {{ user_agent|default('Unknown') }}
                                 </code>
                             </div>
                         </div>
@@ -313,26 +290,25 @@
                         <div class="space-y-3 text-sm">
                             <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600">PHP Version</span>
-                                <span class="font-mono text-gray-900"><?= htmlspecialchars($php_version ?? PHP_VERSION) ?></span>
+                                <span class="font-mono text-gray-900">{{ php_version|default('unknown') }}</span>
                             </div>
                             <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600">Memory Usage</span>
-                                <span class="font-mono text-gray-900"><?= round(($memory_usage ?? memory_get_usage(true)) / 1024 / 1024, 2) ?>MB</span>
+                                <span class="font-mono text-gray-900">{{ memory_usage_mb|default(0) }}MB</span>
                             </div>
                             <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                 <span class="font-medium text-gray-600">Peak Memory</span>
-                                <span class="font-mono text-gray-900"><?= round(memory_get_peak_usage(true) / 1024 / 1024, 2) ?>MB</span>
+                                <span class="font-mono text-gray-900">{{ peak_memory_mb|default(0) }}MB</span>
                             </div>
                             <div class="flex items-center justify-between py-2">
                                 <span class="font-medium text-gray-600">Timestamp</span>
-                                <span class="font-mono text-gray-900 text-xs"><?= date('Y-m-d H:i:s T', strtotime($occurred_at ?? 'now')) ?></span>
+                                <span class="font-mono text-gray-900 text-xs">{{ occurred_at|default('now')|date("Y-m-d H:i:s T") }}</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <!-- Session Data -->
-                <?php if (!empty($session_data)): ?>
+                {% if session_data is defined and session_data %}
                 <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-fade-in">
                     <button onclick="toggleSection('session-data')" 
                             class="w-full px-6 py-4 border-b border-gray-200 bg-gray-50 text-left hover:bg-gray-100 transition-colors">
@@ -341,7 +317,7 @@
                                 <i class="fas fa-user-lock text-orange-500 mr-2 text-sm"></i>
                                 Session Data
                                 <span class="ml-2 text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded font-medium">
-                                    <?= count($session_data) ?>
+                                    {{ session_data|length }}
                                 </span>
                             </span>
                             <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="session-data-chevron"></i>
@@ -357,20 +333,24 @@
                                     </tr>
                                 </thead>
                                 <tbody class="divide-y divide-gray-100">
-                                    <?php foreach ($session_data as $key => $value): ?>
+                                    {% for key, value in session_data %}
                                         <tr class="hover:bg-gray-50">
-                                            <td class="px-3 py-2 font-mono text-gray-700 align-top"><?= htmlspecialchars($key) ?></td>
+                                            <td class="px-3 py-2 font-mono text-gray-700 align-top">{{ key }}</td>
                                             <td class="px-3 py-2 font-mono text-gray-600 break-all">
-                                                <?= htmlspecialchars(is_array($value) ? json_encode($value) : $value) ?>
+                                                {% if value is iterable %}
+                                                    {{ value|json_encode }}
+                                                {% else %}
+                                                    {{ value }}
+                                                {% endif %}
                                             </td>
                                         </tr>
-                                    <?php endforeach; ?>
+                                    {% endfor %}
                                 </tbody>
                             </table>
                         </div>
                     </div>
                 </div>
-                <?php endif; ?>
+                {% endif %}
 
             </div>
         </div>
@@ -409,12 +389,11 @@
         <div class="text-center text-sm text-gray-500">
             <p>
                 <i class="fas fa-globe text-primary mr-1"></i>
-                Domain Monitor &copy; <?= date('Y') ?> • Development Mode
+                Domain Monitor &copy; {{ "now"|date("Y") }} &bull; Development Mode
             </p>
         </div>
     </div>
 
-    <!-- JavaScript -->
     <script>
         function toggleSection(sectionId) {
             const section = document.getElementById(sectionId);
@@ -422,14 +401,10 @@
             
             if (section.classList.contains('hidden')) {
                 section.classList.remove('hidden');
-                if (chevron) {
-                    chevron.style.transform = 'rotate(180deg)';
-                }
+                if (chevron) chevron.style.transform = 'rotate(180deg)';
             } else {
                 section.classList.add('hidden');
-                if (chevron) {
-                    chevron.style.transform = 'rotate(0deg)';
-                }
+                if (chevron) chevron.style.transform = 'rotate(0deg)';
             }
         }
         
@@ -452,14 +427,12 @@
             textArea.style.left = '-999999px';
             document.body.appendChild(textArea);
             textArea.select();
-            
             try {
                 document.execCommand('copy');
                 showCopySuccess();
             } catch (err) {
                 console.error('Copy failed:', err);
             }
-            
             document.body.removeChild(textArea);
         }
         
@@ -467,34 +440,29 @@
             const stackTraceElement = document.getElementById('stack-trace');
             const lines = stackTraceElement.querySelectorAll('div');
             let stackText = '';
-            
             lines.forEach(line => {
                 const textSpan = line.querySelector('span:last-child');
-                if (textSpan) {
-                    stackText += textSpan.textContent + '\n';
-                }
+                if (textSpan) stackText += textSpan.textContent + '\n';
             });
-            
             copyToClipboard(stackText.trim());
         }
 
         function copyErrorReport() {
-            const errorType = <?= json_encode($error_type ?? 'Error') ?>;
-            const errorMessage = <?= json_encode($error_message ?? 'Unknown error') ?>;
-            const errorFile = <?= json_encode($error_file ?? 'Unknown') ?>;
-            const errorLine = <?= json_encode($error_line ?? '?') ?>;
-            const errorId = <?= json_encode($error_id ?? 'N/A') ?>;
-            const phpVersion = <?= json_encode($php_version ?? PHP_VERSION) ?>;
-            const requestMethod = <?= json_encode($request_method ?? 'GET') ?>;
-            const requestUri = <?= json_encode($request_uri ?? '/') ?>;
-            const userAgent = <?= json_encode($user_agent ?? 'Unknown') ?>;
-            const ipAddress = <?= json_encode($ip_address ?? 'Unknown') ?>;
-            const timestamp = <?= json_encode(date('Y-m-d H:i:s', strtotime($occurred_at ?? 'now'))) ?>;
+            const errorType = {{ (error_type|default('Error'))|json_encode|raw }};
+            const errorMessage = {{ (error_message|default('Unknown error'))|json_encode|raw }};
+            const errorFile = {{ (error_file|default('Unknown'))|json_encode|raw }};
+            const errorLine = {{ (error_line|default('?'))|json_encode|raw }};
+            const errorId = {{ (error_id|default('N/A'))|json_encode|raw }};
+            const phpVersion = {{ (php_version|default('unknown'))|json_encode|raw }};
+            const requestMethod = {{ (request_method|default('GET'))|json_encode|raw }};
+            const requestUri = {{ (request_uri|default('/'))|json_encode|raw }};
+            const userAgent = {{ (user_agent|default('Unknown'))|json_encode|raw }};
+            const ipAddress = {{ (ip_address|default('Unknown'))|json_encode|raw }};
+            const timestamp = {{ (occurred_at|default('now'))|json_encode|raw }};
             
-            const userInfo = <?= json_encode($user_info ?? null) ?>;
+            const userInfo = {{ (user_info|default(null))|json_encode|raw }};
             const userText = userInfo ? `${userInfo.username} (${userInfo.role}, ID: ${userInfo.id})` : 'Guest (Not logged in)';
             
-            // Get stack trace
             const stackTraceElement = document.getElementById('stack-trace');
             let stackTrace = 'Not available';
             if (stackTraceElement) {
@@ -502,9 +470,7 @@
                 let stackText = '';
                 lines.forEach(line => {
                     const textSpan = line.querySelector('span:last-child');
-                    if (textSpan) {
-                        stackText += textSpan.textContent + '\n';
-                    }
+                    if (textSpan) stackText += textSpan.textContent + '\n';
                 });
                 stackTrace = stackText.trim();
             }
@@ -532,8 +498,8 @@ USER CONTEXT:
 
 SYSTEM INFORMATION:
 - PHP Version: ${phpVersion}
-- Memory Usage: ${<?= round(($memory_usage ?? memory_get_usage(true)) / 1024 / 1024, 2) ?>}MB
-- Peak Memory: ${<?= round(memory_get_peak_usage(true) / 1024 / 1024, 2) ?>}MB
+- Memory Usage: {{ memory_usage_mb|default(0) }}MB
+- Peak Memory: {{ peak_memory_mb|default(0) }}MB
 
 STACK TRACE:
 ${stackTrace}
@@ -562,4 +528,3 @@ Please include this report when reporting bugs.`;
     </script>
 </body>
 </html>
-
diff --git a/app/Views/groups/create.php b/app/Views/groups/create.twig
similarity index 58%
rename from app/Views/groups/create.php
rename to app/Views/groups/create.twig
index a745da9..fcc9295 100644
--- a/app/Views/groups/create.php
+++ b/app/Views/groups/create.twig
@@ -1,65 +1,65 @@
-<?php
-$title = 'Create Notification Group';
-$pageTitle = 'Create Notification Group';
-$pageDescription = 'Set up a new notification group for your domains';
-$pageIcon = 'fas fa-plus-circle';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
 
-<!-- Main Form -->
+{% set title = 'Create Notification Group' %}
+{% set pageTitle = 'Create Notification Group' %}
+{% set pageDescription = 'Set up a new notification group for your domains' %}
+{% set pageIcon = 'fas fa-plus-circle' %}
+
+{% block content %}
+{# Main Form #}
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-bell text-gray-400 mr-2 text-sm"></i>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-bell text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 Group Information
             </h2>
         </div>
-        
+
         <div class="p-6">
             <form method="POST" action="/groups/store" class="space-y-5">
-                <?= csrf_field() ?>
-                <!-- Group Name -->
+                {{ csrf_field() }}
+                {# Group Name #}
                 <div>
-                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Group Name *
                     </label>
-                    <input type="text" 
-                           id="name" 
-                           name="name" 
-                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                    <input type="text"
+                           id="name"
+                           name="name"
+                           class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                            placeholder="e.g., Production Alerts, Team Notifications"
                            required
                            autofocus>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Choose a descriptive name for this notification group
                     </p>
                 </div>
 
-                <!-- Description -->
+                {# Description #}
                 <div>
-                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Description (Optional)
                     </label>
-                    <textarea id="description" 
-                              name="description" 
-                              class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                    <textarea id="description"
+                              name="description"
+                              class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                               rows="4"
                               placeholder="Add details about this notification group, its purpose, or who should be notified..."></textarea>
-                    <p class="mt-1.5 text-xs text-gray-500">
+                    <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                         Optional: Add notes to help identify this group's purpose
                     </p>
                 </div>
 
-                <!-- Action Buttons -->
+                {# Action Buttons #}
                 <div class="flex flex-col sm:flex-row gap-3 pt-3">
-                    <button type="submit" 
+                    <button type="submit"
                             class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                         <i class="fas fa-plus-circle mr-2"></i>
                         Create Group
                     </button>
-                    <a href="/groups" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                    <a href="/groups"
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -68,8 +68,8 @@ ob_start();
         </div>
     </div>
 
-    <!-- Info Section -->
-    <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
+    {# Info Section #}
+    <div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
         <div class="flex items-start">
             <div class="flex-shrink-0">
                 <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
@@ -77,8 +77,8 @@ ob_start();
                 </div>
             </div>
             <div class="ml-3">
-                <h3 class="text-sm font-semibold text-gray-900 mb-1">Next Steps</h3>
-                <ul class="text-xs text-gray-600 space-y-1">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Next Steps</h3>
+                <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                     <li class="flex items-center">
                         <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
                         <span class="ml-2">After creating the group, you'll be able to add notification channels (Email, Telegram, Discord, Slack, Mattermost, Pushover, Webhook)</span>
@@ -96,8 +96,4 @@ ob_start();
         </div>
     </div>
 </div>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/groups/edit.php b/app/Views/groups/edit.twig
similarity index 68%
rename from app/Views/groups/edit.php
rename to app/Views/groups/edit.twig
index cebc6f5..ebc599f 100644
--- a/app/Views/groups/edit.php
+++ b/app/Views/groups/edit.twig
@@ -1,53 +1,57 @@
-<?php
-$title = 'Edit Notification Group';
-$pageTitle = 'Edit Notification Group';
-$pageDescription = htmlspecialchars($group['name']);
-$pageIcon = 'fas fa-edit';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
 
+{% set title = 'Edit Notification Group' %}
+{% set pageTitle = 'Edit Notification Group' %}
+{% set pageDescription = group.name %}
+{% set pageIcon = 'fas fa-edit' %}
+
+{% set channelIcons = { email: 'fa-envelope', telegram: 'fa-telegram', discord: 'fa-discord', slack: 'fa-slack', mattermost: 'fa-comments', pushover: 'fa-mobile-alt', webhook: 'fa-link' } %}
+{% set channelIconPrefixes = { email: 'fas', telegram: 'fab', discord: 'fab', slack: 'fab', mattermost: 'fas', pushover: 'fas', webhook: 'fas' } %}
+{% set channelColors = { email: 'blue', telegram: 'blue', discord: 'indigo', slack: 'teal', mattermost: 'green', pushover: 'red', webhook: 'purple' } %}
+
+{% block content %}
 <div class="max-w-7xl mx-auto space-y-4">
-    <!-- Group Details Form -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-info-circle text-gray-400 mr-2 text-sm"></i>
+    {# Group Details Form #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-info-circle text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 Group Details
             </h2>
         </div>
-        
+
         <div class="p-6">
-            <form method="POST" action="/groups/<?= $group['id'] ?>/update" class="space-y-5">
-                <?= csrf_field() ?>
+            <form method="POST" action="/groups/{{ group.id }}/update" class="space-y-5">
+                {{ csrf_field() }}
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-                    <!-- Group Name -->
+                    {# Group Name #}
                     <div>
-                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Group Name *
                         </label>
-                        <input type="text" 
-                               id="name" 
-                               name="name" 
-                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
-                               value="<?= htmlspecialchars($group['name']) ?>"
+                        <input type="text"
+                               id="name"
+                               name="name"
+                               class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+                               value="{{ group.name }}"
                                required>
                     </div>
 
-                    <!-- Description -->
+                    {# Description #}
                     <div>
-                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Description (Optional)
                         </label>
-                        <textarea id="description" 
-                                  name="description" 
-                                  class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
-                                  rows="3"><?= htmlspecialchars($group['description'] ?? '') ?></textarea>
+                        <textarea id="description"
+                                  name="description"
+                                  class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+                                  rows="3">{{ group.description|default('') }}</textarea>
                     </div>
                 </div>
 
                 <div class="flex gap-3">
-                    <button type="submit" 
+                    <button type="submit"
                             class="inline-flex items-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                         <i class="fas fa-save mr-2"></i>
                         Update Group
@@ -57,88 +61,78 @@ ob_start();
         </div>
     </div>
 
-    <!-- Notification Channels -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-plug text-gray-400 mr-2 text-sm"></i>
+    {# Notification Channels #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-plug text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 Notification Channels
             </h2>
         </div>
-        
+
         <div class="p-6">
-            <?php if (empty($group['channels'])): ?>
+            {% if group.channels is empty %}
                 <div class="text-center py-10">
-                    <i class="fas fa-plug text-gray-300 text-5xl mb-3"></i>
-                    <p class="text-gray-500">No channels configured yet</p>
-                    <p class="text-sm text-gray-400 mt-1">Add your first channel below to start receiving notifications</p>
+                    <i class="fas fa-plug text-gray-300 dark:text-slate-600 text-5xl mb-3"></i>
+                    <p class="text-gray-500 dark:text-slate-400">No channels configured yet</p>
+                    <p class="text-sm text-gray-400 dark:text-slate-500 mt-1">Add your first channel below to start receiving notifications</p>
                 </div>
-            <?php else: ?>
+            {% else %}
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-                    <?php foreach ($group['channels'] as $channel): 
-                        $config = json_decode($channel['channel_config'], true);
-                        $icons = ['email' => 'fa-envelope', 'telegram' => 'fa-telegram', 'discord' => 'fa-discord', 'slack' => 'fa-slack', 'mattermost' => 'fa-comments', 'pushover' => 'fa-mobile-alt', 'webhook' => 'fa-link'];
-                        $iconClasses = ['email' => 'fas', 'telegram' => 'fab', 'discord' => 'fab', 'slack' => 'fab', 'mattermost' => 'fas', 'pushover' => 'fas', 'webhook' => 'fas'];
-                        $colors = ['email' => 'blue', 'telegram' => 'blue', 'discord' => 'indigo', 'slack' => 'teal', 'mattermost' => 'green', 'pushover' => 'red', 'webhook' => 'purple'];
-                        $icon = $icons[$channel['channel_type']] ?? 'fa-bell';
-                        $iconClass = $iconClasses[$channel['channel_type']] ?? 'fas';
-                        $color = $colors[$channel['channel_type']] ?? 'gray';
-                    ?>
-                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow duration-200">
+                    {% for channel in group.channels %}
+                        {% set config = channel.channel_config|from_json %}
+                        {% set icon = channelIcons[channel.channel_type]|default('fa-bell') %}
+                        {% set iconPrefix = channelIconPrefixes[channel.channel_type]|default('fas') %}
+                        {% set color = channelColors[channel.channel_type]|default('gray') %}
+                        {% set formatLabels = { generic: 'Generic', google_chat: 'Google Chat', simple_text: 'Simple Text' } %}
+                        <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-6 hover:shadow-md transition-shadow duration-200">
                             <div class="flex items-start justify-between mb-4">
-                                <div class="w-12 h-12 bg-<?= $color ?>-100 rounded-lg flex items-center justify-center">
-                                    <?php if ($channel['channel_type'] === 'mattermost'): ?>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 500 500" class="text-<?= $color ?>-600">
+                                <div class="w-12 h-12 bg-{{ color }}-100 dark:bg-{{ color }}-500/20 rounded-lg flex items-center justify-center">
+                                    {% if channel.channel_type == 'mattermost' %}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 500 500" class="text-{{ color }}-600">
                                             <path fill="currentColor" d="M 250.05,34.00 C 251.95,34.04 253.85,34.11 255.65,34.20 255.65,34.20 225.86,69.71 225.86,69.71 225.79,69.72 225.71,69.74 225.63,69.75 149.26,84.10 98.22,146.50 98.22,222.97 98.22,264.53 121.29,313.47 157.97,342.07 186.58,364.39 222.26,378.97 259.18,378.97 352.58,378.97 419.33,310.36 419.33,222.97 419.33,188.06 403.34,150.20 377.57,122.21 377.57,122.21 375.94,74.82 375.94,74.82 430.39,113.97 465.89,177.84 466.00,249.99 466.00,250.00 466.00,250.00 466.00,250.00 466.00,369.29 369.30,466.00 250.00,466.00 130.71,466.00 34.00,369.29 34.00,250.00 34.00,130.71 130.71,34.00 250.00,34.00 250.00,34.00 250.05,34.00 250.05,34.00 Z M 314.15,54.29 C 314.81,54.25 315.47,54.32 316.11,54.54 319.12,55.54 319.96,58.11 320.04,60.99 320.04,60.99 323.88,207.87 323.88,207.87 324.64,236.53 306.72,276.31 263.49,276.43 232.52,276.51 199.81,255.60 199.81,216.30 199.82,201.57 205.42,185.04 219.06,168.19 219.06,168.19 309.09,57.01 309.09,57.01 310.24,55.59 312.17,54.43 314.15,54.29 314.15,54.29 314.15,54.29 314.15,54.29 Z" />
                                         </svg>
-                                    <?php else: ?>
-                                        <i class="<?= $iconClass ?> <?= $icon ?> text-<?= $color ?>-600 text-xl"></i>
-                                    <?php endif; ?>
+                                    {% else %}
+                                        <i class="{{ iconPrefix }} {{ icon }} text-{{ color }}-600 text-xl"></i>
+                                    {% endif %}
                                 </div>
-                                <span class="px-3 py-1 rounded-full text-xs font-semibold <?= $channel['is_active'] ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600' ?>">
-                                    <?= $channel['is_active'] ? 'Active' : 'Disabled' ?>
+                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ channel.is_active ? 'bg-green-100 dark:bg-green-500/20 text-green-800 dark:text-green-400' : 'bg-gray-200 dark:bg-slate-600 text-gray-600 dark:text-slate-400' }}">
+                                    {{ channel.is_active ? 'Active' : 'Disabled' }}
                                 </span>
                             </div>
-                            <h3 class="font-semibold text-gray-800 mb-2"><?= ucfirst($channel['channel_type']) ?></h3>
-                            <p class="text-sm text-gray-600 mb-4 truncate">
-                                <?php
-                                if ($channel['channel_type'] === 'email') {
-                                    echo htmlspecialchars($config['email'] ?? 'No email');
-                                } elseif ($channel['channel_type'] === 'telegram') {
-                                    echo "Chat: " . htmlspecialchars($config['chat_id'] ?? 'N/A');
-                                } elseif ($channel['channel_type'] === 'pushover') {
-                                    echo "User: " . substr(htmlspecialchars($config['user_key'] ?? 'N/A'), 0, 10) . "...";
-                                } elseif ($channel['channel_type'] === 'webhook') {
-                                    $formatLabels = [
-                                        'generic' => 'Generic',
-                                        'google_chat' => 'Google Chat',
-                                        'simple_text' => 'Simple Text'
-                                    ];
-                                    $format = $config['format'] ?? 'generic';
-                                    echo "Format: " . ($formatLabels[$format] ?? ucfirst($format));
-                                } else {
-                                    echo "Webhook configured";
-                                }
-                                ?>
+                            <h3 class="font-semibold text-gray-800 dark:text-slate-200 mb-2">{{ channel.channel_type|capitalize }}</h3>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 mb-4 truncate">
+                                {% if channel.channel_type == 'email' %}
+                                    {{ config.email|default('No email') }}
+                                {% elseif channel.channel_type == 'telegram' %}
+                                    Chat: {{ config.chat_id|default('N/A') }}
+                                {% elseif channel.channel_type == 'pushover' %}
+                                    User: {{ (config.user_key|default('N/A'))|slice(0, 10) }}...
+                                {% elseif channel.channel_type == 'webhook' %}
+                                    {% set format = config.format|default('generic') %}
+                                    Format: {{ formatLabels[format]|default(format|capitalize) }}
+                                {% else %}
+                                    Webhook configured
+                                {% endif %}
                             </p>
                             <div class="flex gap-2">
-                                <button onclick="testChannel('<?= $channel['channel_type'] ?>', <?= htmlspecialchars(json_encode($config)) ?>)" 
-                                        class="flex-1 px-3 py-2 bg-blue-50 text-blue-700 rounded text-center text-sm hover:bg-blue-100 transition-colors duration-150">
+                                <button onclick="testChannel('{{ channel.channel_type }}', {{ config|json_encode|e('html_attr') }})"
+                                        class="flex-1 px-3 py-2 bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 rounded text-center text-sm hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors duration-150">
                                     <i class="fas fa-paper-plane mr-1"></i>
                                     Test
                                 </button>
-                                <form method="POST" action="/groups/<?= $group['id'] ?>/channels/<?= $channel['id'] ?>/toggle" class="flex-1">
-                                    <?= csrf_field() ?>
-                                    <button type="submit" 
-                                            class="w-full px-3 py-2 bg-yellow-50 text-yellow-700 rounded text-center text-sm hover:bg-yellow-100 transition-colors duration-150">
-                                        <i class="fas fa-<?= $channel['is_active'] ? 'pause' : 'play' ?> mr-1"></i>
-                                        <?= $channel['is_active'] ? 'Disable' : 'Enable' ?>
+                                <form method="POST" action="/groups/{{ group.id }}/channels/{{ channel.id }}/toggle" class="flex-1">
+                                    {{ csrf_field() }}
+                                    <button type="submit"
+                                            class="w-full px-3 py-2 bg-yellow-50 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 rounded text-center text-sm hover:bg-yellow-100 dark:hover:bg-yellow-500/20 transition-colors duration-150">
+                                        <i class="fas fa-{{ channel.is_active ? 'pause' : 'play' }} mr-1"></i>
+                                        {{ channel.is_active ? 'Disable' : 'Enable' }}
                                     </button>
                                 </form>
-                                <form method="POST" action="/groups/<?= $group['id'] ?>/channels/<?= $channel['id'] ?>/delete" class="flex-1">
-                                    <?= csrf_field() ?>
-                                    <button type="submit" 
-                                            class="w-full px-3 py-2 bg-red-50 text-red-700 rounded text-center text-sm hover:bg-red-100 transition-colors duration-150"
+                                <form method="POST" action="/groups/{{ group.id }}/channels/{{ channel.id }}/delete" class="flex-1">
+                                    {{ csrf_field() }}
+                                    <button type="submit"
+                                            class="w-full px-3 py-2 bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 rounded text-center text-sm hover:bg-red-100 dark:hover:bg-red-500/20 transition-colors duration-150"
                                             onclick="return confirm('Delete this channel?')">
                                         <i class="fas fa-trash mr-1"></i>
                                         Delete
@@ -146,27 +140,27 @@ ob_start();
                                 </form>
                             </div>
                         </div>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </div>
-            <?php endif; ?>
+            {% endif %}
 
-            <!-- Add Channel Form -->
-            <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
-                <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
-                    <i class="fas fa-plus-circle text-gray-400 mr-2 text-sm"></i>
+            {# Add Channel Form #}
+            <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-5 border border-gray-200 dark:border-slate-600">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                    <i class="fas fa-plus-circle text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                     Add New Channel
                 </h3>
 
-                <form method="POST" action="/groups/<?= $group['id'] ?>/channels" id="channelForm" class="space-y-5">
-                    <?= csrf_field() ?>
-                    <input type="hidden" name="group_id" value="<?= $group['id'] ?>">
+                <form method="POST" action="/groups/{{ group.id }}/channels" id="channelForm" class="space-y-5">
+                    {{ csrf_field() }}
+                    <input type="hidden" name="group_id" value="{{ group.id }}">
 
-                    <!-- Channel Type -->
+                    {# Channel Type #}
                     <div>
-                        <label for="channel_type" class="block text-sm font-medium text-gray-700 mb-1.5">Channel Type</label>
-                        <select id="channel_type" 
-                                name="channel_type" 
-                                class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                        <label for="channel_type" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">Channel Type</label>
+                        <select id="channel_type"
+                                name="channel_type"
+                                class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                 onchange="toggleChannelFields()">
                             <option value="">-- Select Channel Type --</option>
                             <option value="email">Email</option>
@@ -179,158 +173,158 @@ ob_start();
                         </select>
                     </div>
 
-                    <!-- Email Fields -->
+                    {# Email Fields #}
                     <div id="email_fields" class="hidden space-y-4">
                         <div>
-                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Email Address
                             </label>
-                            <input type="email" 
-                                   id="email" 
-                                   name="email" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                            <input type="email"
+                                   id="email"
+                                   name="email"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="user@example.com">
                         </div>
                     </div>
 
-                    <!-- Telegram Fields -->
+                    {# Telegram Fields #}
                     <div id="telegram_fields" class="hidden space-y-4">
                         <div>
-                            <label for="bot_token" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="bot_token" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Bot Token
                             </label>
-                            <input type="text" 
-                                   id="bot_token" 
-                                   name="bot_token" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                            <input type="text"
+                                   id="bot_token"
+                                   name="bot_token"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Get from @BotFather on Telegram
                             </p>
                         </div>
                         <div>
-                            <label for="chat_id" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="chat_id" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Chat ID
                             </label>
-                            <input type="text" 
-                                   id="chat_id" 
-                                   name="chat_id" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                            <input type="text"
+                                   id="chat_id"
+                                   name="chat_id"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="123456789">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Use @userinfobot to get your chat ID
                             </p>
                         </div>
                     </div>
 
-                    <!-- Discord Fields -->
+                    {# Discord Fields #}
                     <div id="discord_fields" class="hidden space-y-4">
                         <div>
-                            <label for="discord_webhook" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="discord_webhook" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Webhook URL <span class="text-red-500">*</span>
                             </label>
-                            <input type="text" 
-                                   id="discord_webhook" 
-                                   name="discord_webhook_url" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="discord_webhook"
+                                   name="discord_webhook_url"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="https://discord.com/api/webhooks/1234567890/abcdefg..."
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 <i class="fas fa-info-circle text-blue-500 mr-1"></i>
-                                Paste the complete webhook URL from Discord Server Settings → Integrations → Webhooks
+                                Paste the complete webhook URL from Discord Server Settings &rarr; Integrations &rarr; Webhooks
                             </p>
                         </div>
                     </div>
 
-                    <!-- Slack Fields -->
+                    {# Slack Fields #}
                     <div id="slack_fields" class="hidden space-y-4">
                         <div>
-                            <label for="slack_webhook" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="slack_webhook" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Webhook URL
                             </label>
-                            <input type="text" 
-                                   id="slack_webhook" 
-                                   name="slack_webhook_url" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="slack_webhook"
+                                   name="slack_webhook_url"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="https://hooks.slack.com/services/..."
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
-                                Create in Slack App Settings → Incoming Webhooks
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
+                                Create in Slack App Settings &rarr; Incoming Webhooks
                             </p>
                         </div>
                     </div>
 
-                    <!-- Mattermost Fields -->
+                    {# Mattermost Fields #}
                     <div id="mattermost_fields" class="hidden space-y-4">
                         <div>
-                            <label for="mattermost_webhook" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="mattermost_webhook" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Webhook URL
                             </label>
-                            <input type="text" 
-                                   id="mattermost_webhook" 
-                                   name="mattermost_webhook_url" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="mattermost_webhook"
+                                   name="mattermost_webhook_url"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="https://your-mattermost.com/hooks/..."
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
-                                Create in Mattermost → Integrations → Incoming Webhooks
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
+                                Create in Mattermost &rarr; Integrations &rarr; Incoming Webhooks
                             </p>
                         </div>
                     </div>
 
-                    <!-- Pushover Fields -->
+                    {# Pushover Fields #}
                     <div id="pushover_fields" class="hidden space-y-4">
                         <div>
-                            <label for="pushover_api_token" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="pushover_api_token" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 API Token (Application Key) <span class="text-red-500">*</span>
                             </label>
-                            <input type="text" 
-                                   id="pushover_api_token" 
-                                   name="pushover_api_token" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="pushover_api_token"
+                                   name="pushover_api_token"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="azGDORePK8gMaC0QOYAMyEEuzJnyUi"
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 <i class="fas fa-info-circle text-blue-500 mr-1"></i>
                                 Create an application at <a href="https://pushover.net/apps/build" target="_blank" class="text-blue-600 hover:underline">pushover.net/apps/build</a>
                             </p>
                         </div>
                         <div>
-                            <label for="pushover_user_key" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="pushover_user_key" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 User Key <span class="text-red-500">*</span>
                             </label>
-                            <input type="text" 
-                                   id="pushover_user_key" 
-                                   name="pushover_user_key" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="pushover_user_key"
+                                   name="pushover_user_key"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="uQiRzpo4DXghDmr9QzzfQu27cmVRsG"
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 <i class="fas fa-info-circle text-blue-500 mr-1"></i>
                                 Find your user key on your <a href="https://pushover.net/" target="_blank" class="text-blue-600 hover:underline">Pushover dashboard</a>
                             </p>
                         </div>
                         <div>
-                            <label for="pushover_device" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="pushover_device" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Device Name (Optional)
                             </label>
-                            <input type="text" 
-                                   id="pushover_device" 
-                                   name="pushover_device" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm" 
+                            <input type="text"
+                                   id="pushover_device"
+                                   name="pushover_device"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="Leave empty for all devices"
                                    autocomplete="off">
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Specify a device name to send to specific device only (e.g., "iPhone", "Desktop")
                             </p>
                         </div>
                         <div>
-                            <label for="pushover_sound" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="pushover_sound" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Notification Sound (Optional)
                             </label>
-                            <select id="pushover_sound" 
-                                    name="pushover_sound" 
-                                    class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm">
+                            <select id="pushover_sound"
+                                    name="pushover_sound"
+                                    class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                                 <option value="">Default (based on priority)</option>
                                 <option value="pushover">Pushover (default)</option>
                                 <option value="bike">Bike</option>
@@ -356,70 +350,70 @@ ob_start();
                                 <option value="vibrate">Vibrate Only</option>
                                 <option value="none">None (silent)</option>
                             </select>
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Custom sound for notifications. If not set, sound will be chosen based on urgency.
                             </p>
                         </div>
                     </div>
 
-                    <!-- Generic Webhook Fields -->
+                    {# Generic Webhook Fields #}
                     <div id="webhook_fields" class="hidden space-y-4">
                         <div>
-                            <label for="webhook_format" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="webhook_format" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Webhook Format
                             </label>
-                            <select id="webhook_format" 
-                                    name="webhook_format" 
-                                    class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                            <select id="webhook_format"
+                                    name="webhook_format"
+                                    class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                     onchange="updateWebhookPlaceholder()">
                                 <option value="generic">Generic (n8n/Zapier/Make)</option>
                                 <option value="google_chat">Google Chat</option>
                                 <option value="simple_text">Simple Text ({"text":"..."})</option>
                             </select>
-                            <p id="webhook_format_help" class="mt-1.5 text-xs text-gray-500">
+                            <p id="webhook_format_help" class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Choose the payload format for your webhook endpoint.
                             </p>
                         </div>
                         <div>
-                            <label for="generic_webhook_url" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="generic_webhook_url" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Webhook URL <span class="text-red-500">*</span>
                             </label>
-                            <input type="text" 
-                                   id="generic_webhook_url" 
-                                   name="webhook_url" 
-                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono" 
+                            <input type="text"
+                                   id="generic_webhook_url"
+                                   name="webhook_url"
+                                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm font-mono bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="https://example.com/webhook-endpoint"
                                    autocomplete="off">
-                            <p id="webhook_url_help" class="mt-1.5 text-xs text-gray-500">
+                            <p id="webhook_url_help" class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Will receive JSON payload compatible with n8n/Zapier/Make.
                             </p>
                         </div>
-                        
-                        <!-- Google Chat specific help -->
-                        <div id="google_chat_help" class="hidden bg-green-50 border border-green-200 rounded-lg p-4">
-                            <h4 class="text-sm font-medium text-green-800 flex items-center mb-2">
+
+                        {# Google Chat specific help #}
+                        <div id="google_chat_help" class="hidden bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30 rounded-lg p-4">
+                            <h4 class="text-sm font-medium text-green-800 dark:text-green-400 flex items-center mb-2">
                                 <i class="fas fa-info-circle mr-2"></i>
                                 Google Chat Setup Instructions
                             </h4>
-                            <ol class="text-xs text-green-700 space-y-1 list-decimal list-inside">
+                            <ol class="text-xs text-green-700 dark:text-green-400 space-y-1 list-decimal list-inside">
                                 <li>Open your Google Chat space</li>
-                                <li>Click the space name → <strong>Apps & integrations</strong></li>
+                                <li>Click the space name &rarr; <strong>Apps & integrations</strong></li>
                                 <li>Click <strong>+ Add webhooks</strong></li>
                                 <li>Enter a name (e.g., "Domain Monitor") and optionally add an avatar</li>
                                 <li>Click <strong>Save</strong> and copy the webhook URL</li>
-                                <li>Paste the URL above (starts with <code>https://chat.googleapis.com/v1/spaces/...</code>)</li>
+                                <li>Paste the URL above (starts with <code class="bg-white dark:bg-slate-700 px-1 rounded">https://chat.googleapis.com/v1/spaces/...</code>)</li>
                             </ol>
                         </div>
                     </div>
 
                     <div class="flex gap-3">
-                        <button type="submit" 
+                        <button type="submit"
                                 class="inline-flex items-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                             <i class="fas fa-plus mr-2"></i>
                             Add Channel
                         </button>
-                        
-                        <button type="button" 
+
+                        <button type="button"
                                 id="testChannelBtn"
                                 onclick="testChannel()"
                                 class="inline-flex items-center px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors text-sm hidden">
@@ -432,49 +426,47 @@ ob_start();
         </div>
     </div>
 
-    <!-- Assigned Domains -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-globe text-gray-400 mr-2 text-sm"></i>
-                Assigned Domains (<?= count($group['domains']) ?>)
+    {# Assigned Domains #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-globe text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
+                Assigned Domains ({{ group.domains|length }})
             </h2>
         </div>
-        
+
         <div class="p-6">
-            <?php if (empty($group['domains'])): ?>
+            {% if group.domains is empty %}
                 <div class="text-center py-10">
-                    <i class="fas fa-globe text-gray-300 text-5xl mb-3"></i>
-                    <p class="text-gray-500">No domains assigned to this group yet</p>
+                    <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-5xl mb-3"></i>
+                    <p class="text-gray-500 dark:text-slate-400">No domains assigned to this group yet</p>
                     <a href="/domains/create" class="mt-3 inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                         <i class="fas fa-plus mr-2"></i>
                         Add a Domain
                     </a>
                 </div>
-            <?php else: ?>
+            {% else %}
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <?php foreach ($group['domains'] as $domain): ?>
-                        <a href="/domains/<?= $domain['id'] ?>" class="block bg-gray-50 border border-gray-200 rounded-lg p-6 hover:shadow-md hover:border-primary transition-all duration-200">
+                    {% for domain in group.domains %}
+                        {% set statusClass = domain.status == 'active' ? 'bg-green-100 dark:bg-green-500/20 text-green-800 dark:text-green-400' : 'bg-gray-200 dark:bg-slate-600 text-gray-600 dark:text-slate-400' %}
+                        <a href="/domains/{{ domain.id }}" class="block bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-6 hover:shadow-md hover:border-primary transition-all duration-200">
                             <div class="flex items-start justify-between mb-3">
                                 <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
                                     <i class="fas fa-globe text-primary text-xl"></i>
                                 </div>
-                                <?php
-                                $statusClass = $domain['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600';
-                                ?>
-                                <span class="px-3 py-1 rounded-full text-xs font-semibold <?= $statusClass ?>">
-                                    <?= ucfirst($domain['status']) ?>
+                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ statusClass }}">
+                                    {{ domain.status|capitalize }}
                                 </span>
                             </div>
-                            <h3 class="font-semibold text-gray-800 mb-2 truncate"><?= htmlspecialchars($domain['domain_name']) ?></h3>
-                            <p class="text-sm text-gray-600 flex items-center">
+                            <h3 class="font-semibold text-gray-800 dark:text-slate-200 mb-2 truncate">{{ domain.domain_name }}</h3>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 flex items-center">
                                 <i class="far fa-calendar mr-2"></i>
-                                Expires: <?= $domain['expiration_date'] ? date('M j, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?>
+                                Expires: {{ domain.expiration_date ? domain.expiration_date|date('M j, Y') : 'Unknown' }}
                             </p>
                         </a>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </div>
-            <?php endif; ?>
+            {% endif %}
         </div>
     </div>
 </div>
@@ -483,8 +475,7 @@ ob_start();
 function toggleChannelFields() {
     const channelType = document.getElementById('channel_type').value;
     const testBtn = document.getElementById('testChannelBtn');
-    
-    // Get all input fields
+
     const emailField = document.getElementById('email');
     const botTokenField = document.getElementById('bot_token');
     const chatIdField = document.getElementById('chat_id');
@@ -494,8 +485,7 @@ function toggleChannelFields() {
     const pushoverApiToken = document.getElementById('pushover_api_token');
     const pushoverUserKey = document.getElementById('pushover_user_key');
     const genericWebhook = document.getElementById('generic_webhook_url');
-    
-    // Remove required from all
+
     emailField.removeAttribute('required');
     botTokenField.removeAttribute('required');
     chatIdField.removeAttribute('required');
@@ -505,8 +495,7 @@ function toggleChannelFields() {
     if (pushoverApiToken) pushoverApiToken.removeAttribute('required');
     if (pushoverUserKey) pushoverUserKey.removeAttribute('required');
     if (genericWebhook) genericWebhook.removeAttribute('required');
-    
-    // Hide all fields
+
     document.getElementById('email_fields').classList.add('hidden');
     document.getElementById('telegram_fields').classList.add('hidden');
     document.getElementById('discord_fields').classList.add('hidden');
@@ -514,15 +503,12 @@ function toggleChannelFields() {
     document.getElementById('mattermost_fields').classList.add('hidden');
     document.getElementById('pushover_fields').classList.add('hidden');
     document.getElementById('webhook_fields').classList.add('hidden');
-    
-    // Hide test button by default
+
     testBtn.classList.add('hidden');
-    
-    // Show selected field and make required
+
     if (channelType) {
         document.getElementById(channelType + '_fields').classList.remove('hidden');
-        
-        // Set required based on type
+
         switch(channelType) {
             case 'email':
                 emailField.setAttribute('required', 'required');
@@ -533,7 +519,7 @@ function toggleChannelFields() {
                 break;
             case 'discord':
                 discordWebhook.setAttribute('required', 'required');
-                discordWebhook.focus(); // Auto-focus for easy paste
+                discordWebhook.focus();
                 break;
             case 'slack':
                 slackWebhook.setAttribute('required', 'required');
@@ -557,29 +543,26 @@ function toggleChannelFields() {
                 }
                 break;
         }
-        
-        // Show test button when channel type is selected
+
         testBtn.classList.remove('hidden');
     }
 }
 
-// Form validation before submit
-const addChannelForm = document.querySelector('form[action="/groups/<?= $group['id'] ?>/channels"]');
+const addChannelForm = document.querySelector('form[action="/groups/{{ group.id }}/channels"]');
 if (addChannelForm) {
     addChannelForm.addEventListener('submit', function(e) {
     const channelType = document.getElementById('channel_type').value;
-    
+
     if (!channelType) {
         e.preventDefault();
         alert('Please select a channel type');
         return false;
     }
-    
-    // Validate Discord webhook
+
     if (channelType === 'discord') {
         const webhookField = document.getElementById('discord_webhook');
         const webhookUrl = webhookField.value.trim();
-        
+
         if (!webhookUrl) {
             e.preventDefault();
             alert('Please enter the Discord webhook URL');
@@ -593,8 +576,7 @@ if (addChannelForm) {
             return false;
         }
     }
-    
-    // Validate Slack webhook
+
     if (channelType === 'slack') {
         const webhookUrl = document.getElementById('slack_webhook').value.trim();
         if (!webhookUrl) {
@@ -605,7 +587,6 @@ if (addChannelForm) {
         }
     }
 
-    // Validate Mattermost webhook
     if (channelType === 'mattermost') {
         const webhookUrl = document.getElementById('mattermost_webhook').value.trim();
         if (!webhookUrl) {
@@ -616,7 +597,6 @@ if (addChannelForm) {
         }
     }
 
-    // Validate Generic webhook
     if (channelType === 'webhook') {
         const webhookUrl = document.getElementById('generic_webhook_url').value.trim();
         if (!webhookUrl) {
@@ -626,31 +606,26 @@ if (addChannelForm) {
             return false;
         }
     }
-    
+
     return true;
     });
 }
 
-// Test channel functionality - handles both new and existing channels
 function testChannel(channelType, existingConfig = null) {
-    // If existingConfig is provided, we're testing an existing channel
-    // If not, we're testing a new channel from the form
     const isExistingChannel = existingConfig !== null;
-    
+
     if (!isExistingChannel) {
-        // For new channels, get values from form
         channelType = document.getElementById('channel_type').value;
         const testBtn = document.getElementById('testChannelBtn');
-        
+
         if (!channelType) {
             alert('Please select a channel type first');
             return;
         }
-        
-        // Validate required fields before testing
+
         let isValid = true;
         let errorMessage = '';
-        
+
         switch(channelType) {
             case 'email':
                 const email = document.getElementById('email').value.trim();
@@ -662,7 +637,7 @@ function testChannel(channelType, existingConfig = null) {
                     errorMessage = 'Please enter a valid email address';
                 }
                 break;
-                
+
             case 'telegram':
                 const botToken = document.getElementById('bot_token').value.trim();
                 const chatId = document.getElementById('chat_id').value.trim();
@@ -680,7 +655,7 @@ function testChannel(channelType, existingConfig = null) {
                     errorMessage = 'Please enter a valid chat ID (numeric value)';
                 }
                 break;
-                
+
             case 'discord':
                 const discordWebhook = document.getElementById('discord_webhook').value.trim();
                 if (!discordWebhook) {
@@ -691,7 +666,7 @@ function testChannel(channelType, existingConfig = null) {
                     errorMessage = 'Invalid Discord webhook URL';
                 }
                 break;
-                
+
             case 'slack':
                 const slackWebhook = document.getElementById('slack_webhook').value.trim();
                 if (!slackWebhook) {
@@ -731,37 +706,30 @@ function testChannel(channelType, existingConfig = null) {
                 }
                 break;
         }
-        
+
         if (!isValid) {
             alert(errorMessage);
             return;
         }
-        
-        // Disable button and show loading state for new channels
+
         testBtn.disabled = true;
         testBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Testing...';
     }
-    
-    // Create form data for AJAX request
+
     const formData = new FormData();
     formData.append('channel_type', channelType);
-    
-    // Add group ID from URL or form
+
     let groupId = document.querySelector('input[name="group_id"]')?.value;
     if (!groupId) {
-        // Extract group ID from URL if not in form
         const urlParts = window.location.pathname.split('/');
         groupId = urlParts[urlParts.indexOf('groups') + 1];
     }
     formData.append('group_id', groupId);
-    
-    // Add CSRF token
+
     const csrfToken = document.querySelector('input[name="csrf_token"]').value;
     formData.append('csrf_token', csrfToken);
-    
-    // Add channel-specific data
+
     if (isExistingChannel) {
-        // Use existing channel config
         switch(channelType) {
             case 'email':
                 formData.append('email', existingConfig.email);
@@ -797,7 +765,6 @@ function testChannel(channelType, existingConfig = null) {
                 break;
         }
     } else {
-        // Use form values for new channels
         switch(channelType) {
             case 'email':
                 formData.append('email', document.getElementById('email').value);
@@ -836,8 +803,7 @@ function testChannel(channelType, existingConfig = null) {
                 break;
         }
     }
-    
-    // Send AJAX request
+
     fetch('/channels/test', {
         method: 'POST',
         headers: {
@@ -847,13 +813,12 @@ function testChannel(channelType, existingConfig = null) {
     })
     .then(response => response.json())
     .then(data => {
-        // Reset button for new channels
         if (!isExistingChannel) {
             const testBtn = document.getElementById('testChannelBtn');
             testBtn.disabled = false;
             testBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i>Test Channel';
         }
-        
+
         if (data.success) {
             showToast(data.message, 'success');
         } else {
@@ -861,23 +826,20 @@ function testChannel(channelType, existingConfig = null) {
         }
     })
     .catch(error => {
-        // Reset button for new channels
         if (!isExistingChannel) {
             const testBtn = document.getElementById('testChannelBtn');
             testBtn.disabled = false;
             testBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i>Test Channel';
         }
-        
-        showToast('❌ Test failed: ' + error.message + ' Please check your configuration and try again.', 'error');
+
+        showToast('Test failed: ' + error.message + ' Please check your configuration and try again.', 'error');
     });
 }
 
-
-// Function to show toast messages dynamically
 function showToast(message, type = 'info') {
     const toastContainer = document.getElementById('toast-container');
     if (!toastContainer) return;
-    
+
     const typeConfig = {
         success: {
             icon: 'fa-check',
@@ -908,11 +870,11 @@ function showToast(message, type = 'info') {
             title: 'Info'
         }
     };
-    
+
     const config = typeConfig[type] || typeConfig.info;
-    
+
     const toast = document.createElement('div');
-    toast.className = `toast bg-white border-l-4 ${config.borderColor} rounded-lg shadow-lg p-4 flex items-start animate-slide-in`;
+    toast.className = `toast bg-white dark:bg-slate-800 border-l-4 ${config.borderColor} rounded-lg shadow-lg p-4 flex items-start animate-slide-in`;
     toast.innerHTML = `
         <div class="flex-shrink-0">
             <div class="w-8 h-8 ${config.bgColor} rounded-full flex items-center justify-center">
@@ -920,37 +882,34 @@ function showToast(message, type = 'info') {
             </div>
         </div>
         <div class="ml-3 flex-1">
-            <p class="text-sm font-medium text-gray-900">${config.title}</p>
-            <p class="text-sm text-gray-600 mt-0.5">${message}</p>
+            <p class="text-sm font-medium text-gray-900 dark:text-white">${config.title}</p>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">${message}</p>
         </div>
-        <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
+        <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition-colors">
             <i class="fas fa-times text-sm"></i>
         </button>
     `;
-    
+
     toastContainer.appendChild(toast);
-    
-    // Auto-dismiss after 5 seconds
+
     setTimeout(() => {
         toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
         toast.style.opacity = '0';
         toast.style.transform = 'translateX(100%)';
-        
+
         setTimeout(() => {
             toast.remove();
         }, 300);
     }, 5000);
 }
 
-// Update webhook placeholder and help text based on selected format
 function updateWebhookPlaceholder() {
     const format = document.getElementById('webhook_format').value;
     const urlInput = document.getElementById('generic_webhook_url');
     const urlHelp = document.getElementById('webhook_url_help');
     const formatHelp = document.getElementById('webhook_format_help');
     const googleChatHelp = document.getElementById('google_chat_help');
-    
-    // Update placeholder and help based on format
+
     switch(format) {
         case 'google_chat':
             urlInput.placeholder = 'https://chat.googleapis.com/v1/spaces/XXXXX/messages?key=...';
@@ -960,11 +919,11 @@ function updateWebhookPlaceholder() {
             break;
         case 'simple_text':
             urlInput.placeholder = 'https://example.com/webhook-endpoint';
-            urlHelp.innerHTML = 'Sends simple JSON payload: <code class="bg-gray-100 px-1 rounded">{"text":"message"}</code>';
+            urlHelp.innerHTML = 'Sends simple JSON payload: <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">{"text":"message"}</code>';
             formatHelp.textContent = 'Compatible with services expecting simple text payloads.';
             googleChatHelp.classList.add('hidden');
             break;
-        default: // generic
+        default:
             urlInput.placeholder = 'https://example.com/webhook-endpoint';
             urlHelp.textContent = 'Will receive JSON payload compatible with n8n/Zapier/Make.';
             formatHelp.textContent = 'Sends structured JSON with event type, message, data, and timestamp.';
@@ -973,8 +932,4 @@ function updateWebhookPlaceholder() {
     }
 }
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/groups/index.php b/app/Views/groups/index.twig
similarity index 58%
rename from app/Views/groups/index.php
rename to app/Views/groups/index.twig
index e6bd9c5..ad2113f 100644
--- a/app/Views/groups/index.php
+++ b/app/Views/groups/index.twig
@@ -1,32 +1,32 @@
-<?php
-$title = 'Notification Groups';
-$pageTitle = 'Notification Groups';
-$pageDescription = 'Manage notification channels and assignments';
-$pageIcon = 'fas fa-bell';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
 
-<!-- Quick Actions -->
+{% set title = 'Notification Groups' %}
+{% set pageTitle = 'Notification Groups' %}
+{% set pageDescription = 'Manage notification channels and assignments' %}
+{% set pageIcon = 'fas fa-bell' %}
+
+{% block content %}
+{# Quick Actions #}
 <div class="mb-4 flex gap-2 justify-end">
-    <!-- Export Dropdown -->
+    {# Export Dropdown #}
     <div class="relative" id="groupExportDropdownWrapper">
         <button onclick="document.getElementById('groupExportMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors font-medium">
             <i class="fas fa-download mr-2"></i>
             Export
             <i class="fas fa-chevron-down ml-2 text-xs"></i>
         </button>
-        <div id="groupExportMenu" class="hidden absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 z-30 overflow-hidden">
-            <a href="/groups/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+        <div id="groupExportMenu" class="hidden absolute right-0 mt-1 w-44 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-30 overflow-hidden">
+            <a href="/groups/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                 <i class="fas fa-file-csv text-green-600 mr-2.5"></i>
                 Export as CSV
             </a>
-            <a href="/groups/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100">
+            <a href="/groups/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors border-t border-gray-100 dark:border-slate-700">
                 <i class="fas fa-file-code text-blue-600 mr-2.5"></i>
                 Export as JSON
             </a>
         </div>
     </div>
-    <!-- Import Button -->
+    {# Import Button #}
     <button onclick="document.getElementById('groupImportModal').classList.remove('hidden')" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
         <i class="fas fa-upload mr-2"></i>
         Import
@@ -37,67 +37,67 @@ ob_start();
     </a>
 </div>
 
-<!-- Info Card -->
-<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+{# Info Card #}
+<div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4 mb-4">
     <div class="flex items-start">
         <div class="flex-shrink-0">
             <i class="fas fa-info-circle text-blue-500 text-lg"></i>
         </div>
         <div class="ml-3">
-            <h3 class="text-sm font-semibold text-gray-900 mb-1">About Notification Groups</h3>
-            <p class="text-xs text-gray-600 leading-relaxed">
-                Notification groups allow you to organize your notification channels. You can create multiple channels 
-                (Email, Telegram, Discord, Slack, Mattermost, Pushover, Webhook) within each group, then assign domains to the group. When a domain 
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">About Notification Groups</h3>
+            <p class="text-xs text-gray-600 dark:text-slate-400 leading-relaxed">
+                Notification groups allow you to organize your notification channels. You can create multiple channels
+                (Email, Telegram, Discord, Slack, Mattermost, Pushover, Webhook) within each group, then assign domains to the group. When a domain
                 is about to expire, all active channels in its group will receive notifications.
             </p>
         </div>
     </div>
 </div>
 
-<!-- Groups List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <!-- Bulk Actions Bar (shown when groups are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
+{# Groups List #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {# Bulk Actions Bar (shown when groups are selected) #}
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
             <div class="flex items-center gap-3 flex-wrap">
                 <div class="flex items-center gap-2">
-                    <?php if (\Core\Auth::isAdmin()): ?>
+                    {% if auth.isAdmin %}
                     <button type="button" onclick="bulkTransfer()" class="inline-flex items-center px-4 py-1.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
                         <i class="fas fa-exchange-alt mr-1"></i> Transfer Selected
                     </button>
-                    <?php endif; ?>
+                    {% endif %}
                     <button type="button" onclick="bulkDelete()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                         <i class="fas fa-trash mr-1"></i> Delete Selected
                     </button>
                 </div>
             </div>
         </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
             <i class="fas fa-times mr-1.5"></i> Clear Selection
         </button>
     </div>
-    <?php if (!empty($groups)): ?>
-        <!-- Table View (Desktop) -->
+    {% if groups is not empty %}
+        {# Table View (Desktop) #}
         <div class="hidden md:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
                     <tr>
                         <th class="px-6 py-3 text-left">
-                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 text-primary focus:ring-primary">
+                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Group Name</th>
-                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Description</th>
-                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Channels</th>
-                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Domains</th>
-                        <th class="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Group Name</th>
+                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Description</th>
+                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Channels</th>
+                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Domains</th>
+                        <th class="px-6 py-4 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($groups as $group): ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150">
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for group in groups %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
                             <td class="px-6 py-4">
-                                <input type="checkbox" class="group-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="<?= $group['id'] ?>" onchange="updateBulkActions()">
+                                <input type="checkbox" class="group-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" value="{{ group.id }}" onchange="updateBulkActions()">
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
                                 <div class="flex items-center">
@@ -105,108 +105,108 @@ ob_start();
                                         <i class="fas fa-bell text-primary"></i>
                                     </div>
                                     <div class="ml-4">
-                                        <div class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($group['name']) ?></div>
+                                        <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ group.name }}</div>
                                     </div>
                                 </div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-700 max-w-xs truncate">
-                                    <?= htmlspecialchars($group['description'] ?? 'No description') ?>
+                                <div class="text-sm text-gray-700 dark:text-slate-300 max-w-xs truncate">
+                                    {{ group.description|default('No description') }}
                                 </div>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-400">
                                     <i class="fas fa-plug mr-1"></i>
-                                    <?= $group['channel_count'] ?> channel<?= $group['channel_count'] != 1 ? 's' : '' ?>
+                                    {{ group.channel_count }} channel{{ group.channel_count != 1 ? 's' : '' }}
                                 </span>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/20 text-green-800 dark:text-green-400">
                                     <i class="fas fa-globe mr-1"></i>
-                                    <?= $group['domain_count'] ?> domain<?= $group['domain_count'] != 1 ? 's' : '' ?>
+                                    {{ group.domain_count }} domain{{ group.domain_count != 1 ? 's' : '' }}
                                 </span>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                 <div class="flex items-center justify-end space-x-2">
-                                    <a href="/groups/<?= $group['id'] ?>/edit" class="text-blue-600 hover:text-blue-800" title="Manage">
+                                    <a href="/groups/{{ group.id }}/edit" class="text-blue-600 hover:text-blue-800" title="Manage">
                                         <i class="fas fa-cog"></i>
                                     </a>
-                                    <?php if (\Core\Auth::isAdmin()): ?>
-                                        <button onclick="transferGroup(<?= $group['id'] ?>, '<?= htmlspecialchars($group['name']) ?>')" 
-                                                class="text-green-600 hover:text-green-800" 
+                                    {% if auth.isAdmin %}
+                                        <button onclick="transferGroup({{ group.id }}, '{{ group.name|e('js') }}')"
+                                                class="text-green-600 hover:text-green-800"
                                                 title="Transfer Group">
                                             <i class="fas fa-exchange-alt"></i>
                                         </button>
-                                    <?php endif; ?>
-                                    <form method="POST" action="/groups/<?= $group['id'] ?>/delete" class="inline" onsubmit="return confirm('Are you sure? Domains will be unassigned from this group.')">
-                                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+                                    {% endif %}
+                                    <form method="POST" action="/groups/{{ group.id }}/delete" class="inline" onsubmit="return confirm('Are you sure? Domains will be unassigned from this group.')">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                         <button type="submit" class="text-red-600 hover:text-red-800" title="Delete"
-                                                aria-label="Delete group <?= htmlspecialchars($group['name']) ?>">
+                                                aria-label="Delete group {{ group.name }}">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </form>
                                 </div>
                             </td>
                         </tr>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </tbody>
             </table>
         </div>
 
-        <!-- Card View (Mobile) -->
-        <div class="md:hidden divide-y divide-gray-200">
-            <?php foreach ($groups as $group): ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
+        {# Card View (Mobile) #}
+        <div class="md:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for group in groups %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
                     <div class="flex items-start justify-between mb-3">
                         <div class="flex items-center">
                             <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
                                 <i class="fas fa-bell text-primary"></i>
                             </div>
                             <div class="ml-3">
-                                <h3 class="font-semibold text-gray-900"><?= htmlspecialchars($group['name']) ?></h3>
-                                <p class="text-sm text-gray-500"><?= htmlspecialchars($group['description'] ?? 'No description') ?></p>
+                                <h3 class="font-semibold text-gray-900 dark:text-white">{{ group.name }}</h3>
+                                <p class="text-sm text-gray-500 dark:text-slate-400">{{ group.description|default('No description') }}</p>
                             </div>
                         </div>
                     </div>
-                    
+
                     <div class="flex space-x-3 mb-3">
-                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-400">
                             <i class="fas fa-plug mr-1"></i>
-                            <?= $group['channel_count'] ?> channels
+                            {{ group.channel_count }} channels
                         </span>
-                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/20 text-green-800 dark:text-green-400">
                             <i class="fas fa-globe mr-1"></i>
-                            <?= $group['domain_count'] ?> domains
+                            {{ group.domain_count }} domains
                         </span>
                     </div>
-                    
+
                     <div class="flex space-x-2">
-                        <a href="/groups/<?= $group['id'] ?>/edit" class="flex-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded text-center text-sm hover:bg-blue-100 transition-colors">
+                        <a href="/groups/{{ group.id }}/edit" class="flex-1 px-3 py-1.5 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded text-center text-sm hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
                             <i class="fas fa-cog mr-1"></i> Manage
                         </a>
-                        <form method="POST" action="/groups/<?= $group['id'] ?>/delete" class="flex-1" onsubmit="return confirm('Are you sure? Domains will be unassigned from this group.')">
-                            <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
-                            <button type="submit" class="w-full px-3 py-1.5 bg-red-50 text-red-600 rounded text-center text-sm hover:bg-red-100 transition-colors">
+                        <form method="POST" action="/groups/{{ group.id }}/delete" class="flex-1" onsubmit="return confirm('Are you sure? Domains will be unassigned from this group.')">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                            <button type="submit" class="w-full px-3 py-1.5 bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 rounded text-center text-sm hover:bg-red-100 dark:hover:bg-red-500/20 transition-colors">
                                 <i class="fas fa-trash mr-1"></i> Delete
                             </button>
                         </form>
                     </div>
                 </div>
-            <?php endforeach; ?>
+            {% endfor %}
         </div>
-    <?php else: ?>
+    {% else %}
         <div class="text-center py-12 px-6">
             <div class="mb-4">
-                <i class="fas fa-bell-slash text-gray-300 text-6xl"></i>
+                <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-6xl"></i>
             </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Notification Groups</h3>
-            <p class="text-sm text-gray-500 mb-4">Create your first notification group to start receiving alerts</p>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Notification Groups</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Create your first notification group to start receiving alerts</p>
             <a href="/groups/create" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                 <i class="fas fa-plus mr-2"></i>
                 Create Your First Group
             </a>
         </div>
-    <?php endif; ?>
+    {% endif %}
 </div>
 
 <script>
@@ -223,15 +223,14 @@ function updateBulkActions() {
     const bulkActions = document.getElementById('bulk-actions');
     const selectedCount = document.getElementById('selected-count');
     const selectAllCheckbox = document.getElementById('select-all');
-    
+
     if (checkboxes.length > 0) {
         bulkActions.classList.remove('hidden');
         selectedCount.textContent = checkboxes.length + ' group(s) selected';
     } else {
         bulkActions.classList.add('hidden');
     }
-    
-    // Update select all checkbox state
+
     const allCheckboxes = document.querySelectorAll('.group-checkbox');
     if (selectAllCheckbox) {
         selectAllCheckbox.checked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
@@ -255,139 +254,136 @@ function getSelectedGroupIds() {
 
 function bulkDelete() {
     const groupIds = getSelectedGroupIds();
-    
+
     if (groupIds.length === 0) {
         alert('Please select at least one group to delete');
         return;
     }
-    
+
     if (!confirm(`Are you sure you want to delete ${groupIds.length} group(s)? Domains will be unassigned from these groups.`)) {
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/groups/bulk-delete';
-    
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
+
     const idsInput = document.createElement('input');
     idsInput.type = 'hidden';
     idsInput.name = 'group_ids';
     idsInput.value = JSON.stringify(groupIds);
     form.appendChild(idsInput);
-    
+
     document.body.appendChild(form);
     form.submit();
 }
 
-// Transfer single group
 function transferGroup(groupId, groupName) {
-    const users = <?= json_encode($users ?? []) ?>;
-    
+    const users = {{ users|default([])|json_encode|raw }};
+
     if (users.length === 0) {
         alert('No users available for transfer');
         return;
     }
-    
-    const userOptions = users.map(user => 
+
+    const userOptions = users.map(user =>
         `<option value="${user.id}">${user.username} (${user.full_name || 'No name'})</option>`
     ).join('');
-            
-            const modal = document.createElement('div');
-            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
-            modal.innerHTML = `
-                <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
-                    <h3 class="text-lg font-semibold text-gray-900 mb-1">Transfer Group</h3>
-                    <p class="text-sm text-gray-600 mb-4">Transfer group "${groupName}" to another user.</p>
-                    
-                    <form method="POST" action="/groups/transfer">
-                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
-                        <input type="hidden" name="group_id" value="${groupId}">
-                        
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium text-gray-700 mb-2">Transfer to User</label>
-                            <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                                <option value="">Select User</option>
-                                ${userOptions}
-                            </select>
-                        </div>
-                        
-                        <div class="flex justify-end gap-3">
-                            <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm font-medium">
-                                Cancel
-                            </button>
-                            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
-                                Transfer
-                            </button>
-                        </div>
-                    </form>
+
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
+    modal.innerHTML = `
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Transfer Group</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Transfer group "${groupName}" to another user.</p>
+
+            <form method="POST" action="/groups/transfer">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <input type="hidden" name="group_id" value="${groupId}">
+
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Transfer to User</label>
+                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="">Select User</option>
+                        ${userOptions}
+                    </select>
                 </div>
-            `;
-            
+
+                <div class="flex justify-end gap-3">
+                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm font-medium text-gray-700 dark:text-slate-300">
+                        Cancel
+                    </button>
+                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
+                        Transfer
+                    </button>
+                </div>
+            </form>
+        </div>
+    `;
+
     document.body.appendChild(modal);
 }
 
-// Bulk transfer groups
 function bulkTransfer() {
     const groupIds = getSelectedGroupIds();
     if (groupIds.length === 0) {
         alert('Please select groups to transfer');
         return;
     }
-    
-    const users = <?= json_encode($users ?? []) ?>;
-    
+
+    const users = {{ users|default([])|json_encode|raw }};
+
     if (users.length === 0) {
         alert('No users available for transfer');
         return;
     }
-    
-    const userOptions = users.map(user => 
+
+    const userOptions = users.map(user =>
         `<option value="${user.id}">${user.username} (${user.full_name || 'No name'})</option>`
     ).join('');
-            
-            const modal = document.createElement('div');
-            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
-            modal.innerHTML = `
-                <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
-                    <h3 class="text-lg font-semibold text-gray-900 mb-1">Transfer Groups</h3>
-                    <p class="text-sm text-gray-600 mb-4">Transfer ${groupIds.length} selected group(s) to another user.</p>
-                    
-                    <form method="POST" action="/groups/bulk-transfer">
-                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
-                        ${groupIds.map(id => 
-                            `<input type="hidden" name="group_ids[]" value="${id}">`
-                        ).join('')}
-                        
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium text-gray-700 mb-2">Transfer to User</label>
-                            <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                                <option value="">Select User</option>
-                                ${userOptions}
-                            </select>
-                        </div>
-                        
-                        <div class="flex justify-end gap-3">
-                            <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm font-medium">
-                                Cancel
-                            </button>
-                            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
-                                Transfer All
-                            </button>
-                        </div>
-                    </form>
+
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
+    modal.innerHTML = `
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Transfer Groups</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Transfer ${groupIds.length} selected group(s) to another user.</p>
+
+            <form method="POST" action="/groups/bulk-transfer">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                ${groupIds.map(id =>
+                    `<input type="hidden" name="group_ids[]" value="${id}">`
+                ).join('')}
+
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Transfer to User</label>
+                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="">Select User</option>
+                        ${userOptions}
+                    </select>
                 </div>
-            `;
-            
+
+                <div class="flex justify-end gap-3">
+                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm font-medium text-gray-700 dark:text-slate-300">
+                        Cancel
+                    </button>
+                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
+                        Transfer All
+                    </button>
+                </div>
+            </form>
+        </div>
+    `;
+
     document.body.appendChild(modal);
 }
 
-// Close export dropdown when clicking outside
 document.addEventListener('click', function(e) {
     const wrapper = document.getElementById('groupExportDropdownWrapper');
     if (wrapper && !wrapper.contains(e.target)) {
@@ -395,7 +391,6 @@ document.addEventListener('click', function(e) {
     }
 });
 
-// Close import modal on backdrop click
 document.getElementById('groupImportModal')?.addEventListener('click', function(e) {
     if (e.target === this) {
         this.classList.add('hidden');
@@ -403,54 +398,54 @@ document.getElementById('groupImportModal')?.addEventListener('click', function(
 });
 </script>
 
-<!-- Import Modal -->
+{# Import Modal #}
 <div id="groupImportModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-    <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-900">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                 <i class="fas fa-upload text-primary mr-2"></i>Import Notification Groups
             </h3>
-            <button onclick="document.getElementById('groupImportModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
+            <button onclick="document.getElementById('groupImportModal').classList.add('hidden')" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300">
                 <i class="fas fa-times"></i>
             </button>
         </div>
         <form method="POST" action="/groups/import" enctype="multipart/form-data" id="groupImportForm">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="p-6 space-y-4">
-                <!-- Drag & Drop Zone -->
+                {# Drag & Drop Zone #}
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Select File</label>
-                    <div id="groupDropzone" class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">Select File</label>
+                    <div id="groupDropzone" class="relative border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50 dark:hover:bg-slate-700">
                         <input type="file" name="import_file" accept=".csv,.json" required id="groupFileInput"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                         <div id="groupDropzoneContent">
-                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                            <p class="text-sm text-gray-600 font-medium">Drag & drop your file here</p>
-                            <p class="text-xs text-gray-400 my-1">or</p>
+                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 dark:text-slate-500 mb-2"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 font-medium">Drag & drop your file here</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 my-1">or</p>
                             <span class="inline-flex items-center px-3 py-1.5 bg-primary text-white text-xs rounded-lg font-medium">
                                 <i class="fas fa-folder-open mr-1.5"></i>Browse Files
                             </span>
-                            <p class="mt-2.5 text-xs text-gray-400">CSV, JSON &middot; Max <?= \App\Helpers\ViewHelper::getMaxUploadSize() ?></p>
+                            <p class="mt-2.5 text-xs text-gray-400 dark:text-slate-500">CSV, JSON &middot; Max {{ max_upload_size() }}</p>
                         </div>
                         <div id="groupDropzoneFile" class="hidden">
                             <i class="fas fa-file-alt text-2xl text-primary mb-1.5"></i>
-                            <p class="text-sm font-medium text-gray-700" id="groupFileName"></p>
-                            <p class="text-xs text-gray-400" id="groupFileSize"></p>
+                            <p class="text-sm font-medium text-gray-700 dark:text-slate-300" id="groupFileName"></p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500" id="groupFileSize"></p>
                             <button type="button" id="groupFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
                                 <i class="fas fa-trash-alt mr-1"></i>Remove
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                    <p class="text-xs text-gray-700 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
-                    <p class="text-xs text-gray-600">CSV: <code class="bg-white px-1 rounded">group_name, group_description, channel_type, channel_config, is_active</code></p>
-                    <p class="text-xs text-gray-600 mt-0.5">JSON: array of group objects with nested channels array</p>
-                    <p class="text-xs text-gray-500 mt-1.5"><i class="fas fa-exclamation-triangle text-amber-500 mr-1"></i>Channels with masked secrets will be imported as <strong>disabled</strong>. Update the credentials and enable them manually.</p>
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-3">
+                    <p class="text-xs text-gray-700 dark:text-slate-300 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400">CSV: <code class="bg-white dark:bg-slate-700 px-1 rounded">group_name, group_description, channel_type, channel_config, is_active</code></p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">JSON: array of group objects with nested channels array</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1.5"><i class="fas fa-exclamation-triangle text-amber-500 mr-1"></i>Channels with masked secrets will be imported as <strong>disabled</strong>. Update the credentials and enable them manually.</p>
                 </div>
             </div>
-            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-2 rounded-b-lg">
-                <button type="button" onclick="document.getElementById('groupImportModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 flex justify-end gap-2 rounded-b-lg">
+                <button type="button" onclick="document.getElementById('groupImportModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                     Cancel
                 </button>
                 <button type="submit" id="groupImportBtn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors">
@@ -462,7 +457,6 @@ document.getElementById('groupImportModal')?.addEventListener('click', function(
 </div>
 
 <script>
-// --- Group Import drag-and-drop & loading ---
 (function() {
     const dropzone = document.getElementById('groupDropzone');
     const fileInput = document.getElementById('groupFileInput');
@@ -540,8 +534,4 @@ document.getElementById('groupImportModal')?.addEventListener('click', function(
     });
 })();
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/installer/complete.php b/app/Views/installer/complete.twig
similarity index 86%
rename from app/Views/installer/complete.php
rename to app/Views/installer/complete.twig
index ca88e6b..d780320 100644
--- a/app/Views/installer/complete.php
+++ b/app/Views/installer/complete.twig
@@ -24,7 +24,6 @@
 <body class="min-h-screen flex items-center justify-center p-4">
     <div class="max-w-2xl w-full">
         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-            <!-- Success Icon -->
             <div class="text-center mb-8">
                 <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-4">
                     <i class="fas fa-check-circle text-green-600 text-5xl"></i>
@@ -33,7 +32,6 @@
                 <p class="text-gray-600">Domain Monitor is ready to use</p>
             </div>
 
-            <!-- Important Notice -->
             <div class="bg-amber-50 border-2 border-amber-400 rounded-lg p-6 mb-6">
                 <div class="flex items-start">
                     <i class="fas fa-exclamation-triangle text-amber-600 text-2xl mr-4"></i>
@@ -45,11 +43,11 @@
                             <div class="space-y-2">
                                 <div class="flex items-center justify-between">
                                     <span class="text-sm font-medium text-gray-600">Username:</span>
-                                    <span class="text-sm font-mono font-bold text-gray-900 select-all"><?= htmlspecialchars($adminUsername ?? 'admin') ?></span>
+                                    <span class="text-sm font-mono font-bold text-gray-900 select-all">{{ adminUsername|default('admin') }}</span>
                                 </div>
                                 <div class="flex items-center justify-between">
                                     <span class="text-sm font-medium text-gray-600">Password:</span>
-                                    <span class="text-sm font-mono font-bold text-gray-900 select-all"><?= htmlspecialchars($adminPassword ?? '********') ?></span>
+                                    <span class="text-sm font-mono font-bold text-gray-900 select-all">{{ adminPassword|default('********') }}</span>
                                 </div>
                             </div>
                         </div>
@@ -57,7 +55,6 @@
                 </div>
             </div>
 
-            <!-- Success Checklist -->
             <div class="bg-gray-50 rounded-lg border border-gray-200 p-6 mb-6">
                 <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider mb-4">Installation Summary</h3>
                 <div class="space-y-3">
@@ -80,15 +77,14 @@
                 </div>
             </div>
 
-            <!-- Next Steps -->
             <div class="bg-blue-50 rounded-lg border border-blue-200 p-4 mb-6">
                 <h3 class="text-sm font-semibold text-blue-900 mb-3">
                     <i class="fas fa-lightbulb mr-2"></i>Next Steps
                 </h3>
                 <ol class="text-sm text-blue-800 space-y-1 ml-5 list-decimal">
                     <li>Log in with your admin credentials</li>
-                    <li>Configure email settings (Settings → Email)</li>
-                    <li>Import TLD registry data (TLD Registry → Import TLDs)</li>
+                    <li>Configure email settings (Settings &rarr; Email)</li>
+                    <li>Import TLD registry data (TLD Registry &rarr; Import TLDs)</li>
                     <li>Add your first domain</li>
                     <li>Set up notification groups</li>
                     <li>Configure cron job for automated monitoring</li>
@@ -102,7 +98,7 @@
         </div>
 
         <div class="text-center mt-6">
-            <p class="text-gray-500 text-xs">© <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
+            <p class="text-gray-500 text-xs">&copy; {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
         </div>
     </div>
 </body>
diff --git a/app/Views/installer/update.php b/app/Views/installer/update.twig
similarity index 80%
rename from app/Views/installer/update.php
rename to app/Views/installer/update.twig
index 6821322..4994913 100644
--- a/app/Views/installer/update.php
+++ b/app/Views/installer/update.twig
@@ -24,7 +24,6 @@
 <body class="min-h-screen flex items-center justify-center p-4">
     <div class="max-w-2xl w-full">
         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-            <!-- Header -->
             <div class="text-center mb-8">
                 <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-lg mb-4">
                     <i class="fas fa-arrow-up text-white text-3xl"></i>
@@ -33,7 +32,6 @@
                 <p class="text-gray-600">New database migrations are available</p>
             </div>
 
-            <!-- Warning -->
             <div class="bg-amber-50 border border-amber-300 rounded-lg p-4 mb-6">
                 <div class="flex items-start">
                     <i class="fas fa-exclamation-triangle text-amber-600 text-xl mr-3"></i>
@@ -44,38 +42,35 @@
                 </div>
             </div>
 
-            <!-- Pending Migrations -->
             <div class="mb-6">
                 <h2 class="text-lg font-semibold text-gray-900 mb-3">Pending Migrations</h2>
                 <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                     <ul class="space-y-2">
-                        <?php foreach ($migrations as $migration): ?>
+                        {% for migration in migrations %}
                         <li class="flex items-center text-sm">
                             <i class="fas fa-circle text-xs text-gray-400 mr-3"></i>
-                            <span class="font-mono text-gray-700"><?= htmlspecialchars($migration) ?></span>
+                            <span class="font-mono text-gray-700">{{ migration }}</span>
                         </li>
-                        <?php endforeach; ?>
+                        {% endfor %}
                     </ul>
                     <div class="mt-3 pt-3 border-t border-gray-300">
                         <p class="text-sm font-semibold text-gray-900">
                             <i class="fas fa-database mr-2"></i>
-                            Total: <?= count($migrations) ?> migration(s)
+                            Total: {{ migrations|length }} migration(s)
                         </p>
                     </div>
                 </div>
             </div>
 
-            <!-- Error Alert -->
-            <?php if (isset($_SESSION['error'])): ?>
+            {% if flash.error is defined %}
             <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
                 <div class="flex items-center">
                     <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-                    <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
+                    <span class="text-sm text-red-700">{{ flash.error }}</span>
                 </div>
             </div>
-            <?php unset($_SESSION['error']); endif; ?>
+            {% endif %}
 
-            <!-- Actions -->
             <form method="POST" action="/install/update" class="space-y-3">
                 <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors">
                     <i class="fas fa-download mr-2"></i>
@@ -89,7 +84,7 @@
         </div>
 
         <div class="text-center mt-6">
-            <p class="text-gray-500 text-xs">© <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
+            <p class="text-gray-500 text-xs">&copy; {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
         </div>
     </div>
 </body>
diff --git a/app/Views/installer/welcome.php b/app/Views/installer/welcome.twig
similarity index 92%
rename from app/Views/installer/welcome.php
rename to app/Views/installer/welcome.twig
index e7edf12..6260b38 100644
--- a/app/Views/installer/welcome.php
+++ b/app/Views/installer/welcome.twig
@@ -23,9 +23,7 @@
 </head>
 <body class="min-h-screen flex items-center justify-center p-4">
     <div class="max-w-2xl w-full">
-        <!-- Installer Card -->
         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-            <!-- Logo and Title -->
             <div class="text-center mb-8">
                 <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-lg mb-4">
                     <i class="fas fa-globe text-white text-3xl"></i>
@@ -34,7 +32,6 @@
                 <p class="text-gray-600">Welcome! Let's set up your monitoring system</p>
             </div>
 
-            <!-- Installation Steps -->
             <div class="bg-gray-50 rounded-lg border border-gray-200 p-6 mb-6">
                 <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wider mb-4">Installation Steps</h2>
                 <div class="space-y-3">
@@ -62,17 +59,15 @@
                 </div>
             </div>
 
-            <!-- Error Alert -->
-            <?php if (isset($_SESSION['error'])): ?>
+            {% if flash.error is defined %}
             <div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
                 <div class="flex items-center">
                     <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
-                    <span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
+                    <span class="text-sm text-red-700">{{ flash.error }}</span>
                 </div>
             </div>
-            <?php unset($_SESSION['error']); endif; ?>
+            {% endif %}
 
-            <!-- Installation Form -->
             <form method="POST" action="/install/run" class="space-y-5">
                 <div class="border-t border-gray-200 pt-6">
                     <h3 class="text-lg font-semibold text-gray-900 mb-4">Administrator Account</h3>
@@ -142,9 +137,8 @@
             </form>
         </div>
 
-        <!-- Footer -->
         <div class="text-center mt-6">
-            <p class="text-gray-500 text-xs">© <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
+            <p class="text-gray-500 text-xs">&copy; {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
         </div>
     </div>
 
diff --git a/app/Views/layout/base.php b/app/Views/layout/base.twig
similarity index 59%
rename from app/Views/layout/base.php
rename to app/Views/layout/base.twig
index 3e0de53..71a5485 100644
--- a/app/Views/layout/base.php
+++ b/app/Views/layout/base.twig
@@ -1,40 +1,8 @@
-<?php
-/**
- * Base Layout Template
- * Contains: HTML structure, meta tags, CSS/JS includes, global stats
- */
+{#
+ # Base Layout Template
+ # Contains: HTML structure, meta tags, CSS/JS includes, global stats
+ #}
 
-// Get current user ID (used for both notifications and stats)
-$userId = \Core\Auth::id();
-
-// Fetch notifications for top nav (available on all pages)
-if ($userId) {
-    $notificationData = \App\Helpers\LayoutHelper::getNotifications($userId);
-    $recentNotifications = $notificationData['items'];
-    $unreadNotifications = $notificationData['unread_count'];
-    // Update badge in top menu (admin only, uses cached update check data)
-    $updateBadge = \Core\Auth::isAdmin() ? \App\Helpers\LayoutHelper::getUpdateBadgeInfo() : ['show' => false, 'available' => false, 'label' => ''];
-} else {
-    $recentNotifications = [];
-    $unreadNotifications = 0;
-    $updateBadge = ['show' => false, 'available' => false, 'label' => ''];
-}
-
-// Get domain stats for sidebar (available on all pages)
-if (!isset($domainStats)) {
-    $domainStats = \App\Helpers\LayoutHelper::getDomainStats();
-}
-
-// Get application settings from database
-if (!isset($appName)) {
-    $appSettings = \App\Helpers\LayoutHelper::getAppSettings();
-    $appName = $appSettings['app_name'];
-    $appTimezone = $appSettings['app_timezone'];
-    $appVersion = $appSettings['app_version'];
-    
-    // Note: Timezone is now set early in public/index.php (before controllers run)
-}
-?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -45,24 +13,25 @@ if (!isset($appName)) {
     <meta name="author" content="Domain Monitor">
     <meta name="robots" content="noindex, nofollow">
     
-    <!-- Title -->
-    <title><?= $title ?? 'Domain Monitor' ?> - <?= $appName ?></title>
+    {# Title #}
+    <title>{{ title|default('Domain Monitor') }} - {{ appName }}</title>
     
-    <!-- Favicon -->
+    {# Favicon #}
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
     
-    <!-- Tailwind CSS -->
+    {# Tailwind CSS #}
     <script src="https://cdn.tailwindcss.com"></script>
     
-    <!-- Flag Icons -->
+    {# Flag Icons #}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.5.0/css/flag-icons.min.css" referrerpolicy="no-referrer" />
     
-    <!-- Font Awesome -->
+    {# Font Awesome #}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
-    <!-- Tailwind Configuration -->
+    {# Tailwind Configuration #}
     <script>
         tailwind.config = {
+            darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
@@ -81,37 +50,33 @@ if (!isset($appName)) {
         }
     </script>
     
-    <!-- Custom Styles -->
+    {# Theme initialization (prevent flash) #}
+    <script>
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.documentElement.classList.add('dark');
+            }
+        })();
+    </script>
+    
+    {# Custom Styles #}
     <link rel="stylesheet" href="/assets/style.css">
     
-    <!-- Custom Page Styles (optional) -->
-    <?php if (isset($customStyles)): ?>
-        <style><?= $customStyles ?></style>
-    <?php endif; ?>
+    {# Custom Page Styles (optional) #}
+    {% if customStyles is defined %}
+        <style>{{ customStyles|raw }}</style>
+    {% endif %}
     
     <style>
         /* Sidebar full height */
         .sidebar {
             height: 100vh;
-            transition: transform 0.3s ease-in-out;
+            transition: transform 0.3s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
         }
         
-        /* Mobile sidebar overlay */
-        .sidebar-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 25;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-        }
-        .sidebar-overlay.show {
-            opacity: 1;
-            visibility: visible;
-        }
-        
-        @media (max-width: 767px) {
+        @media (max-width: 768px) {
             .sidebar {
                 transform: translateX(-100%);
             }
@@ -133,152 +98,133 @@ if (!isset($appName)) {
             transform: translateY(0);
         }
         
-        /* Active sidebar link */
-        .sidebar-link.active {
-            background: #374151;
-            border-left: 4px solid #4A90E2;
+        /* Sidebar link hover effect */
+        .sidebar-link {
+            position: relative;
+        }
+        .sidebar-link::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 3px;
+            height: 0;
+            background: linear-gradient(to bottom, #3b82f6, #6366f1);
+            border-radius: 0 3px 3px 0;
+            transition: height 0.2s ease;
+        }
+        .sidebar-link:hover::before {
+            height: 50%;
         }
         
-        /* Mobile-friendly dropdown widths */
-        @media (max-width: 480px) {
-            #notificationsDropdown {
-                width: calc(100vw - 2rem);
-                right: -0.5rem;
-            }
-            #userDropdown {
-                width: calc(100vw - 2rem);
-                right: -0.5rem;
-            }
+        /* Custom scrollbar for sidebar */
+        .sidebar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(156, 163, 175, 0.3);
+            border-radius: 3px;
+        }
+        .sidebar::-webkit-scrollbar-thumb:hover {
+            background: rgba(156, 163, 175, 0.5);
+        }
+        .dark .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(100, 116, 139, 0.3);
+        }
+        .dark .sidebar::-webkit-scrollbar-thumb:hover {
+            background: rgba(100, 116, 139, 0.5);
         }
     </style>
+    
+    {% block head %}{% endblock %}
 </head>
-<body class="bg-gray-50">
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
     
-    <?php include __DIR__ . '/top-nav.php'; ?>
+    {% include 'layout/top-nav.twig' %}
     
-    <!-- Mobile Sidebar Overlay -->
-    <div id="sidebarOverlay" class="sidebar-overlay md:hidden" onclick="closeSidebar()"></div>
+    {# Mobile Sidebar Overlay #}
+    <div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-20 hidden md:hidden" onclick="closeSidebar()"></div>
     
-    <?php include __DIR__ . '/sidebar.php'; ?>
+    {% include 'layout/sidebar.twig' %}
     
-    <!-- Main Content Area -->
-    <main class="md:ml-64 pt-16 min-h-screen bg-gray-50">
+    {# Main Content Area #}
+    <main class="md:ml-64 pt-16 min-h-screen bg-gray-50 dark:bg-gray-900">
         <div class="p-6">
-            <!-- Flash Messages -->
-            <?php include __DIR__ . '/messages.php'; ?>
+            {# Flash Messages #}
+            {% include 'layout/messages.twig' %}
             
-            <!-- Page Content -->
-            <?php if (isset($content)): ?>
-                <?= $content ?>
-            <?php endif; ?>
+            {# Page Content #}
+            {% block content %}{% endblock %}
         </div>
     </main>
     
-    <!-- Global Scripts -->
+    {# Global Scripts #}
     <script>
+        // Theme toggle function
+        function toggleTheme() {
+            const html = document.documentElement;
+            const isDark = html.classList.contains('dark');
+            
+            if (isDark) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
         // Toggle sidebar on mobile
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
             const overlay = document.getElementById('sidebarOverlay');
             sidebar.classList.toggle('open');
-            overlay.classList.toggle('show');
-            // Prevent body scroll when sidebar is open
-            document.body.style.overflow = sidebar.classList.contains('open') ? 'hidden' : '';
+            overlay.classList.toggle('hidden');
         }
-        
-        // Close sidebar (for overlay click and link clicks)
+
+        // Close sidebar on mobile
         function closeSidebar() {
             const sidebar = document.getElementById('sidebar');
             const overlay = document.getElementById('sidebarOverlay');
             sidebar.classList.remove('open');
-            overlay.classList.remove('show');
-            document.body.style.overflow = '';
+            overlay.classList.add('hidden');
         }
-        
-        // Close sidebar when clicking a link (mobile only)
-        document.addEventListener('DOMContentLoaded', function() {
-            const sidebarLinks = document.querySelectorAll('#sidebar a');
-            sidebarLinks.forEach(link => {
-                link.addEventListener('click', function() {
-                    if (window.innerWidth < 768) {
-                        closeSidebar();
-                    }
-                });
-            });
-            
-            // Handle swipe to close sidebar on mobile
-            let touchStartX = 0;
-            let touchEndX = 0;
-            const sidebar = document.getElementById('sidebar');
-            
-            sidebar.addEventListener('touchstart', function(e) {
-                touchStartX = e.changedTouches[0].screenX;
-            }, { passive: true });
-            
-            sidebar.addEventListener('touchend', function(e) {
-                touchEndX = e.changedTouches[0].screenX;
-                handleSwipe();
-            }, { passive: true });
-            
-            function handleSwipe() {
-                const swipeThreshold = 50;
-                if (touchStartX - touchEndX > swipeThreshold) {
-                    // Swiped left - close sidebar
-                    closeSidebar();
-                }
-            }
-            
-            // Responsive search placeholder
-            const searchInput = document.getElementById('globalSearchInput');
-            if (searchInput) {
-                function updateSearchPlaceholder() {
-                    if (window.innerWidth < 640) {
-                        searchInput.placeholder = 'Search...';
-                    } else {
-                        searchInput.placeholder = 'Search domains or lookup WHOIS...';
-                    }
-                }
-                updateSearchPlaceholder();
-                window.addEventListener('resize', updateSearchPlaceholder);
-            }
-        });
 
-        // Close all dropdowns except the one specified
-        function closeOtherDropdowns(exceptId) {
+        function closeOtherDropdowns(except) {
             ['userDropdown', 'notificationsDropdown', 'quickActionsDropdown'].forEach(id => {
-                if (id !== exceptId) {
-                    const el = document.getElementById(id);
-                    if (el) el.classList.remove('show');
+                if (id !== except) {
+                    const dd = document.getElementById(id);
+                    if (dd) dd.classList.remove('show');
                 }
             });
         }
 
-        // Toggle user dropdown
         function toggleDropdown() {
             closeOtherDropdowns('userDropdown');
             document.getElementById('userDropdown').classList.toggle('show');
         }
 
-        // Toggle notifications dropdown
         function toggleNotifications() {
             closeOtherDropdowns('notificationsDropdown');
             document.getElementById('notificationsDropdown').classList.toggle('show');
         }
 
-        // Toggle quick actions dropdown
         function toggleQuickActions() {
             closeOtherDropdowns('quickActionsDropdown');
             document.getElementById('quickActionsDropdown').classList.toggle('show');
         }
 
-        // Close dropdowns when clicking outside
         document.addEventListener('click', function(event) {
             const dropdowns = [
                 { id: 'userDropdown', trigger: '[onclick="toggleDropdown()"]' },
                 { id: 'notificationsDropdown', trigger: '[onclick="toggleNotifications()"]' },
                 { id: 'quickActionsDropdown', trigger: '[onclick="toggleQuickActions()"]' }
             ];
-            
+
             dropdowns.forEach(({ id, trigger }) => {
                 const dd = document.getElementById(id);
                 if (dd && dd.classList.contains('show')) {
@@ -344,6 +290,7 @@ if (!isset($appName)) {
 
         function renderSearchResults(data) {
             let html = '';
+            const isDark = document.documentElement.classList.contains('dark');
             
             if (data.domains && data.domains.length > 0) {
                 html += '<div class="p-2">';
@@ -360,11 +307,11 @@ if (!isset($appName)) {
                     const colorClass = statusColors[domain.status_color] || 'text-gray-600';
                     
                     html += `
-                        <a href="/domains/${domain.id}" class="block px-3 py-2 hover:bg-gray-50 rounded-lg transition-colors">
+                        <a href="/domains/${domain.id}" class="block px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                             <div class="flex items-center justify-between">
                                 <div class="flex-1 min-w-0">
-                                    <p class="text-sm font-semibold text-gray-900 truncate">${escapeHtml(domain.domain_name)}</p>
-                                    <p class="text-xs text-gray-500">${escapeHtml(domain.registrar || 'Unknown registrar')}</p>
+                                    <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">${escapeHtml(domain.domain_name)}</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">${escapeHtml(domain.registrar || 'Unknown registrar')}</p>
                                 </div>
                                 ${domain.days_left !== null ? `
                                     <div class="ml-3 text-right">
@@ -382,11 +329,11 @@ if (!isset($appName)) {
             // Show WHOIS lookup option if no results and looks like a domain
             if (data.domains.length === 0 && data.isDomainLike) {
                 html += `
-                    <div class="p-4 border-t border-gray-200">
+                    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm font-medium text-gray-900">Domain not in portfolio</p>
-                                <p class="text-xs text-gray-500 mt-0.5">Perform WHOIS lookup for ${escapeHtml(data.query)}</p>
+                                <p class="text-sm font-medium text-gray-900 dark:text-white">Domain not in portfolio</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Perform WHOIS lookup for ${escapeHtml(data.query)}</p>
                             </div>
                             <button onclick="window.location.href='/search?q=${encodeURIComponent(data.query)}'" class="px-3 py-1.5 bg-primary text-white text-xs rounded-lg hover:bg-primary-dark">
                                 Lookup
@@ -395,14 +342,14 @@ if (!isset($appName)) {
                     </div>
                 `;
             } else if (data.domains.length === 0) {
-                html += '<div class="p-4 text-center text-sm text-gray-500">No results found</div>';
+                html += '<div class="p-4 text-center text-sm text-gray-500 dark:text-gray-400">No results found</div>';
             }
             
             // Add "View all results" link if there are results
             if (data.domains.length > 0) {
                 html += `
-                    <div class="border-t border-gray-200 p-2">
-                        <a href="/search?q=${encodeURIComponent(data.query)}" class="block px-3 py-2 text-center text-sm font-medium text-primary hover:bg-gray-50 rounded-lg">
+                    <div class="border-t border-gray-200 dark:border-gray-700 p-2">
+                        <a href="/search?q=${encodeURIComponent(data.query)}" class="block px-3 py-2 text-center text-sm font-medium text-primary hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg">
                             View all results →
                         </a>
                     </div>
@@ -419,11 +366,12 @@ if (!isset($appName)) {
         }
     </script>
     
-    <!-- Custom Page Scripts (optional) -->
-    <?php if (isset($customScripts)): ?>
-        <script><?= $customScripts ?></script>
-    <?php endif; ?>
+    {# Custom Page Scripts (optional) #}
+    {% if customScripts is defined %}
+        <script>{{ customScripts|raw }}</script>
+    {% endif %}
+    
+    {% block scripts %}{% endblock %}
     
 </body>
 </html>
-
diff --git a/app/Views/layout/messages.php b/app/Views/layout/messages.php
deleted file mode 100644
index ed3e680..0000000
--- a/app/Views/layout/messages.php
+++ /dev/null
@@ -1,119 +0,0 @@
-<!-- Toast Notifications Container -->
-<div id="toast-container" class="fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm">
-    
-    <!-- Success Toast -->
-    <?php if (isset($_SESSION['success'])): ?>
-        <div class="toast bg-white border-l-4 border-green-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in">
-            <div class="flex-shrink-0">
-                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                    <i class="fas fa-check text-green-600 text-sm"></i>
-                </div>
-            </div>
-            <div class="ml-3 flex-1">
-                <p class="text-sm font-medium text-gray-900">Success</p>
-                <p class="text-sm text-gray-600 mt-0.5"><?= htmlspecialchars($_SESSION['success']) ?></p>
-            </div>
-            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times text-sm"></i>
-            </button>
-        </div>
-        <?php unset($_SESSION['success']); ?>
-    <?php endif; ?>
-
-    <!-- Error Toast -->
-    <?php if (isset($_SESSION['error'])): ?>
-        <div class="toast bg-white border-l-4 border-red-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in">
-            <div class="flex-shrink-0">
-                <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
-                    <i class="fas fa-times text-red-600 text-sm"></i>
-                </div>
-            </div>
-            <div class="ml-3 flex-1">
-                <p class="text-sm font-medium text-gray-900">Error</p>
-                <p class="text-sm text-gray-600 mt-0.5"><?= htmlspecialchars($_SESSION['error']) ?></p>
-            </div>
-            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times text-sm"></i>
-            </button>
-        </div>
-        <?php unset($_SESSION['error']); ?>
-    <?php endif; ?>
-
-    <!-- Warning Toast -->
-    <?php if (isset($_SESSION['warning'])): ?>
-        <div class="toast bg-white border-l-4 border-orange-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in">
-            <div class="flex-shrink-0">
-                <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="fas fa-exclamation-triangle text-orange-600 text-sm"></i>
-                </div>
-            </div>
-            <div class="ml-3 flex-1">
-                <p class="text-sm font-medium text-gray-900">Warning</p>
-                <p class="text-sm text-gray-600 mt-0.5"><?= htmlspecialchars($_SESSION['warning']) ?></p>
-            </div>
-            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times text-sm"></i>
-            </button>
-        </div>
-        <?php unset($_SESSION['warning']); ?>
-    <?php endif; ?>
-
-    <!-- Info Toast -->
-    <?php if (isset($_SESSION['info'])): ?>
-        <div class="toast bg-white border-l-4 border-blue-500 rounded-lg shadow-lg p-4 flex items-start animate-slide-in">
-            <div class="flex-shrink-0">
-                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                    <i class="fas fa-info text-blue-600 text-sm"></i>
-                </div>
-            </div>
-            <div class="ml-3 flex-1">
-                <p class="text-sm font-medium text-gray-900">Info</p>
-                <p class="text-sm text-gray-600 mt-0.5"><?= htmlspecialchars($_SESSION['info']) ?></p>
-            </div>
-            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times text-sm"></i>
-            </button>
-        </div>
-        <?php unset($_SESSION['info']); ?>
-    <?php endif; ?>
-
-</div>
-
-<!-- Toast Auto-Dismiss Script -->
-<script>
-    // Auto-dismiss toasts after 5 seconds
-    document.addEventListener('DOMContentLoaded', function() {
-        const toasts = document.querySelectorAll('.toast');
-        
-        toasts.forEach(toast => {
-            // Add fade-out animation after 5 seconds
-            setTimeout(() => {
-                toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
-                toast.style.opacity = '0';
-                toast.style.transform = 'translateX(100%)';
-                
-                // Remove from DOM after animation
-                setTimeout(() => {
-                    toast.remove();
-                }, 300);
-            }, 5000);
-        });
-    });
-</script>
-
-<style>
-    @keyframes slideIn {
-        from {
-            transform: translateX(100%);
-            opacity: 0;
-        }
-        to {
-            transform: translateX(0);
-            opacity: 1;
-        }
-    }
-    
-    .animate-slide-in {
-        animation: slideIn 0.3s ease-out;
-    }
-</style>
diff --git a/app/Views/layout/messages.twig b/app/Views/layout/messages.twig
new file mode 100644
index 0000000..6f5fdaa
--- /dev/null
+++ b/app/Views/layout/messages.twig
@@ -0,0 +1,115 @@
+{# Toast Notifications Container #}
+<div id="toast-container" class="fixed bottom-4 right-4 z-[9999] space-y-3 max-w-sm">
+    
+    {# Success Toast #}
+    {% if flash.success is defined %}
+        <div class="toast bg-white dark:bg-slate-800 border-l-4 border-green-500 rounded-lg shadow-lg dark:shadow-slate-900/50 p-4 flex items-start animate-slide-in">
+            <div class="flex-shrink-0">
+                <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+                    <i class="fas fa-check text-green-600 dark:text-green-400 text-sm"></i>
+                </div>
+            </div>
+            <div class="ml-3 flex-1">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Success</p>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">{{ flash.success }}</p>
+            </div>
+            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times text-sm"></i>
+            </button>
+        </div>
+    {% endif %}
+
+    {# Error Toast #}
+    {% if flash.error is defined %}
+        <div class="toast bg-white dark:bg-slate-800 border-l-4 border-red-500 rounded-lg shadow-lg dark:shadow-slate-900/50 p-4 flex items-start animate-slide-in">
+            <div class="flex-shrink-0">
+                <div class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
+                    <i class="fas fa-times text-red-600 dark:text-red-400 text-sm"></i>
+                </div>
+            </div>
+            <div class="ml-3 flex-1">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">{{ flash.error }}</p>
+            </div>
+            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times text-sm"></i>
+            </button>
+        </div>
+    {% endif %}
+
+    {# Warning Toast #}
+    {% if flash.warning is defined %}
+        <div class="toast bg-white dark:bg-slate-800 border-l-4 border-orange-500 rounded-lg shadow-lg dark:shadow-slate-900/50 p-4 flex items-start animate-slide-in">
+            <div class="flex-shrink-0">
+                <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
+                    <i class="fas fa-exclamation-triangle text-orange-600 dark:text-orange-400 text-sm"></i>
+                </div>
+            </div>
+            <div class="ml-3 flex-1">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">{{ flash.warning }}</p>
+            </div>
+            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times text-sm"></i>
+            </button>
+        </div>
+    {% endif %}
+
+    {# Info Toast #}
+    {% if flash.info is defined %}
+        <div class="toast bg-white dark:bg-slate-800 border-l-4 border-blue-500 rounded-lg shadow-lg dark:shadow-slate-900/50 p-4 flex items-start animate-slide-in">
+            <div class="flex-shrink-0">
+                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
+                    <i class="fas fa-info text-blue-600 dark:text-blue-400 text-sm"></i>
+                </div>
+            </div>
+            <div class="ml-3 flex-1">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Info</p>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mt-0.5">{{ flash.info }}</p>
+            </div>
+            <button onclick="this.parentElement.remove()" class="ml-3 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times text-sm"></i>
+            </button>
+        </div>
+    {% endif %}
+
+</div>
+
+{# Toast Auto-Dismiss Script #}
+<script>
+    // Auto-dismiss toasts after 5 seconds
+    document.addEventListener('DOMContentLoaded', function() {
+        const toasts = document.querySelectorAll('.toast');
+        
+        toasts.forEach(toast => {
+            // Add fade-out animation after 5 seconds
+            setTimeout(() => {
+                toast.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateX(100%)';
+                
+                // Remove from DOM after animation
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            }, 5000);
+        });
+    });
+</script>
+
+<style>
+    @keyframes slideIn {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    .animate-slide-in {
+        animation: slideIn 0.3s ease-out;
+    }
+</style>
diff --git a/app/Views/layout/sidebar.php b/app/Views/layout/sidebar.php
deleted file mode 100644
index 5f96a03..0000000
--- a/app/Views/layout/sidebar.php
+++ /dev/null
@@ -1,136 +0,0 @@
-<!-- Sidebar Navigation -->
-<aside id="sidebar" class="sidebar fixed left-0 top-0 w-64 bg-gray-900 text-white z-30">
-    <div class="h-full overflow-y-auto flex flex-col">
-        
-        <!-- Logo Section -->
-        <div class="px-4 sm:px-5 py-4 border-b border-gray-800 flex items-center justify-between flex-shrink-0">
-            <a href="/" class="flex items-center min-w-0 group">
-                <img src="/assets/logo.svg" alt="Domain Monitor" class="w-9 h-9 mr-3 flex-shrink-0">
-                <div class="min-w-0">
-                    <h1 class="text-base font-bold text-white truncate group-hover:text-primary transition-colors">Domain Monitor</h1>
-                    <p class="text-xs text-gray-500 truncate">Track your domains</p>
-                </div>
-            </a>
-            <!-- Close button for mobile -->
-            <button onclick="closeSidebar()" class="md:hidden w-9 h-9 flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors flex-shrink-0 ml-2">
-                <i class="fas fa-times text-lg"></i>
-            </button>
-        </div>
-        
-        <!-- Navigation Links -->
-        <nav class="px-4 py-3">
-            <div class="space-y-0.5">
-                <a href="/" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= $_SERVER['REQUEST_URI'] === '/' ? 'bg-primary text-white' : '' ?>">
-                    <i class="fas fa-chart-line text-xs mr-3 w-4"></i>
-                    <span class="text-sm">Dashboard</span>
-                </a>
-                
-                <a href="/domains" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/domains') !== false ? 'bg-primary text-white' : '' ?>">
-                    <i class="fas fa-globe text-xs mr-3 w-4"></i>
-                    <span class="text-sm">Domains</span>
-                </a>
-                
-                <a href="/groups" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/groups') !== false ? 'bg-primary text-white' : '' ?>">
-                    <i class="fas fa-bell text-xs mr-3 w-4"></i>
-                    <span class="text-sm">Notification Groups</span>
-                </a>
-                
-                <a href="/tld-registry" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/tld-registry') !== false ? 'bg-primary text-white' : '' ?>">
-                    <i class="fas fa-database text-xs mr-3 w-4"></i>
-                    <span class="text-sm">TLD Registry</span>
-                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] !== 'admin'): ?>
-                    <span class="ml-auto text-xs bg-gray-700 px-1.5 py-0.5 rounded text-gray-400">View</span>
-                    <?php endif; ?>
-                </a>
-                
-                <a href="/tags" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/tags') !== false ? 'bg-primary text-white' : '' ?>">
-                    <i class="fas fa-tags text-xs mr-3 w-4"></i>
-                    <span class="text-sm">Tag Management</span>
-                </a>
-            </div>
-
-            <!-- Tools Section -->
-            <div class="mt-4 pt-3 border-t border-gray-800">
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-3 mb-1">Tools</p>
-                <div class="space-y-0.5">
-                    <a href="/debug/whois" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/debug/whois') !== false ? 'bg-primary text-white' : '' ?>">
-                        <i class="fas fa-search text-xs mr-3 w-4"></i>
-                        <span class="text-sm">WHOIS Lookup</span>
-                    </a>
-                </div>
-            </div>
-
-            <!-- System Section (Admin Only) -->
-            <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-            <div class="mt-4 pt-3 border-t border-gray-800">
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-3 mb-1">System</p>
-                <div class="space-y-0.5">
-                    <a href="/settings" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/settings') !== false ? 'bg-primary text-white' : '' ?>">
-                        <i class="fas fa-cog text-xs mr-3 w-4"></i>
-                        <span class="text-sm">Settings</span>
-                    </a>
-                    <a href="/users" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/users') !== false ? 'bg-primary text-white' : '' ?>">
-                        <i class="fas fa-users text-xs mr-3 w-4"></i>
-                        <span class="text-sm">Users</span>
-                    </a>
-                    <a href="/errors" class="sidebar-link flex items-center px-3 py-2 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-150 <?= strpos($_SERVER['REQUEST_URI'], '/errors') !== false ? 'bg-primary text-white' : '' ?>">
-                        <i class="fas fa-bug text-xs mr-3 w-4"></i>
-                        <span class="text-sm">Error Logs</span>
-                    </a>
-                </div>
-            </div>
-            <?php endif; ?>
-        </nav>
-
-        <!-- Quick Stats Cards - Pinned to Bottom -->
-        <div class="mt-auto px-4 pb-3 border-t border-gray-800 pt-3">
-            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-3 mb-2">Quick Stats</div>
-            <div class="space-y-1.5">
-                <div class="bg-gray-800 rounded-md p-2.5 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-7 h-7 bg-blue-500/20 rounded flex items-center justify-center mr-2.5">
-                                <i class="fas fa-globe text-blue-400 text-xs"></i>
-                            </div>
-                            <span class="text-gray-400 text-xs">Total</span>
-                        </div>
-                        <span class="text-white font-semibold text-sm"><?= $domainStats['total'] ?? 0 ?></span>
-                    </div>
-                </div>
-                
-                <div class="bg-gray-800 rounded-md p-2.5 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-7 h-7 bg-orange-500/20 rounded flex items-center justify-center mr-2.5">
-                                <i class="fas fa-exclamation-triangle text-orange-400 text-xs"></i>
-                            </div>
-                            <span class="text-gray-400 text-xs" title="Within <?= $domainStats['expiring_threshold'] ?? 30 ?> days">Expiring</span>
-                        </div>
-                        <span class="text-orange-400 font-semibold text-sm"><?= $domainStats['expiring_soon'] ?? 0 ?></span>
-                    </div>
-                </div>
-                
-                <div class="bg-gray-800 rounded-md p-2.5 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-7 h-7 bg-green-500/20 rounded flex items-center justify-center mr-2.5">
-                                <i class="fas fa-check-circle text-green-400 text-xs"></i>
-                            </div>
-                            <span class="text-gray-400 text-xs">Active</span>
-                        </div>
-                        <span class="text-green-400 font-semibold text-sm"><?= $domainStats['active'] ?? 0 ?></span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="px-4 py-3 border-t border-gray-800">
-            <div class="text-center">
-                <p class="text-xs text-gray-500">© <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-300 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a></p>
-                <p class="text-xs text-gray-600 mt-0.5">v<?= $appVersion ?></p>
-            </div>
-        </div>
-    </div>
-</aside>
-
diff --git a/app/Views/layout/sidebar.twig b/app/Views/layout/sidebar.twig
new file mode 100644
index 0000000..6dd9e46
--- /dev/null
+++ b/app/Views/layout/sidebar.twig
@@ -0,0 +1,124 @@
+{# Sidebar Navigation Partial #}
+<aside id="sidebar" class="sidebar fixed left-0 top-0 w-64 z-30
+    bg-white dark:bg-slate-900
+    border-r border-gray-200 dark:border-slate-800
+    transition-colors duration-200">
+    <div class="h-full overflow-y-auto flex flex-col">
+        
+        {# Logo Section #}
+        <div class="h-16 px-4 border-b border-gray-200 dark:border-slate-800 flex items-center justify-between">
+            <a href="/" class="flex items-center gap-3">
+                <img src="{{ base_url }}/assets/logo.svg" alt="{{ appSettings.app_name|default('Domain Monitor') }}" class="h-11 w-auto">
+                <div class="flex flex-col">
+                    <span class="text-base font-bold text-gray-800 dark:text-white tracking-tight leading-tight">{{ appSettings.app_name|default('Domain Monitor') }}</span>
+                    <span class="text-xs text-gray-400 dark:text-slate-500 font-medium">Track your domains</span>
+                </div>
+            </a>
+            {# Mobile Close Button #}
+            <button onclick="closeSidebar()" class="md:hidden flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800 rounded-lg transition-colors">
+                <i class="fas fa-times text-lg"></i>
+            </button>
+        </div>
+        
+        {# Navigation Links #}
+        <nav class="px-3 py-4 flex-1">
+            <div class="space-y-0.5">
+                <a href="/" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                    {{ is_active('/') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                    <i class="fas fa-chart-line text-sm mr-3 w-4 {{ is_active('/') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                    <span class="text-sm">Dashboard</span>
+                </a>
+                
+                <a href="/domains" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                    {{ is_active_prefix('/domains') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                    <i class="fas fa-globe text-sm mr-3 w-4 {{ is_active_prefix('/domains') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                    <span class="text-sm">Domains</span>
+                </a>
+                
+                <a href="/groups" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                    {{ is_active_prefix('/groups') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                    <i class="fas fa-bell text-sm mr-3 w-4 {{ is_active_prefix('/groups') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                    <span class="text-sm">Notification Groups</span>
+                </a>
+                
+                <a href="/tld-registry" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                    {{ is_active_prefix('/tld-registry') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                    <i class="fas fa-database text-sm mr-3 w-4 {{ is_active_prefix('/tld-registry') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                    <span class="text-sm">TLD Registry</span>
+                    {% if session.role is defined and session.role != 'admin' %}
+                    <span class="ml-auto text-xs bg-gray-200 dark:bg-slate-700 px-1.5 py-0.5 rounded text-gray-500 dark:text-slate-400">View</span>
+                    {% endif %}
+                </a>
+                
+                <a href="/tags" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                    {{ is_active_prefix('/tags') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                    <i class="fas fa-tags text-sm mr-3 w-4 {{ is_active_prefix('/tags') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                    <span class="text-sm">Tag Management</span>
+                </a>
+            </div>
+
+            {# Tools Section #}
+            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-slate-800">
+                <p class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider px-3 mb-1.5">Tools</p>
+                <div class="space-y-0.5">
+                    <a href="/debug/whois" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                        {{ is_active_prefix('/debug/whois') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                        <i class="fas fa-search text-sm mr-3 w-4 {{ is_active_prefix('/debug/whois') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                        <span class="text-sm">WHOIS Lookup</span>
+                    </a>
+                </div>
+            </div>
+
+            {# System Section (Admin Only) #}
+            {% if session.role is defined and session.role == 'admin' %}
+            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-slate-800">
+                <p class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider px-3 mb-1.5">System</p>
+                <div class="space-y-0.5">
+                    <a href="/settings" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                        {{ is_active_prefix('/settings') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                        <i class="fas fa-cog text-sm mr-3 w-4 {{ is_active_prefix('/settings') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                        <span class="text-sm">Settings</span>
+                    </a>
+                    <a href="/users" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                        {{ is_active_prefix('/users') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                        <i class="fas fa-users text-sm mr-3 w-4 {{ is_active_prefix('/users') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                        <span class="text-sm">Users</span>
+                    </a>
+                    <a href="/errors" class="sidebar-link group flex items-center px-3 py-2 rounded-lg transition-all duration-200
+                        {{ is_active_prefix('/errors') ? 'bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-blue-400 font-medium' : 'text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900 dark:hover:text-white' }}">
+                        <i class="fas fa-bug text-sm mr-3 w-4 {{ is_active_prefix('/errors') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400' }}"></i>
+                        <span class="text-sm">Error Logs</span>
+                    </a>
+                </div>
+            </div>
+            {% endif %}
+        </nav>
+
+        {# Quick Stats - Compact #}
+        <div class="px-3 pb-2 border-t border-gray-200 dark:border-slate-800 pt-3">
+            <div class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider px-2 mb-2">Domain Stats</div>
+            <div class="grid grid-cols-3 gap-1.5 px-1">
+                <div class="bg-gray-50 dark:bg-slate-800 rounded-lg p-2 text-center">
+                    <div class="text-base font-bold text-gray-800 dark:text-white">{{ domainStats.total|default(0) }}</div>
+                    <div class="text-xs text-gray-400 dark:text-slate-500">Total</div>
+                </div>
+                <div class="bg-gray-50 dark:bg-slate-800 rounded-lg p-2 text-center">
+                    <div class="text-base font-bold text-orange-500 dark:text-orange-400">{{ domainStats.expiring_soon|default(0) }}</div>
+                    <div class="text-xs text-gray-400 dark:text-slate-500" title="Within {{ domainStats.expiring_threshold|default(30) }} days">Expiring</div>
+                </div>
+                <div class="bg-gray-50 dark:bg-slate-800 rounded-lg p-2 text-center">
+                    <div class="text-base font-bold text-emerald-500 dark:text-emerald-400">{{ domainStats.active|default(0) }}</div>
+                    <div class="text-xs text-gray-400 dark:text-slate-500">Active</div>
+                </div>
+            </div>
+        </div>
+
+        {# Footer #}
+        <div class="px-4 py-3 border-t border-gray-200 dark:border-slate-800">
+            <div class="text-center">
+                <p class="text-xs text-gray-500 dark:text-slate-500">© {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="text-gray-500 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-150" title="Visit {{ appSettings.app_name|default('Domain Monitor') }} on GitHub">{{ appSettings.app_name|default('Domain Monitor') }}</a></p>
+                <p class="text-xs text-gray-400 dark:text-slate-600 mt-0.5">v{{ appSettings.app_version|default(appVersion) }}</p>
+            </div>
+        </div>
+    </div>
+</aside>
diff --git a/app/Views/layout/top-nav.php b/app/Views/layout/top-nav.php
deleted file mode 100644
index 92b2936..0000000
--- a/app/Views/layout/top-nav.php
+++ /dev/null
@@ -1,396 +0,0 @@
-<!-- Top Navigation Bar -->
-<!-- Notification data ($recentNotifications, $unreadNotifications) loaded in base.php -->
-<nav class="bg-white border-b border-gray-200 fixed top-0 left-0 md:left-64 right-0 z-20">
-    <div class="px-4 sm:px-6 lg:px-8">
-        <div class="flex items-center justify-between h-16">
-            <!-- Left: Menu button and Page Header -->
-            <div class="flex items-center min-w-0">
-                <button onclick="toggleSidebar()" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700 md:hidden mr-4">
-                    <i class="fas fa-bars text-xl"></i>
-                </button>
-                
-                <!-- Page Title & Description -->
-                <div class="hidden md:block">
-                    <h2 class="text-xl font-bold text-gray-800 flex items-center">
-                        <?php if (isset($pageIcon)): ?>
-                            <i class="<?= $pageIcon ?> text-primary mr-2"></i>
-                        <?php endif; ?>
-                        <?= $pageTitle ?? $title ?? 'Dashboard' ?>
-                    </h2>
-                    <?php if (isset($pageDescription)): ?>
-                        <p class="text-sm text-gray-600 mt-0.5"><?= $pageDescription ?></p>
-                    <?php endif; ?>
-                </div>
-            </div>
-
-            <!-- Center: Search Bar -->
-            <div class="flex-1 max-w-2xl mx-2 sm:mx-4 lg:mx-8">
-                <form action="/search" method="GET" class="relative" id="globalSearchForm">
-                    <input type="text" 
-                           name="q"
-                           placeholder="Search..." 
-                           class="w-full pl-9 sm:pl-10 pr-3 sm:pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-sm"
-                           id="globalSearchInput"
-                           autocomplete="off">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
-                    
-                    <!-- Search Results Dropdown -->
-                    <div id="searchDropdown" class="hidden absolute top-full left-0 right-0 mt-2 bg-white rounded-lg shadow-xl border border-gray-200 max-h-96 overflow-y-auto z-50">
-                        <!-- Loading state -->
-                        <div id="searchLoading" class="hidden p-4 text-center">
-                            <i class="fas fa-spinner fa-spin text-primary"></i>
-                            <p class="text-sm text-gray-600 mt-2">Searching...</p>
-                        </div>
-                        
-                        <!-- Results will be inserted here -->
-                        <div id="searchResults"></div>
-                    </div>
-                </form>
-            </div>
-
-            <!-- Right: Actions & User -->
-            <div class="flex items-center space-x-1 sm:space-x-2">
-                <!-- Update available badge (admin only, when enabled in settings) -->
-                <?php if (!empty($updateBadge['show'])): ?>
-                    <a href="/settings#updates" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-100 text-amber-800 hover:bg-amber-200 transition-colors text-xs font-semibold whitespace-nowrap" title="An update is available">
-                        <i class="fas fa-cloud-download-alt"></i>
-                        <span>Update<?= !empty($updateBadge['label']) ? ' ' . htmlspecialchars($updateBadge['label']) : '' ?></span>
-                    </a>
-                <?php endif; ?>
-
-                <!-- Quick Actions Dropdown -->
-                <div class="relative">
-                    <button onclick="toggleQuickActions()" title="Quick Actions" class="flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-150">
-                        <i class="fas fa-plus"></i>
-                    </button>
-                    <div id="quickActionsDropdown" class="dropdown-menu absolute right-0 mt-2 w-52 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden py-1">
-                        <div class="px-3 py-2 border-b border-gray-100">
-                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Quick Actions</p>
-                        </div>
-                        <a href="/domains/create" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors">
-                            <div class="w-7 h-7 bg-blue-50 rounded-md flex items-center justify-center mr-3">
-                                <i class="fas fa-globe text-blue-600 text-xs"></i>
-                            </div>
-                            Add Domain
-                        </a>
-                        <a href="/groups/create" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-green-50 hover:text-green-700 transition-colors">
-                            <div class="w-7 h-7 bg-green-50 rounded-md flex items-center justify-center mr-3">
-                                <i class="fas fa-bell text-green-600 text-xs"></i>
-                            </div>
-                            Create Group
-                        </a>
-                        <a href="/tags" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition-colors">
-                            <div class="w-7 h-7 bg-purple-50 rounded-md flex items-center justify-center mr-3">
-                                <i class="fas fa-tag text-purple-600 text-xs"></i>
-                            </div>
-                            Create Tag
-                        </a>
-                        <a href="/debug/whois" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
-                            <div class="w-7 h-7 bg-indigo-50 rounded-md flex items-center justify-center mr-3">
-                                <i class="fas fa-search text-indigo-600 text-xs"></i>
-                            </div>
-                            WHOIS Lookup
-                        </a>
-                    </div>
-                </div>
-                
-                <!-- Notifications -->
-                <div class="relative">
-                    <button onclick="toggleNotifications()" title="Notifications" class="relative flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-150">
-                        <i class="fas fa-bell"></i>
-                        <?php if ($unreadNotifications > 0): ?>
-                            <span class="absolute top-1 right-1 flex h-2 w-2">
-                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
-                                <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
-                            </span>
-                        <?php endif; ?>
-                    </button>
-                    
-                    <!-- Notifications Dropdown -->
-                    <div id="notificationsDropdown" class="dropdown-menu absolute right-0 mt-2 w-80 sm:w-96 bg-white rounded-lg shadow-xl border border-gray-200 max-h-[32rem] overflow-hidden">
-                        <!-- Header -->
-                        <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
-                            <div class="flex items-center justify-between">
-                                <h3 class="text-sm font-semibold text-gray-900">Notifications</h3>
-                                <?php if ($unreadNotifications > 0): ?>
-                                    <span id="dropdownHeaderBadge" class="px-2 py-0.5 bg-orange-100 text-orange-700 text-xs font-semibold rounded"><?= $unreadNotifications ?> new</span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-
-                        <!-- Notifications List (Scrollable) -->
-                        <div class="max-h-96 overflow-y-auto">
-                            <?php if (!empty($recentNotifications)): ?>
-                                <?php foreach ($recentNotifications as $notif): ?>
-                                    <?php
-                                    // Build the click URL: update_available → settings#updates; domain → domain page; else mark as read only
-                                    $hasDomain = !empty($notif['domain_id']);
-                                    if ($notif['type'] === 'update_available') {
-                                        $notifUrl = '/notifications/' . $notif['id'] . '/mark-read?redirect=settings';
-                                    } elseif ($hasDomain) {
-                                        $notifUrl = '/notifications/' . $notif['id'] . '/mark-read?redirect=domain&domain_id=' . $notif['domain_id'];
-                                    } else {
-                                        $notifUrl = '/notifications/' . $notif['id'] . '/mark-read';
-                                    }
-                                    ?>
-                                    <div class="px-4 py-3 hover:bg-gray-50 border-b border-gray-100 bg-blue-50 transition-colors notification-item" data-id="<?= $notif['id'] ?>">
-                                        <div class="flex items-start space-x-3">
-                                            <?php $loginData = $notif['login_data'] ?? null; ?>
-                                            <?php if ($loginData && $notif['type'] === 'session_failed'): ?>
-                                                <!-- Failed login notification -->
-                                                <a href="<?= $notifUrl ?>" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
-                                                    <?php if (($loginData['country_code'] ?? 'xx') !== 'xx'): ?>
-                                                        <span class="fi fi-<?= strtolower($loginData['country_code']) ?> text-base rounded-sm"></span>
-                                                    <?php else: ?>
-                                                        <i class="fas fa-shield-alt text-red-600 text-sm"></i>
-                                                    <?php endif; ?>
-                                                </a>
-                                                <a href="<?= $notifUrl ?>" class="flex-1 min-w-0">
-                                                    <div class="flex items-center gap-2">
-                                                        <p class="text-sm font-semibold text-red-700"><?= htmlspecialchars($notif['title']) ?></p>
-                                                        <span class="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></span>
-                                                    </div>
-                                                    <p class="text-xs text-gray-600 mt-0.5">
-                                                        <?= htmlspecialchars(\App\Helpers\LayoutHelper::formatLoginDropdown($loginData)) ?>
-                                                    </p>
-                                                    <p class="text-xs text-gray-400 mt-1">
-                                                        <i class="fas fa-<?= htmlspecialchars($loginData['device_icon'] ?? 'desktop') ?> mr-0.5"></i>
-                                                        <?= htmlspecialchars($loginData['reason'] ?? 'Failed') ?> · <?= $notif['time_ago'] ?>
-                                                    </p>
-                                                </a>
-                                            <?php elseif ($loginData && $notif['type'] === 'session_new'): ?>
-                                                <!-- Session notification with flag icon -->
-                                                <a href="<?= $notifUrl ?>" class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
-                                                    <?php if ($loginData['country_code'] !== 'xx'): ?>
-                                                        <span class="fi fi-<?= strtolower($loginData['country_code']) ?> text-base rounded-sm"></span>
-                                                    <?php else: ?>
-                                                        <i class="fas fa-sign-in-alt text-blue-600 text-sm"></i>
-                                                    <?php endif; ?>
-                                                </a>
-                                                <a href="<?= $notifUrl ?>" class="flex-1 min-w-0">
-                                                    <div class="flex items-center gap-2">
-                                                        <p class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($notif['title']) ?></p>
-                                                        <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
-                                                    </div>
-                                                    <p class="text-xs text-gray-600 mt-0.5">
-                                                        <?= htmlspecialchars(\App\Helpers\LayoutHelper::formatLoginDropdown($loginData)) ?>
-                                                    </p>
-                                                    <p class="text-xs text-gray-400 mt-1">
-                                                        <i class="fas fa-<?= htmlspecialchars($loginData['device_icon'] ?? 'desktop') ?> mr-0.5"></i>
-                                                        <?= htmlspecialchars($loginData['method'] ?? 'Login') ?> · <?= $notif['time_ago'] ?>
-                                                    </p>
-                                                </a>
-                                            <?php else: ?>
-                                                <!-- Standard notification -->
-                                                <a href="<?= $notifUrl ?>" class="w-8 h-8 bg-<?= $notif['color'] ?>-100 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
-                                                    <i class="fas fa-<?= $notif['icon'] ?> text-<?= $notif['color'] ?>-600 text-sm"></i>
-                                                </a>
-                                                <a href="<?= $notifUrl ?>" class="flex-1 min-w-0">
-                                                    <div class="flex items-center gap-2">
-                                                        <p class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($notif['title']) ?></p>
-                                                        <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
-                                                    </div>
-                                                    <p class="text-xs text-gray-600 mt-0.5"><?= htmlspecialchars($notif['message']) ?></p>
-                                                    <p class="text-xs text-gray-400 mt-1">
-                                                        <?= $notif['time_ago'] ?>
-                                                        <?php if ($hasDomain): ?>
-                                                            <span class="text-primary ml-1"><i class="fas fa-external-link-alt text-[10px]"></i> View domain</span>
-                                                        <?php endif; ?>
-                                                    </p>
-                                                </a>
-                                            <?php endif; ?>
-                                            <button onclick="event.stopPropagation(); markNotifRead(<?= $notif['id'] ?>, this)" 
-                                                    class="w-7 h-7 flex items-center justify-center text-gray-400 hover:text-green-600 hover:bg-green-50 rounded transition-colors flex-shrink-0" 
-                                                    title="Mark as read">
-                                                <i class="fas fa-check text-xs"></i>
-                                            </button>
-                                        </div>
-                                    </div>
-                                <?php endforeach; ?>
-                            <?php else: ?>
-                                <div class="px-4 py-8 text-center">
-                                    <i class="fas fa-bell-slash text-gray-300 text-3xl mb-2"></i>
-                                    <p class="text-sm text-gray-600">No new notifications</p>
-                                    <p class="text-xs text-gray-400 mt-0.5">You're all caught up!</p>
-                                </div>
-                            <?php endif; ?>
-                        </div>
-
-                        <!-- Footer - View All Button -->
-                        <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
-                            <a href="/notifications" class="block text-center text-sm font-medium text-primary hover:text-primary-dark">
-                                View All Notifications
-                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Divider -->
-                <div class="hidden md:block h-8 w-px bg-gray-300"></div>
-                
-                <!-- User Dropdown -->
-                <div class="relative">
-                    <button onclick="toggleDropdown()" class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg transition-colors duration-150 focus:outline-none">
-                        <?php
-                        // Get user data for avatar
-                        $userModel = new \App\Models\User();
-                        $user = $userModel->find($_SESSION['user_id'] ?? 0);
-                        $avatar = $user ? \App\Helpers\AvatarHelper::getAvatar($user, 36) : null;
-                        ?>
-                        <?php if ($avatar && ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar')): ?>
-                            <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                                 alt="<?= htmlspecialchars($avatar['alt']) ?>" 
-                                 class="w-9 h-9 rounded-full object-cover"
-                                 loading="lazy">
-                        <?php else: ?>
-                            <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white font-semibold">
-                                <?= strtoupper(substr($_SESSION['username'] ?? 'A', 0, 1)) ?>
-                            </div>
-                        <?php endif; ?>
-                        <div class="hidden lg:block text-left">
-                            <p class="text-sm font-medium text-gray-700"><?= htmlspecialchars($_SESSION['full_name'] ?? $_SESSION['username'] ?? 'User') ?></p>
-                            <p class="text-xs text-gray-500"><?= htmlspecialchars($_SESSION['email'] ?? '') ?></p>
-                        </div>
-                        <i class="fas fa-chevron-down text-gray-400 text-xs hidden md:block"></i>
-                    </button>
-
-                    <!-- Dropdown Menu -->
-                    <div id="userDropdown" class="dropdown-menu absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden pb-2">
-                        <!-- Welcome Header -->
-                        <div class="px-4 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100">
-                            <div class="text-center">
-                                <div class="relative w-12 h-12 mx-auto mb-2">
-                                    <?php if ($avatar && ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar')): ?>
-                                        <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                                             alt="<?= htmlspecialchars($avatar['alt']) ?>" 
-                                             class="w-12 h-12 rounded-full object-cover"
-                                             loading="lazy">
-                                    <?php else: ?>
-                                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold text-lg">
-                                            <?= strtoupper(substr($_SESSION['username'] ?? 'A', 0, 1)) ?>
-                                        </div>
-                                    <?php endif; ?>
-                                    <!-- Online status dot -->
-                                    <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
-                                        <div class="w-2 h-2 bg-white rounded-full"></div>
-                                    </div>
-                                </div>
-                                <p class="text-sm font-semibold text-gray-900">Welcome back!</p>
-                                <p class="text-xs text-gray-500 mt-1"><?= htmlspecialchars($_SESSION['full_name'] ?? $_SESSION['username'] ?? 'User') ?></p>
-                                <!-- Role indicator -->
-                                <div class="mt-2">
-                                    <span class="inline-flex items-center px-2 py-1 bg-<?= $_SESSION['role'] === 'admin' ? 'amber' : 'blue' ?>-100 text-<?= $_SESSION['role'] === 'admin' ? 'amber' : 'blue' ?>-700 text-xs font-medium rounded-full">
-                                        <i class="fas fa-<?= $_SESSION['role'] === 'admin' ? 'crown' : 'user' ?> mr-1"></i>
-                                        <?= ucfirst($_SESSION['role'] ?? 'user') ?>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <a href="/profile#profile" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150">
-                            <i class="fas fa-user-circle w-5 text-gray-400 mr-3"></i>
-                            My Profile
-                        </a>
-                        
-                        <a href="/profile#security" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150">
-                            <i class="fas fa-cog w-5 text-gray-400 mr-3"></i>
-                            Account Settings
-                        </a>
-                        
-                        <a href="/notifications" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150">
-                            <i class="fas fa-bell w-5 text-gray-400 mr-3"></i>
-                            Notifications
-                            <?php if ($unreadNotifications > 0): ?>
-                                <span id="userDropdownNotifBadge" class="ml-auto px-2 py-0.5 bg-orange-500 text-white text-xs font-bold rounded-full">
-                                    <?= $unreadNotifications ?>
-                                </span>
-                            <?php endif; ?>
-                        </a>
-                        
-                        <div class="border-t border-gray-200 my-1"></div>
-                        
-                        <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150">
-                            <i class="fab fa-github w-5 text-gray-400 mr-3"></i>
-                            Help & Support
-                            <i class="fas fa-external-link-alt ml-auto text-xs text-gray-400"></i>
-                        </a>
-                        
-                        <div class="border-t border-gray-200 my-1"></div>
-                        
-                        <a href="/logout" class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-150">
-                            <i class="fas fa-sign-out-alt w-5 mr-3"></i>
-                            Logout
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</nav>
-
-<!-- Notification AJAX handler -->
-<script>
-function markNotifRead(notifId, btn) {
-    fetch('/notifications/' + notifId + '/mark-read?ajax=1', {
-        headers: {
-            'Accept': 'application/json',
-            'X-Requested-With': 'XMLHttpRequest'
-        }
-    })
-    .then(r => {
-        if (!r.ok) throw new Error('Request failed');
-        return r.json();
-    })
-    .then(data => {
-        if (!data.success) return;
-
-        const newCount = data.unread_count ?? 0;
-
-        // Remove the notification item from dropdown
-        const item = btn.closest('.notification-item');
-        if (item) {
-            const scrollable = document.querySelector('#notificationsDropdown .max-h-96');
-            const isLast = scrollable && scrollable.querySelectorAll('.notification-item').length <= 1;
-
-            if (isLast && scrollable) {
-                scrollable.style.transition = 'opacity 0.2s';
-                scrollable.style.opacity = '0';
-                setTimeout(() => {
-                    scrollable.innerHTML = '<div class="px-4 py-8 text-center">' +
-                        '<i class="fas fa-bell-slash text-gray-300 text-3xl mb-2"></i>' +
-                        '<p class="text-sm text-gray-600">No new notifications</p>' +
-                        '<p class="text-xs text-gray-400 mt-0.5">You\'re all caught up!</p>' +
-                        '</div>';
-                    scrollable.style.opacity = '1';
-                }, 200);
-            } else {
-                item.style.transition = 'opacity 0.2s, max-height 0.3s';
-                item.style.opacity = '0';
-                item.style.maxHeight = '0';
-                item.style.overflow = 'hidden';
-                item.style.padding = '0';
-                item.style.margin = '0';
-                setTimeout(() => item.remove(), 300);
-            }
-        }
-
-        // Update all badges using server-returned count
-        const headerBadge = document.getElementById('dropdownHeaderBadge');
-        const userBadge = document.getElementById('userDropdownNotifBadge');
-        const bellDot = document.querySelector('[onclick="toggleNotifications()"] .absolute.top-1');
-
-        if (newCount <= 0) {
-            if (headerBadge) headerBadge.remove();
-            if (userBadge) userBadge.remove();
-            if (bellDot) bellDot.remove();
-        } else {
-            if (headerBadge) headerBadge.textContent = newCount + ' new';
-            if (userBadge) userBadge.textContent = newCount;
-        }
-    })
-    .catch(() => {
-        window.location.href = '/notifications/' + notifId + '/mark-read';
-    });
-}
-</script>
diff --git a/app/Views/layout/top-nav.twig b/app/Views/layout/top-nav.twig
new file mode 100644
index 0000000..ca74182
--- /dev/null
+++ b/app/Views/layout/top-nav.twig
@@ -0,0 +1,373 @@
+<!-- Top Navigation Bar -->
+<nav class="h-16 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 fixed top-0 left-0 md:left-64 right-0 z-20 transition-colors duration-200">
+    <div class="h-full px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-full">
+            <!-- Left: Menu button and Page Header -->
+            <div class="flex items-center min-w-0">
+                <button onclick="toggleSidebar()" class="flex md:hidden items-center justify-center w-10 h-10 -ml-2 mr-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800 rounded-lg transition-colors focus:outline-none">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <div class="flex items-center gap-3">
+                    {% if pageIcon is defined %}
+                        <div class="hidden sm:flex items-center justify-center w-11 h-11 bg-primary/10 dark:bg-primary/20 rounded-xl">
+                            <i class="{{ pageIcon }} text-primary text-xl"></i>
+                        </div>
+                    {% endif %}
+                    <div class="min-w-0">
+                        <h2 class="text-lg md:text-xl font-bold text-gray-800 dark:text-white truncate">
+                            {{ pageTitle|default(title)|default('Dashboard') }}
+                        </h2>
+                        {% if pageDescription is defined %}
+                            <p class="hidden sm:block text-sm text-gray-600 dark:text-slate-400 truncate">{{ pageDescription }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Center: Search Bar -->
+            <div class="flex-1 max-w-md mx-4 lg:mx-6">
+                <form action="/search" method="GET" class="relative hidden md:block" id="globalSearchForm">
+                    <input type="text" 
+                           name="q"
+                           placeholder="Search domains or lookup WHOIS..." 
+                           class="w-full pl-9 pr-3 py-1.5 border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-slate-500 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-sm transition-colors duration-200"
+                           id="globalSearchInput"
+                           autocomplete="off">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-sm"></i>
+                    
+                    <div id="searchDropdown" class="hidden absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-gray-200 dark:border-slate-700 max-h-96 overflow-y-auto z-50">
+                        <div id="searchLoading" class="hidden p-4 text-center">
+                            <i class="fas fa-spinner fa-spin text-primary"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 mt-2">Searching...</p>
+                        </div>
+                        <div id="searchResults"></div>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Right: Actions & User -->
+            <div class="flex items-center space-x-2">
+                {% if updateBadge.show|default(false) %}
+                    <a href="/settings#updates" class="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-100 dark:bg-amber-500/20 text-amber-800 dark:text-amber-400 hover:bg-amber-200 dark:hover:bg-amber-500/30 transition-colors text-xs font-semibold whitespace-nowrap" title="An update is available">
+                        <i class="fas fa-cloud-download-alt"></i>
+                        <span>Update{{ updateBadge.label ? ' ' ~ updateBadge.label : '' }}</span>
+                    </a>
+                {% endif %}
+
+                <!-- Quick Actions Dropdown -->
+                <div class="relative">
+                    <button onclick="toggleQuickActions()" title="Quick Actions" class="flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800 rounded-lg transition-colors duration-150">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                    <div id="quickActionsDropdown" class="dropdown-menu absolute right-0 mt-2 w-52 bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-gray-200 dark:border-slate-700 overflow-hidden py-1">
+                        <div class="px-3 py-2 border-b border-gray-100 dark:border-slate-700">
+                            <p class="text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wide">Quick Actions</p>
+                        </div>
+                        <a href="/domains/create" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-blue-50 dark:hover:bg-blue-500/10 hover:text-primary transition-colors">
+                            <div class="w-7 h-7 bg-blue-50 dark:bg-blue-500/20 rounded-md flex items-center justify-center mr-3">
+                                <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-xs"></i>
+                            </div>
+                            Add Domain
+                        </a>
+                        <a href="/groups/create" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-green-50 dark:hover:bg-green-500/10 hover:text-green-700 dark:hover:text-green-400 transition-colors">
+                            <div class="w-7 h-7 bg-green-50 dark:bg-green-500/20 rounded-md flex items-center justify-center mr-3">
+                                <i class="fas fa-bell text-green-600 dark:text-green-400 text-xs"></i>
+                            </div>
+                            Create Group
+                        </a>
+                        <a href="/tags" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-purple-50 dark:hover:bg-purple-500/10 hover:text-purple-700 dark:hover:text-purple-400 transition-colors">
+                            <div class="w-7 h-7 bg-purple-50 dark:bg-purple-500/20 rounded-md flex items-center justify-center mr-3">
+                                <i class="fas fa-tag text-purple-600 dark:text-purple-400 text-xs"></i>
+                            </div>
+                            Create Tag
+                        </a>
+                        <a href="/debug/whois" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 hover:text-indigo-700 dark:hover:text-indigo-400 transition-colors">
+                            <div class="w-7 h-7 bg-indigo-50 dark:bg-indigo-500/20 rounded-md flex items-center justify-center mr-3">
+                                <i class="fas fa-search text-indigo-600 dark:text-indigo-400 text-xs"></i>
+                            </div>
+                            WHOIS Lookup
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Dark/Light Mode Toggle -->
+                <button onclick="toggleTheme()" id="themeToggle" title="Toggle theme" class="flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800 rounded-lg transition-colors duration-150">
+                    <i class="fas fa-moon dark:hidden"></i>
+                    <i class="fas fa-sun hidden dark:inline"></i>
+                </button>
+                
+                <!-- Notifications -->
+                <div class="relative">
+                    <button onclick="toggleNotifications()" title="Notifications" class="relative flex items-center justify-center w-9 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800 rounded-lg transition-colors duration-150">
+                        <i class="fas fa-bell"></i>
+                        {% if unreadNotifications > 0 %}
+                            <span class="absolute top-1 right-1 flex h-2 w-2">
+                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
+                                <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
+                            </span>
+                        {% endif %}
+                    </button>
+                    
+                    <!-- Notifications Dropdown -->
+                    <div id="notificationsDropdown" class="dropdown-menu absolute right-0 mt-2 w-80 sm:w-96 bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-gray-200 dark:border-slate-700 max-h-[32rem] overflow-hidden">
+                        <div class="px-4 py-3 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                            <div class="flex items-center justify-between">
+                                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Notifications</h3>
+                                {% if unreadNotifications > 0 %}
+                                    <span id="dropdownHeaderBadge" class="px-2 py-0.5 bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400 text-xs font-semibold rounded">{{ unreadNotifications }} new</span>
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        <div class="max-h-96 overflow-y-auto">
+                            {% if recentNotifications is not empty %}
+                                {% for notif in recentNotifications %}
+                                    {% set hasDomain = notif.domain_id is defined and notif.domain_id %}
+                                    {% if notif.type == 'update_available' %}
+                                        {% set notifUrl = '/notifications/' ~ notif.id ~ '/mark-read?redirect=settings' %}
+                                    {% elseif hasDomain %}
+                                        {% set notifUrl = '/notifications/' ~ notif.id ~ '/mark-read?redirect=domain&domain_id=' ~ notif.domain_id %}
+                                    {% else %}
+                                        {% set notifUrl = '/notifications/' ~ notif.id ~ '/mark-read' %}
+                                    {% endif %}
+                                    {% set loginData = notif.login_data|default(null) %}
+                                    <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700 border-b border-gray-100 dark:border-slate-700 bg-blue-50 dark:bg-blue-900/20 transition-colors notification-item" data-id="{{ notif.id }}">
+                                        <div class="flex items-start space-x-3">
+                                            {% if loginData and notif.type == 'session_failed' %}
+                                                <a href="{{ notifUrl }}" class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
+                                                    {% if (loginData.country_code|default('xx')) != 'xx' %}
+                                                        <span class="fi fi-{{ loginData.country_code|lower }} text-base rounded-sm"></span>
+                                                    {% else %}
+                                                        <i class="fas fa-shield-alt text-red-600 dark:text-red-400 text-sm"></i>
+                                                    {% endif %}
+                                                </a>
+                                                <a href="{{ notifUrl }}" class="flex-1 min-w-0">
+                                                    <div class="flex items-center gap-2">
+                                                        <p class="text-sm font-semibold text-red-700 dark:text-red-400">{{ notif.title }}</p>
+                                                        <span class="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></span>
+                                                    </div>
+                                                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">
+                                                        {{ format_login_dropdown(loginData) }}
+                                                    </p>
+                                                    <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">
+                                                        <i class="fas fa-{{ loginData.device_icon|default('desktop') }} mr-0.5"></i>
+                                                        {{ loginData.reason|default('Failed') }} &middot; {{ notif.time_ago }}
+                                                    </p>
+                                                </a>
+                                            {% elseif loginData and notif.type == 'session_new' %}
+                                                <a href="{{ notifUrl }}" class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
+                                                    {% if loginData.country_code != 'xx' %}
+                                                        <span class="fi fi-{{ loginData.country_code|lower }} text-base rounded-sm"></span>
+                                                    {% else %}
+                                                        <i class="fas fa-sign-in-alt text-blue-600 dark:text-blue-400 text-sm"></i>
+                                                    {% endif %}
+                                                </a>
+                                                <a href="{{ notifUrl }}" class="flex-1 min-w-0">
+                                                    <div class="flex items-center gap-2">
+                                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ notif.title }}</p>
+                                                        <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
+                                                    </div>
+                                                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">
+                                                        {{ format_login_dropdown(loginData) }}
+                                                    </p>
+                                                    <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">
+                                                        <i class="fas fa-{{ loginData.device_icon|default('desktop') }} mr-0.5"></i>
+                                                        {{ loginData.method|default('Login') }} &middot; {{ notif.time_ago }}
+                                                    </p>
+                                                </a>
+                                            {% else %}
+                                                <a href="{{ notifUrl }}" class="w-8 h-8 bg-{{ notif.color }}-100 dark:bg-{{ notif.color }}-900/30 rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
+                                                    <i class="fas fa-{{ notif.icon }} text-{{ notif.color }}-600 dark:text-{{ notif.color }}-400 text-sm"></i>
+                                                </a>
+                                                <a href="{{ notifUrl }}" class="flex-1 min-w-0">
+                                                    <div class="flex items-center gap-2">
+                                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ notif.title }}</p>
+                                                        <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
+                                                    </div>
+                                                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">{{ notif.message }}</p>
+                                                    <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">
+                                                        {{ notif.time_ago }}
+                                                        {% if hasDomain %}
+                                                            <span class="text-primary ml-1"><i class="fas fa-external-link-alt text-[10px]"></i> View domain</span>
+                                                        {% endif %}
+                                                    </p>
+                                                </a>
+                                            {% endif %}
+                                            <button onclick="event.stopPropagation(); markNotifRead({{ notif.id }}, this)" 
+                                                    class="w-7 h-7 flex items-center justify-center text-gray-400 dark:text-slate-500 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10 rounded transition-colors flex-shrink-0" 
+                                                    title="Mark as read">
+                                                <i class="fas fa-check text-xs"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                            {% else %}
+                                <div class="px-4 py-8 text-center">
+                                    <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-3xl mb-2"></i>
+                                    <p class="text-sm text-gray-600 dark:text-slate-400">No new notifications</p>
+                                    <p class="text-xs text-gray-400 dark:text-slate-500 mt-0.5">You're all caught up!</p>
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="px-4 py-3 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                            <a href="/notifications" class="block text-center text-sm font-medium text-primary hover:text-primary-dark">
+                                View All Notifications
+                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="hidden md:block h-8 w-px bg-gray-300 dark:bg-slate-700"></div>
+                
+                <!-- User Dropdown -->
+                <div class="relative">
+                    <button onclick="toggleDropdown()" class="flex items-center space-x-3 p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-150 focus:outline-none">
+                        {% if avatar and (avatar.type == 'uploaded' or avatar.type == 'gravatar') %}
+                            <img src="{{ avatar.url }}" 
+                                 alt="{{ avatar.alt|default('User avatar') }}" 
+                                 class="w-9 h-9 rounded-full object-cover"
+                                 loading="lazy">
+                        {% else %}
+                            <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white font-semibold">
+                                {{ (auth.username|default('A'))|first|upper }}
+                            </div>
+                        {% endif %}
+                        <div class="hidden lg:block text-left">
+                            <p class="text-sm font-medium text-gray-700 dark:text-white">{{ auth.fullName|default(auth.username)|default('User') }}</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400">{{ session.email|default('') }}</p>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 dark:text-slate-500 text-xs hidden md:block"></i>
+                    </button>
+
+                    <div id="userDropdown" class="dropdown-menu absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 overflow-hidden pb-2">
+                        <div class="px-4 py-4 border-b border-gray-200 dark:border-slate-700 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-slate-900 dark:to-slate-800">
+                            <div class="text-center">
+                                <div class="relative w-12 h-12 mx-auto mb-2">
+                                    {% if avatar and (avatar.type == 'uploaded' or avatar.type == 'gravatar') %}
+                                        <img src="{{ avatar.url }}" 
+                                             alt="{{ avatar.alt|default('User avatar') }}" 
+                                             class="w-12 h-12 rounded-full object-cover"
+                                             loading="lazy">
+                                    {% else %}
+                                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold text-lg">
+                                            {{ (auth.username|default('A'))|first|upper }}
+                                        </div>
+                                    {% endif %}
+                                    <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-slate-800 flex items-center justify-center">
+                                        <div class="w-2 h-2 bg-white rounded-full"></div>
+                                    </div>
+                                </div>
+                                <p class="text-sm font-semibold text-gray-900 dark:text-white">Welcome back!</p>
+                                <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">{{ auth.fullName|default(auth.username)|default('User') }}</p>
+                                <div class="mt-2">
+                                    {{ role_badge(auth.role|default('user'), 'xs') }}
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <a href="/profile#profile" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <i class="fas fa-user-circle w-5 text-gray-400 dark:text-slate-500 mr-3"></i>
+                            My Profile
+                        </a>
+                        
+                        <a href="/profile#security" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <i class="fas fa-cog w-5 text-gray-400 dark:text-slate-500 mr-3"></i>
+                            Account Settings
+                        </a>
+                        
+                        <a href="/notifications" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <i class="fas fa-bell w-5 text-gray-400 dark:text-slate-500 mr-3"></i>
+                            Notifications
+                            {% if unreadNotifications > 0 %}
+                                <span id="userDropdownNotifBadge" class="ml-auto px-2 py-0.5 bg-orange-500 text-white text-xs font-bold rounded-full">
+                                    {{ unreadNotifications }}
+                                </span>
+                            {% endif %}
+                        </a>
+                        
+                        <div class="border-t border-gray-200 dark:border-slate-700 my-1"></div>
+                        
+                        <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <i class="fab fa-github w-5 text-gray-400 dark:text-slate-500 mr-3"></i>
+                            Help & Support
+                            <i class="fas fa-external-link-alt ml-auto text-xs text-gray-400 dark:text-slate-500"></i>
+                        </a>
+                        
+                        <div class="border-t border-gray-200 dark:border-slate-700 my-1"></div>
+                        
+                        <a href="/logout" class="flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors duration-150">
+                            <i class="fas fa-sign-out-alt w-5 mr-3"></i>
+                            Logout
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<script>
+function markNotifRead(notifId, btn) {
+    fetch('/notifications/' + notifId + '/mark-read?ajax=1', {
+        headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+    })
+    .then(r => {
+        if (!r.ok) throw new Error('Request failed');
+        return r.json();
+    })
+    .then(data => {
+        if (!data.success) return;
+
+        const newCount = data.unread_count ?? 0;
+
+        const item = btn.closest('.notification-item');
+        if (item) {
+            const scrollable = document.querySelector('#notificationsDropdown .max-h-96');
+            const isLast = scrollable && scrollable.querySelectorAll('.notification-item').length <= 1;
+
+            if (isLast && scrollable) {
+                scrollable.style.transition = 'opacity 0.2s';
+                scrollable.style.opacity = '0';
+                setTimeout(() => {
+                    scrollable.innerHTML = '<div class="px-4 py-8 text-center">' +
+                        '<i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-3xl mb-2"></i>' +
+                        '<p class="text-sm text-gray-600 dark:text-slate-400">No new notifications</p>' +
+                        '<p class="text-xs text-gray-400 dark:text-slate-500 mt-0.5">You\'re all caught up!</p>' +
+                        '</div>';
+                    scrollable.style.opacity = '1';
+                }, 200);
+            } else {
+                item.style.transition = 'opacity 0.2s, max-height 0.3s';
+                item.style.opacity = '0';
+                item.style.maxHeight = '0';
+                item.style.overflow = 'hidden';
+                item.style.padding = '0';
+                item.style.margin = '0';
+                setTimeout(() => item.remove(), 300);
+            }
+        }
+
+        const headerBadge = document.getElementById('dropdownHeaderBadge');
+        const userBadge = document.getElementById('userDropdownNotifBadge');
+        const bellDot = document.querySelector('[onclick="toggleNotifications()"] .absolute.top-1');
+
+        if (newCount <= 0) {
+            if (headerBadge) headerBadge.remove();
+            if (userBadge) userBadge.remove();
+            if (bellDot) bellDot.remove();
+        } else {
+            if (headerBadge) headerBadge.textContent = newCount + ' new';
+            if (userBadge) userBadge.textContent = newCount;
+        }
+    })
+    .catch(() => {
+        window.location.href = '/notifications/' + notifId + '/mark-read';
+    });
+}
+</script>
diff --git a/app/Views/notifications/index.php b/app/Views/notifications/index.php
deleted file mode 100644
index 9b1b3fa..0000000
--- a/app/Views/notifications/index.php
+++ /dev/null
@@ -1,447 +0,0 @@
-<?php
-$title = 'Notifications';
-$pageTitle = 'Notifications';
-$pageDescription = 'View and manage your notifications';
-$pageIcon = 'fas fa-bell';
-ob_start();
-
-// Data is passed from the controller
-$filterType = $filters['type'] ?? '';
-$filterStatus = $filters['status'] ?? '';
-$filterDateRange = $filters['date_range'] ?? '';
-$page = $pagination['current_page'];
-$totalPages = $pagination['total_pages'];
-$perPage = $pagination['per_page'];
-$totalNotifications = $pagination['total'];
-$offset = $pagination['showing_from'] - 1;
-?>
-
-<!-- Action Buttons -->
-<div class="mb-4 flex flex-wrap gap-2 justify-between items-center">
-    <div class="flex gap-2">
-        <!-- Placeholder for future bulk selection actions -->
-    </div>
-    
-    <div class="flex gap-2">
-        <button onclick="markAllAsRead()" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors font-medium">
-            <i class="fas fa-check-double mr-2"></i>
-            Mark All Read
-        </button>
-        <button onclick="clearAll()" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium">
-            <i class="fas fa-trash-alt mr-2"></i>
-            Clear All
-        </button>
-    </div>
-</div>
-
-<!-- Filters & Search -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
-    <form method="GET" action="/notifications" id="filter-form">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <!-- Status Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="">All Notifications</option>
-                    <option value="unread" <?= $filterStatus === 'unread' ? 'selected' : '' ?>>Unread Only</option>
-                    <option value="read" <?= $filterStatus === 'read' ? 'selected' : '' ?>>Read Only</option>
-                </select>
-            </div>
-            
-            <!-- Type Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Type</label>
-                <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="">All Types</option>
-                    <optgroup label="Domain">
-                        <option value="domain_expiring" <?= $filterType === 'domain_expiring' ? 'selected' : '' ?>>Domain Expiring</option>
-                        <option value="domain_expired" <?= $filterType === 'domain_expired' ? 'selected' : '' ?>>Domain Expired</option>
-                        <option value="domain_available" <?= $filterType === 'domain_available' ? 'selected' : '' ?>>Domain Available</option>
-                        <option value="domain_registered" <?= $filterType === 'domain_registered' ? 'selected' : '' ?>>Domain Registered</option>
-                        <option value="domain_redemption" <?= $filterType === 'domain_redemption' ? 'selected' : '' ?>>Redemption Period</option>
-                        <option value="domain_pending_delete" <?= $filterType === 'domain_pending_delete' ? 'selected' : '' ?>>Pending Delete</option>
-                        <option value="domain_updated" <?= $filterType === 'domain_updated' ? 'selected' : '' ?>>Domain Updated</option>
-                        <option value="whois_failed" <?= $filterType === 'whois_failed' ? 'selected' : '' ?>>WHOIS Failed</option>
-                    </optgroup>
-                    <optgroup label="System">
-                        <option value="session_new" <?= $filterType === 'session_new' ? 'selected' : '' ?>>New Login</option>
-                        <option value="session_failed" <?= $filterType === 'session_failed' ? 'selected' : '' ?>>Failed Login</option>
-                        <option value="system_welcome" <?= $filterType === 'system_welcome' ? 'selected' : '' ?>>Welcome</option>
-                        <option value="system_upgrade" <?= $filterType === 'system_upgrade' ? 'selected' : '' ?>>System Upgrade</option>
-                        <option value="update_available" <?= $filterType === 'update_available' ? 'selected' : '' ?>>Update Available</option>
-                    </optgroup>
-                </select>
-            </div>
-            
-            <!-- Date Range -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Date Range</label>
-                <select name="date_range" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="">All Time</option>
-                    <option value="today" <?= $filterDateRange === 'today' ? 'selected' : '' ?>>Today</option>
-                    <option value="week" <?= $filterDateRange === 'week' ? 'selected' : '' ?>>This Week</option>
-                    <option value="month" <?= $filterDateRange === 'month' ? 'selected' : '' ?>>This Month</option>
-                </select>
-            </div>
-            
-            <!-- Apply/Reset Buttons -->
-            <div class="flex items-end space-x-2">
-                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                    <i class="fas fa-filter mr-2"></i>
-                    Apply Filters
-                </button>
-                <a href="/notifications" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
-                    <i class="fas fa-times mr-2"></i>
-                    Clear
-                </a>
-            </div>
-        </div>
-    </form>
-</div>
-
-<!-- Pagination Info & Per Page Selector -->
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $offset + 1 ?></span> to 
-        <span class="font-semibold text-gray-900"><?= min($offset + $perPage, $totalNotifications) ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $totalNotifications ?></span> notification(s)
-        <?php if ($unreadCount > 0): ?>
-            <span class="text-gray-400">•</span>
-            <span class="font-semibold text-blue-600"><?= $unreadCount ?></span> unread
-        <?php endif; ?>
-    </div>
-    
-    <form method="GET" action="/notifications" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="status" value="<?= htmlspecialchars($filterStatus) ?>">
-        <input type="hidden" name="type" value="<?= htmlspecialchars($filterType) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= $perPage == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $perPage == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $perPage == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $perPage == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-
-<!-- Notifications List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <?php if (!empty($notifications)): ?>
-        <div class="divide-y divide-gray-100">
-            <?php foreach ($notifications as $notification): ?>
-                <?php
-                $bgClass = $notification['is_read'] ? '' : 'bg-blue-50';
-                $iconBgClass = "bg-{$notification['color']}-100";
-                $iconTextClass = "text-{$notification['color']}-600";
-                $hasDomain = !empty($notification['domain_id']);
-                $domainUrl = $hasDomain ? '/domains/' . $notification['domain_id'] : null;
-                $clickUrl = null;
-                if ($notification['type'] === 'update_available') {
-                    $clickUrl = '/notifications/' . $notification['id'] . '/mark-read?redirect=settings';
-                } elseif ($hasDomain && !$notification['is_read']) {
-                    $clickUrl = '/notifications/' . $notification['id'] . '/mark-read?redirect=domain&domain_id=' . $notification['domain_id'];
-                } elseif ($hasDomain) {
-                    $clickUrl = $domainUrl;
-                }
-                $loginData = $notification['login_data'] ?? null;
-                $isLogin = ($notification['type'] === 'session_new' && $loginData);
-                $isFailedLogin = ($notification['type'] === 'session_failed' && $loginData);
-                ?>
-                <div class="px-4 py-3 hover:bg-gray-50 transition-colors <?= $bgClass ?>">
-                    <div class="flex items-start gap-3">
-                        <!-- Icon -->
-                        <?php if ($isFailedLogin): ?>
-                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                                <i class="fas fa-shield-alt text-red-600"></i>
-                            </div>
-                        <?php elseif ($isLogin): ?>
-                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                                <i class="fas fa-sign-in-alt text-blue-600"></i>
-                            </div>
-                        <?php elseif ($clickUrl): ?>
-                            <a href="<?= $clickUrl ?>" class="w-10 h-10 <?= $iconBgClass ?> rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
-                                <i class="fas fa-<?= $notification['icon'] ?> <?= $iconTextClass ?> text-sm"></i>
-                            </a>
-                        <?php else: ?>
-                            <div class="w-10 h-10 <?= $iconBgClass ?> rounded-lg flex items-center justify-center flex-shrink-0">
-                                <i class="fas fa-<?= $notification['icon'] ?> <?= $iconTextClass ?> text-sm"></i>
-                            </div>
-                        <?php endif; ?>
-                        
-                        <!-- Content -->
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-center gap-2">
-                                <?php if ($clickUrl): ?>
-                                    <a href="<?= $clickUrl ?>" class="text-sm font-medium text-gray-900 hover:text-primary transition-colors"><?= htmlspecialchars($notification['title']) ?></a>
-                                <?php else: ?>
-                                    <h3 class="text-sm font-medium text-gray-900"><?= htmlspecialchars($notification['title']) ?></h3>
-                                <?php endif; ?>
-                                <?php if (!$notification['is_read']): ?>
-                                    <span class="flex h-1.5 w-1.5 relative">
-                                        <span class="animate-ping absolute inline-flex h-1.5 w-1.5 rounded-full bg-blue-400 opacity-75"></span>
-                                        <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-blue-500"></span>
-                                    </span>
-                                <?php endif; ?>
-                                <span class="text-xs text-gray-400 ml-auto flex-shrink-0">
-                                    <i class="fas fa-clock mr-1"></i>
-                                    <?= $notification['time_ago'] ?>
-                                </span>
-                            </div>
-
-                            <?php if ($isFailedLogin): ?>
-                                <!-- Rich failed login details (mirrors successful login layout) -->
-                                <div class="mt-1.5 bg-red-50 rounded-lg p-3 border border-red-200">
-                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-2 text-xs">
-                                        <!-- Location -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-map-marker-alt text-red-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Location:</span>
-                                            <span class="text-gray-800 font-medium">
-                                                <?php if (($loginData['country_code'] ?? 'xx') !== 'xx'): ?>
-                                                    <span class="fi fi-<?= strtolower($loginData['country_code']) ?> text-xs mr-0.5 rounded-sm"></span>
-                                                <?php endif; ?>
-                                                <?= htmlspecialchars($loginData['location'] ?? 'Unknown') ?>
-                                            </span>
-                                        </div>
-                                        <!-- IP Address -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-network-wired text-blue-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">IP:</span>
-                                            <span class="text-gray-800 font-medium font-mono text-[11px]"><?= htmlspecialchars($loginData['ip'] ?? 'unknown') ?></span>
-                                        </div>
-                                        <!-- Browser -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-globe text-green-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Browser:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['browser'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- Device -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-<?= htmlspecialchars($loginData['device_icon'] ?? 'desktop') ?> text-purple-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Device:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['device'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- OS -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-laptop-code text-indigo-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">OS:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['os'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- ISP -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-server text-amber-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">ISP:</span>
-                                            <span class="text-gray-800 font-medium truncate"><?= htmlspecialchars($loginData['isp'] ?? 'Unknown') ?></span>
-                                        </div>
-                                    </div>
-                                    <!-- Reason (mirrors Method row) -->
-                                    <div class="mt-2 pt-2 border-t border-red-200 flex items-center gap-1.5 text-xs">
-                                        <i class="fas fa-exclamation-triangle text-gray-400 w-3.5 text-center"></i>
-                                        <span class="text-gray-500">Reason:</span>
-                                        <span class="inline-flex items-center px-1.5 py-0.5 bg-red-100 text-red-700 rounded font-medium text-[11px]"><?= htmlspecialchars($loginData['reason'] ?? 'Unknown') ?></span>
-                                    </div>
-                                </div>
-                            <?php elseif ($isLogin): ?>
-                                <!-- Rich login details -->
-                                <div class="mt-1.5 bg-gray-50 rounded-lg p-3 border border-gray-100">
-                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-2 text-xs">
-                                        <!-- Location -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-map-marker-alt text-red-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Location:</span>
-                                            <span class="text-gray-800 font-medium">
-                                                <?php if ($loginData['country_code'] !== 'xx'): ?>
-                                                    <span class="fi fi-<?= strtolower($loginData['country_code']) ?> text-xs mr-0.5 rounded-sm"></span>
-                                                <?php endif; ?>
-                                                <?= htmlspecialchars($loginData['location'] ?? 'Unknown') ?>
-                                            </span>
-                                        </div>
-                                        <!-- IP Address -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-network-wired text-blue-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">IP:</span>
-                                            <span class="text-gray-800 font-medium font-mono text-[11px]"><?= htmlspecialchars($loginData['ip'] ?? 'unknown') ?></span>
-                                        </div>
-                                        <!-- Browser -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-globe text-green-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Browser:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['browser'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- Device -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-<?= htmlspecialchars($loginData['device_icon'] ?? 'desktop') ?> text-purple-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">Device:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['device'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- OS -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-laptop-code text-indigo-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">OS:</span>
-                                            <span class="text-gray-800 font-medium"><?= htmlspecialchars($loginData['os'] ?? 'Unknown') ?></span>
-                                        </div>
-                                        <!-- ISP -->
-                                        <div class="flex items-center gap-1.5">
-                                            <i class="fas fa-server text-amber-400 w-3.5 text-center"></i>
-                                            <span class="text-gray-500">ISP:</span>
-                                            <span class="text-gray-800 font-medium truncate"><?= htmlspecialchars($loginData['isp'] ?? 'Unknown') ?></span>
-                                        </div>
-                                    </div>
-                                    <!-- Login method -->
-                                    <div class="mt-2 pt-2 border-t border-gray-200 flex items-center gap-1.5 text-xs">
-                                        <i class="fas fa-key text-gray-400 w-3.5 text-center"></i>
-                                        <span class="text-gray-500">Method:</span>
-                                        <span class="inline-flex items-center px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded font-medium text-[11px]"><?= htmlspecialchars($loginData['method'] ?? 'Login') ?></span>
-                                    </div>
-                                </div>
-                            <?php else: ?>
-                                <!-- Standard notification message -->
-                                <p class="text-xs text-gray-600 mt-0.5"><?= htmlspecialchars($notification['message']) ?></p>
-                                <?php if ($hasDomain && $clickUrl): ?>
-                                    <a href="<?= $clickUrl ?>" class="text-xs text-primary mt-0.5 hover:underline inline-block">
-                                        <i class="fas fa-external-link-alt text-[10px] mr-1"></i>View domain
-                                    </a>
-                                <?php endif; ?>
-                            <?php endif; ?>
-                        </div>
-
-                        <!-- Actions -->
-                        <div class="flex items-center gap-1 ml-2 flex-shrink-0">
-                            <?php if (!$notification['is_read']): ?>
-                                <a href="/notifications/<?= $notification['id'] ?>/mark-read" class="w-7 h-7 flex items-center justify-center text-gray-400 hover:text-green-600 hover:bg-green-50 rounded transition-colors" title="Mark as read">
-                                    <i class="fas fa-check text-xs"></i>
-                                </a>
-                            <?php endif; ?>
-                            <form method="POST" action="/notifications/<?= $notification['id'] ?>/delete" class="inline" onsubmit="return confirm('Delete this notification?')">
-                                <?= csrf_field() ?>
-                                <button type="submit" class="w-7 h-7 flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors" title="Delete">
-                                    <i class="fas fa-times text-xs"></i>
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            <?php endforeach; ?>
-        </div>
-        
-    <?php else: ?>
-        <!-- Empty State -->
-        <div class="p-12 text-center">
-            <i class="fas fa-bell-slash text-gray-300 text-4xl mb-3"></i>
-            <p class="text-sm text-gray-600">No notifications found</p>
-            <p class="text-xs text-gray-400 mt-1">Try adjusting your filters</p>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Pagination Controls -->
-<?php if ($totalPages > 1): ?>
-<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $page ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $totalPages ?></span>
-    </div>
-    
-    <!-- Pagination Buttons -->
-    <div class="flex items-center gap-1">
-        <?php
-        // Helper function to build pagination URL
-        function paginationUrl($page, $status, $type) {
-            $params = $_GET;
-            $params['page'] = $page;
-            if ($status) $params['status'] = $status;
-            if ($type) $params['type'] = $type;
-            return '/notifications?' . http_build_query($params);
-        }
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($page > 1): ?>
-            <a href="<?= paginationUrl(1, $filterStatus, $filterType) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-left"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($page > 1): ?>
-            <a href="<?= paginationUrl($page - 1, $filterStatus, $filterType) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-left"></i> Previous
-            </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2; // Show 2 pages on each side of current page
-        $start = max(1, $page - $range);
-        $end = min($totalPages, $page + $range);
-        
-        // Show first page + ellipsis if needed
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $filterStatus, $filterType) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        // Page numbers
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $page) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $filterStatus, $filterType) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        // Show last page + ellipsis if needed
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $filterStatus, $filterType) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($page < $totalPages): ?>
-            <a href="<?= paginationUrl($page + 1, $filterStatus, $filterType) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                Next <i class="fas fa-angle-right"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($page < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $filterStatus, $filterType) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-right"></i>
-            </a>
-        <?php endif; ?>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Hidden form for clear all -->
-<form id="clearAllForm" method="POST" action="/notifications/clear-all" class="hidden">
-    <?= csrf_field() ?>
-</form>
-
-<script>
-function markAllAsRead() {
-    if (confirm('Mark all notifications as read?')) {
-        window.location.href = '/notifications/mark-all-read';
-    }
-}
-
-function clearAll() {
-    if (confirm('Clear all notifications? This action cannot be undone.')) {
-        document.getElementById('clearAllForm').submit();
-    }
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
-
diff --git a/app/Views/notifications/index.twig b/app/Views/notifications/index.twig
new file mode 100644
index 0000000..ed90e5f
--- /dev/null
+++ b/app/Views/notifications/index.twig
@@ -0,0 +1,422 @@
+{% extends "layout/base.twig" %}
+
+{% set title = 'Notifications' %}
+{% set pageTitle = 'Notifications' %}
+{% set pageDescription = 'View and manage your notifications' %}
+{% set pageIcon = 'fas fa-bell' %}
+
+{% block content %}
+{% set filterType = filters.type ?? '' %}
+{% set filterStatus = filters.status ?? '' %}
+{% set filterDateRange = filters.date_range ?? '' %}
+{% set page = pagination.current_page %}
+{% set totalPages = pagination.total_pages %}
+{% set perPage = pagination.per_page %}
+{% set totalNotifications = pagination.total %}
+{% set offset = pagination.showing_from - 1 %}
+
+<!-- Action Buttons -->
+<div class="mb-4 flex flex-wrap gap-2 justify-between items-center">
+    <div class="flex gap-2">
+    </div>
+    
+    <div class="flex gap-2">
+        <button onclick="markAllAsRead()" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors font-medium">
+            <i class="fas fa-check-double mr-2"></i>
+            Mark All Read
+        </button>
+        <button onclick="clearAll()" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium">
+            <i class="fas fa-trash-alt mr-2"></i>
+            Clear All
+        </button>
+    </div>
+</div>
+
+<!-- Filters & Search -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
+    <form method="GET" action="/notifications" id="filter-form">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <!-- Status Filter -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="status" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <option value="">All Notifications</option>
+                    <option value="unread" {{ filterStatus == 'unread' ? 'selected' : '' }}>Unread Only</option>
+                    <option value="read" {{ filterStatus == 'read' ? 'selected' : '' }}>Read Only</option>
+                </select>
+            </div>
+            
+            <!-- Type Filter -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Type</label>
+                <select name="type" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <option value="">All Types</option>
+                    <optgroup label="Domain">
+                        <option value="domain_expiring" {{ filterType == 'domain_expiring' ? 'selected' : '' }}>Domain Expiring</option>
+                        <option value="domain_expired" {{ filterType == 'domain_expired' ? 'selected' : '' }}>Domain Expired</option>
+                        <option value="domain_available" {{ filterType == 'domain_available' ? 'selected' : '' }}>Domain Available</option>
+                        <option value="domain_registered" {{ filterType == 'domain_registered' ? 'selected' : '' }}>Domain Registered</option>
+                        <option value="domain_redemption" {{ filterType == 'domain_redemption' ? 'selected' : '' }}>Redemption Period</option>
+                        <option value="domain_pending_delete" {{ filterType == 'domain_pending_delete' ? 'selected' : '' }}>Pending Delete</option>
+                        <option value="domain_updated" {{ filterType == 'domain_updated' ? 'selected' : '' }}>Domain Updated</option>
+                        <option value="whois_failed" {{ filterType == 'whois_failed' ? 'selected' : '' }}>WHOIS Failed</option>
+                    </optgroup>
+                    <optgroup label="System">
+                        <option value="session_new" {{ filterType == 'session_new' ? 'selected' : '' }}>New Login</option>
+                        <option value="session_failed" {{ filterType == 'session_failed' ? 'selected' : '' }}>Failed Login</option>
+                        <option value="system_welcome" {{ filterType == 'system_welcome' ? 'selected' : '' }}>Welcome</option>
+                        <option value="system_upgrade" {{ filterType == 'system_upgrade' ? 'selected' : '' }}>System Upgrade</option>
+                        <option value="update_available" {{ filterType == 'update_available' ? 'selected' : '' }}>Update Available</option>
+                    </optgroup>
+                </select>
+            </div>
+            
+            <!-- Date Range -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Date Range</label>
+                <select name="date_range" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <option value="">All Time</option>
+                    <option value="today" {{ filterDateRange == 'today' ? 'selected' : '' }}>Today</option>
+                    <option value="week" {{ filterDateRange == 'week' ? 'selected' : '' }}>This Week</option>
+                    <option value="month" {{ filterDateRange == 'month' ? 'selected' : '' }}>This Month</option>
+                </select>
+            </div>
+            
+            <!-- Apply/Reset Buttons -->
+            <div class="flex items-end space-x-2">
+                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                    <i class="fas fa-filter mr-2"></i>
+                    Apply Filters
+                </button>
+                <a href="/notifications" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-times mr-2"></i>
+                    Clear
+                </a>
+            </div>
+        </div>
+    </form>
+</div>
+
+<!-- Pagination Info & Per Page Selector -->
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ offset + 1 }}</span> to 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ min(offset + perPage, totalNotifications) }}</span> of 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ totalNotifications }}</span> notification(s)
+        {% if unreadCount > 0 %}
+            <span class="text-gray-400 dark:text-slate-500">•</span>
+            <span class="font-semibold text-blue-600">{{ unreadCount }}</span> unread
+        {% endif %}
+    </div>
+    
+    <form method="GET" action="/notifications" class="flex items-center gap-2">
+        <input type="hidden" name="status" value="{{ filterStatus }}">
+        <input type="hidden" name="type" value="{{ filterType }}">
+        
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+            <option value="10" {{ perPage == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ perPage == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ perPage == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ perPage == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+
+<!-- Notifications List -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {% if notifications is not empty %}
+        <div class="divide-y divide-gray-100 dark:divide-slate-700">
+            {% for notification in notifications %}
+                {% set bgClass = notification.is_read ? '' : 'bg-blue-50 dark:bg-blue-500/10' %}
+                {% set iconBgClass = 'bg-' ~ notification.color ~ '-100' %}
+                {% set iconTextClass = 'text-' ~ notification.color ~ '-600' %}
+                {% set hasDomain = notification.domain_id is not empty %}
+                {% set domainUrl = hasDomain ? '/domains/' ~ notification.domain_id : null %}
+                {% set clickUrl = null %}
+                {% if notification.type == 'update_available' %}
+                    {% set clickUrl = '/notifications/' ~ notification.id ~ '/mark-read?redirect=settings' %}
+                {% elseif hasDomain and not notification.is_read %}
+                    {% set clickUrl = '/notifications/' ~ notification.id ~ '/mark-read?redirect=domain&domain_id=' ~ notification.domain_id %}
+                {% elseif hasDomain %}
+                    {% set clickUrl = domainUrl %}
+                {% endif %}
+                {% set loginData = notification.login_data ?? null %}
+                {% set isLogin = (notification.type == 'session_new' and loginData) %}
+                {% set isFailedLogin = (notification.type == 'session_failed' and loginData) %}
+
+                <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors {{ bgClass }}">
+                    <div class="flex items-start gap-3">
+                        <!-- Icon -->
+                        {% if isFailedLogin %}
+                            <div class="w-10 h-10 bg-red-100 dark:bg-red-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-shield-alt text-red-600"></i>
+                            </div>
+                        {% elseif isLogin %}
+                            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-sign-in-alt text-blue-600"></i>
+                            </div>
+                        {% elseif clickUrl %}
+                            <a href="{{ clickUrl }}" class="w-10 h-10 {{ iconBgClass }} rounded-lg flex items-center justify-center flex-shrink-0 hover:opacity-80 transition-opacity">
+                                <i class="fas fa-{{ notification.icon }} {{ iconTextClass }} text-sm"></i>
+                            </a>
+                        {% else %}
+                            <div class="w-10 h-10 {{ iconBgClass }} rounded-lg flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-{{ notification.icon }} {{ iconTextClass }} text-sm"></i>
+                            </div>
+                        {% endif %}
+                        
+                        <!-- Content -->
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2">
+                                {% if clickUrl %}
+                                    <a href="{{ clickUrl }}" class="text-sm font-medium text-gray-900 dark:text-white hover:text-primary transition-colors">{{ notification.title }}</a>
+                                {% else %}
+                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white">{{ notification.title }}</h3>
+                                {% endif %}
+                                {% if not notification.is_read %}
+                                    <span class="flex h-1.5 w-1.5 relative">
+                                        <span class="animate-ping absolute inline-flex h-1.5 w-1.5 rounded-full bg-blue-400 opacity-75"></span>
+                                        <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-blue-500"></span>
+                                    </span>
+                                {% endif %}
+                                <span class="text-xs text-gray-400 dark:text-slate-500 ml-auto flex-shrink-0">
+                                    <i class="fas fa-clock mr-1"></i>
+                                    {{ notification.time_ago }}
+                                </span>
+                            </div>
+
+                            {% if isFailedLogin %}
+                                <!-- Rich failed login details -->
+                                <div class="mt-1.5 bg-red-50 dark:bg-red-500/10 rounded-lg p-3 border border-red-200 dark:border-red-500/20">
+                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-2 text-xs">
+                                        <!-- Location -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-map-marker-alt text-red-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Location:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">
+                                                {% if (loginData.country_code ?? 'xx') != 'xx' %}
+                                                    <span class="fi fi-{{ loginData.country_code|lower }} text-xs mr-0.5 rounded-sm"></span>
+                                                {% endif %}
+                                                {{ loginData.location ?? 'Unknown' }}
+                                            </span>
+                                        </div>
+                                        <!-- IP Address -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-network-wired text-blue-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">IP:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium font-mono text-[11px]">{{ loginData.ip ?? 'unknown' }}</span>
+                                        </div>
+                                        <!-- Browser -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-globe text-green-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Browser:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.browser ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- Device -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-{{ loginData.device_icon ?? 'desktop' }} text-purple-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Device:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.device ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- OS -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-laptop-code text-indigo-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">OS:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.os ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- ISP -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-server text-amber-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">ISP:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium truncate">{{ loginData.isp ?? 'Unknown' }}</span>
+                                        </div>
+                                    </div>
+                                    <!-- Reason -->
+                                    <div class="mt-2 pt-2 border-t border-red-200 dark:border-red-500/20 flex items-center gap-1.5 text-xs">
+                                        <i class="fas fa-exclamation-triangle text-gray-400 dark:text-slate-500 w-3.5 text-center"></i>
+                                        <span class="text-gray-500 dark:text-slate-400">Reason:</span>
+                                        <span class="inline-flex items-center px-1.5 py-0.5 bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 rounded font-medium text-[11px]">{{ loginData.reason ?? 'Unknown' }}</span>
+                                    </div>
+                                </div>
+                            {% elseif isLogin %}
+                                <!-- Rich login details -->
+                                <div class="mt-1.5 bg-gray-50 dark:bg-slate-700 rounded-lg p-3 border border-gray-100 dark:border-slate-600">
+                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-2 text-xs">
+                                        <!-- Location -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-map-marker-alt text-red-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Location:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">
+                                                {% if loginData.country_code != 'xx' %}
+                                                    <span class="fi fi-{{ loginData.country_code|lower }} text-xs mr-0.5 rounded-sm"></span>
+                                                {% endif %}
+                                                {{ loginData.location ?? 'Unknown' }}
+                                            </span>
+                                        </div>
+                                        <!-- IP Address -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-network-wired text-blue-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">IP:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium font-mono text-[11px]">{{ loginData.ip ?? 'unknown' }}</span>
+                                        </div>
+                                        <!-- Browser -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-globe text-green-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Browser:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.browser ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- Device -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-{{ loginData.device_icon ?? 'desktop' }} text-purple-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">Device:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.device ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- OS -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-laptop-code text-indigo-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">OS:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium">{{ loginData.os ?? 'Unknown' }}</span>
+                                        </div>
+                                        <!-- ISP -->
+                                        <div class="flex items-center gap-1.5">
+                                            <i class="fas fa-server text-amber-400 w-3.5 text-center"></i>
+                                            <span class="text-gray-500 dark:text-slate-400">ISP:</span>
+                                            <span class="text-gray-800 dark:text-slate-200 font-medium truncate">{{ loginData.isp ?? 'Unknown' }}</span>
+                                        </div>
+                                    </div>
+                                    <!-- Login method -->
+                                    <div class="mt-2 pt-2 border-t border-gray-200 dark:border-slate-600 flex items-center gap-1.5 text-xs">
+                                        <i class="fas fa-key text-gray-400 dark:text-slate-500 w-3.5 text-center"></i>
+                                        <span class="text-gray-500 dark:text-slate-400">Method:</span>
+                                        <span class="inline-flex items-center px-1.5 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 rounded font-medium text-[11px]">{{ loginData.method ?? 'Login' }}</span>
+                                    </div>
+                                </div>
+                            {% else %}
+                                <!-- Standard notification message -->
+                                <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">{{ notification.message }}</p>
+                                {% if hasDomain and clickUrl %}
+                                    <a href="{{ clickUrl }}" class="text-xs text-primary mt-0.5 hover:underline inline-block">
+                                        <i class="fas fa-external-link-alt text-[10px] mr-1"></i>View domain
+                                    </a>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+
+                        <!-- Actions -->
+                        <div class="flex items-center gap-1 ml-2 flex-shrink-0">
+                            {% if not notification.is_read %}
+                                <a href="/notifications/{{ notification.id }}/mark-read" class="w-7 h-7 flex items-center justify-center text-gray-400 dark:text-slate-500 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-500/10 rounded transition-colors" title="Mark as read">
+                                    <i class="fas fa-check text-xs"></i>
+                                </a>
+                            {% endif %}
+                            <form method="POST" action="/notifications/{{ notification.id }}/delete" class="inline" onsubmit="return confirm('Delete this notification?')">
+                                {{ csrf_field() }}
+                                <button type="submit" class="w-7 h-7 flex items-center justify-center text-gray-400 dark:text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded transition-colors" title="Delete">
+                                    <i class="fas fa-times text-xs"></i>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+        
+    {% else %}
+        <!-- Empty State -->
+        <div class="p-12 text-center">
+            <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+            <p class="text-sm text-gray-600 dark:text-slate-400">No notifications found</p>
+            <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">Try adjusting your filters</p>
+        </div>
+    {% endif %}
+</div>
+
+<!-- Pagination Controls -->
+{% if totalPages > 1 %}
+<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <!-- Page Info -->
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ page }}</span> of 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ totalPages }}</span>
+    </div>
+    
+    <!-- Pagination Buttons -->
+    <div class="flex items-center gap-1">
+        <!-- First Page -->
+        {% if page > 1 %}
+            <a href="{{ pagination_url(1, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-left"></i>
+            </a>
+        {% endif %}
+        
+        <!-- Previous Page -->
+        {% if page > 1 %}
+            <a href="{{ pagination_url(page - 1, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-left"></i> Previous
+            </a>
+        {% endif %}
+        
+        <!-- Page Numbers -->
+        {% set range = 2 %}
+        {% set startPage = max(1, page - range) %}
+        {% set endPage = min(totalPages, page + range) %}
+        
+        {% if startPage > 1 %}
+            <a href="{{ pagination_url(1, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if startPage > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+        
+        {% for i in startPage..endPage %}
+            {% if i == page %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+        
+        {% if endPage < totalPages %}
+            {% if endPage < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+        
+        <!-- Next Page -->
+        {% if page < totalPages %}
+            <a href="{{ pagination_url(page + 1, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                Next <i class="fas fa-angle-right"></i>
+            </a>
+        {% endif %}
+        
+        <!-- Last Page -->
+        {% if page < totalPages %}
+            <a href="{{ pagination_url(totalPages, filters, perPage) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+<!-- Hidden form for clear all -->
+<form id="clearAllForm" method="POST" action="/notifications/clear-all" class="hidden">
+    {{ csrf_field() }}
+</form>
+
+<script>
+function markAllAsRead() {
+    if (confirm('Mark all notifications as read?')) {
+        window.location.href = '/notifications/mark-all-read';
+    }
+}
+
+function clearAll() {
+    if (confirm('Clear all notifications? This action cannot be undone.')) {
+        document.getElementById('clearAllForm').submit();
+    }
+}
+</script>
+{% endblock %}
diff --git a/app/Views/profile/index.php b/app/Views/profile/index.twig
similarity index 60%
rename from app/Views/profile/index.php
rename to app/Views/profile/index.twig
index c1f0f88..b3084e9 100644
--- a/app/Views/profile/index.php
+++ b/app/Views/profile/index.twig
@@ -1,70 +1,59 @@
-<?php
-$title = 'My Profile';
-$pageTitle = 'My Profile';
-$pageDescription = 'Manage your account settings and preferences';
-$pageIcon = 'fas fa-user-circle';
-ob_start();
+{% extends 'layout/base.twig' %}
 
-// Get 2FA status
-$twoFactorStatus = $userModel->getTwoFactorStatus($user['id']);
-$twoFactorService = new \App\Services\TwoFactorService();
-$twoFactorPolicy = $twoFactorService->getTwoFactorPolicy();
-
-// Get avatar data
-$avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
-?>
+{% set title = 'My Profile' %}
+{% set pageTitle = 'My Profile' %}
+{% set pageDescription = 'Manage your account settings and preferences' %}
+{% set pageIcon = 'fas fa-user-circle' %}
 
+{% block content %}
 <!-- Main Profile Layout -->
 <div class="grid grid-cols-12 gap-6">
     <!-- Sidebar Navigation -->
     <div class="col-span-12 lg:col-span-3">
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden sticky top-6">
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden sticky top-6">
             <!-- User Info Section -->
-            <div class="p-6 border-b border-gray-200 bg-gray-50">
+            <div class="p-6 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
                 <div class="flex flex-col items-center text-center">
                     <div class="relative">
-                        <?php if ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar'): ?>
-                            <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                                 alt="<?= htmlspecialchars($avatar['alt']) ?>" 
-                                 class="w-20 h-20 rounded-full object-cover border-2 border-white shadow-sm"
+                        {% if avatar.type == 'uploaded' or avatar.type == 'gravatar' %}
+                            <img src="{{ avatar.url }}" 
+                                 alt="{{ avatar.alt }}" 
+                                 class="w-20 h-20 rounded-full object-cover border-2 border-white dark:border-slate-700 shadow-sm"
                                  loading="lazy">
-                        <?php else: ?>
-                            <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold border-2 border-white shadow-sm">
-                                <?= $avatar['initials'] ?>
+                        {% else %}
+                            <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold border-2 border-white dark:border-slate-700 shadow-sm">
+                                {{ avatar.initials }}
                             </div>
-                        <?php endif; ?>
+                        {% endif %}
                         
                         <!-- Avatar type indicator -->
-                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-white rounded-full border-2 border-gray-200 flex items-center justify-center">
-                            <?php if ($avatar['type'] === 'uploaded'): ?>
-                                <i class="fas fa-image text-xs text-blue-600" title="Uploaded avatar"></i>
-                            <?php elseif ($avatar['type'] === 'gravatar'): ?>
-                                <i class="fas fa-globe text-xs text-green-600" title="Gravatar"></i>
-                            <?php else: ?>
-                                <i class="fas fa-user text-xs text-gray-500" title="Initials"></i>
-                            <?php endif; ?>
+                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-white dark:bg-slate-800 rounded-full border-2 border-gray-200 dark:border-slate-600 flex items-center justify-center">
+                            {% if avatar.type == 'uploaded' %}
+                                <i class="fas fa-image text-xs text-blue-600 dark:text-blue-400" title="Uploaded avatar"></i>
+                            {% elseif avatar.type == 'gravatar' %}
+                                <i class="fas fa-globe text-xs text-green-600 dark:text-green-400" title="Gravatar"></i>
+                            {% else %}
+                                <i class="fas fa-user text-xs text-gray-500 dark:text-slate-400" title="Initials"></i>
+                            {% endif %}
                         </div>
                     </div>
-                    <h3 class="mt-4 text-base font-semibold text-gray-900"><?= htmlspecialchars($user['full_name'] ?? $user['username']) ?></h3>
-                    <p class="text-sm text-gray-500 mt-1">@<?= htmlspecialchars($user['username'] ?? '') ?></p>
+                    <h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-white">{{ user.full_name|default(user.username) }}</h3>
+                    <p class="text-sm text-gray-500 dark:text-slate-400 mt-1">@{{ user.username|default('') }}</p>
                     
                     <!-- Role Badge -->
-                    <span class="inline-flex items-center mt-3 px-2.5 py-1 bg-<?= $user['role'] === 'admin' ? 'amber' : 'blue' ?>-100 text-<?= $user['role'] === 'admin' ? 'amber' : 'blue' ?>-800 text-xs font-semibold rounded border border-<?= $user['role'] === 'admin' ? 'amber' : 'blue' ?>-200">
-                        <i class="fas fa-<?= $user['role'] === 'admin' ? 'crown' : 'user' ?> mr-1.5"></i>
-                        <?= ucfirst($user['role'] ?? 'user') ?>
-                    </span>
+                    <div class="mt-3">{{ role_badge(user.role|default('user')) }}</div>
 
                     <!-- Stats -->
                     <div class="grid grid-cols-2 gap-3 mt-4 w-full">
-                        <div class="bg-white rounded-lg p-2 border border-gray-200">
-                            <div class="text-xs text-gray-500">Member Since</div>
-                            <div class="text-xs font-semibold text-gray-900 mt-0.5">
-                                <?= date('M Y', strtotime($user['created_at'] ?? 'now')) ?>
+                        <div class="bg-white dark:bg-slate-800 rounded-lg p-2 border border-gray-200 dark:border-slate-600">
+                            <div class="text-xs text-gray-500 dark:text-slate-400">Member Since</div>
+                            <div class="text-xs font-semibold text-gray-900 dark:text-white mt-0.5">
+                                {{ (user.created_at|default('now'))|date('M Y') }}
                             </div>
                         </div>
-                        <div class="bg-white rounded-lg p-2 border border-gray-200">
-                            <div class="text-xs text-gray-500">Status</div>
-                            <div class="text-xs font-semibold text-green-600 mt-0.5">
+                        <div class="bg-white dark:bg-slate-800 rounded-lg p-2 border border-gray-200 dark:border-slate-600">
+                            <div class="text-xs text-gray-500 dark:text-slate-400">Status</div>
+                            <div class="text-xs font-semibold text-green-600 dark:text-green-400 mt-0.5">
                                 <i class="fas fa-circle text-xs"></i> Active
                             </div>
                         </div>
@@ -91,13 +80,13 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                     <span>Active Sessions</span>
                 </button>
                 
-                <?php if ($user['role'] !== 'admin'): ?>
-                <hr class="my-3 border-gray-200">
-                <button onclick="showSection('danger')" id="nav-danger" class="nav-item w-full flex items-center px-4 py-2.5 text-sm font-medium rounded-lg transition-colors text-red-600 hover:bg-red-50">
+                {% if user.role != 'admin' %}
+                <hr class="my-3 border-gray-200 dark:border-slate-700">
+                <button onclick="showSection('danger')" id="nav-danger" class="nav-item w-full flex items-center px-4 py-2.5 text-sm font-medium rounded-lg transition-colors text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10">
                     <i class="fas fa-exclamation-triangle w-5 mr-3 text-sm"></i>
                     <span>Danger Zone</span>
                 </button>
-                <?php endif; ?>
+                {% endif %}
             </nav>
         </div>
     </div>
@@ -107,38 +96,38 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
         
         <!-- Profile Information Section -->
         <div id="section-profile" class="content-section">
-            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-                    <h3 class="text-lg font-semibold text-gray-900">Profile Information</h3>
-                    <p class="text-sm text-gray-600 mt-1">Update your personal details and account information</p>
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Profile Information</h3>
+                    <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Update your personal details and account information</p>
                 </div>
 
                 <!-- Avatar Upload Section -->
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h4 class="text-base font-semibold text-gray-900 mb-3">Profile Picture</h4>
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-3">Profile Picture</h4>
                     <div class="flex items-center space-x-4">
                         <!-- Current Avatar Display -->
                         <div class="relative">
-                            <?php if ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar'): ?>
-                                <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                                     alt="<?= htmlspecialchars($avatar['alt']) ?>" 
-                                     class="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                            {% if avatar.type == 'uploaded' or avatar.type == 'gravatar' %}
+                                <img src="{{ avatar.url }}" 
+                                     alt="{{ avatar.alt }}" 
+                                     class="w-16 h-16 rounded-full object-cover border-2 border-gray-200 dark:border-slate-600"
                                      loading="lazy">
-                            <?php else: ?>
-                                <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-lg font-bold border-2 border-gray-200">
-                                    <?= $avatar['initials'] ?>
+                            {% else %}
+                                <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-lg font-bold border-2 border-gray-200 dark:border-slate-600">
+                                    {{ avatar.initials }}
                                 </div>
-                            <?php endif; ?>
+                            {% endif %}
                             
                             <!-- Avatar type indicator -->
-                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-white rounded-full border-2 border-gray-200 flex items-center justify-center">
-                                <?php if ($avatar['type'] === 'uploaded'): ?>
-                                    <i class="fas fa-image text-xs text-blue-600" title="Uploaded avatar"></i>
-                                <?php elseif ($avatar['type'] === 'gravatar'): ?>
-                                    <i class="fas fa-globe text-xs text-green-600" title="Gravatar"></i>
-                                <?php else: ?>
-                                    <i class="fas fa-user text-xs text-gray-500" title="Initials"></i>
-                                <?php endif; ?>
+                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-white dark:bg-slate-800 rounded-full border-2 border-gray-200 dark:border-slate-600 flex items-center justify-center">
+                                {% if avatar.type == 'uploaded' %}
+                                    <i class="fas fa-image text-xs text-blue-600 dark:text-blue-400" title="Uploaded avatar"></i>
+                                {% elseif avatar.type == 'gravatar' %}
+                                    <i class="fas fa-globe text-xs text-green-600 dark:text-green-400" title="Gravatar"></i>
+                                {% else %}
+                                    <i class="fas fa-user text-xs text-gray-500 dark:text-slate-400" title="Initials"></i>
+                                {% endif %}
                             </div>
                         </div>
                         
@@ -147,7 +136,7 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                             <div class="space-y-2">
                                 <!-- Upload Form -->
                                 <form method="POST" action="/profile/upload-avatar" enctype="multipart/form-data" class="inline-block">
-                                    <?= csrf_field() ?>
+                                    {{ csrf_field() }}
                                     <div class="flex items-center space-x-2">
                                         <input type="file" 
                                                id="avatar" 
@@ -156,7 +145,7 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                                class="hidden"
                                                onchange="this.form.submit()">
                                         <label for="avatar" 
-                                               class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 cursor-pointer">
+                                               class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 hover:bg-gray-50 dark:hover:bg-slate-600 cursor-pointer">
                                             <i class="fas fa-upload mr-2"></i>
                                             Upload New
                                         </label>
@@ -164,77 +153,77 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                 </form>
                                 
                                 <!-- Delete Avatar Button -->
-                                <?php if ($avatar['type'] === 'uploaded'): ?>
+                                {% if avatar.type == 'uploaded' %}
                                     <form method="POST" action="/profile/delete-avatar" class="inline-block ml-2">
-                                        <?= csrf_field() ?>
+                                        {{ csrf_field() }}
                                         <button type="submit" 
-                                                class="inline-flex items-center px-3 py-2 border border-red-300 rounded-lg text-sm font-medium text-red-700 bg-white hover:bg-red-50"
+                                                class="inline-flex items-center px-3 py-2 border border-red-300 dark:border-red-500/30 rounded-lg text-sm font-medium text-red-700 dark:text-red-400 bg-white dark:bg-slate-700 hover:bg-red-50 dark:hover:bg-red-500/10"
                                                 onclick="return confirm('Are you sure you want to remove your avatar?')">
                                             <i class="fas fa-trash mr-2"></i>
                                             Remove
                                         </button>
                                     </form>
-                                <?php endif; ?>
+                                {% endif %}
                             </div>
                             
                             <!-- Avatar Info -->
-                            <div class="mt-2 text-xs text-gray-500">
-                                <?php if ($avatar['type'] === 'uploaded'): ?>
+                            <div class="mt-2 text-xs text-gray-500 dark:text-slate-400">
+                                {% if avatar.type == 'uploaded' %}
                                     Using uploaded image
-                                <?php elseif ($avatar['type'] === 'gravatar'): ?>
-                                    Using Gravatar from <?= htmlspecialchars($user['email'] ?? '') ?>
-                                <?php else: ?>
+                                {% elseif avatar.type == 'gravatar' %}
+                                    Using Gravatar from {{ user.email|default('') }}
+                                {% else %}
                                     Using initials (upload an image or set up Gravatar)
-                                <?php endif; ?>
+                                {% endif %}
                             </div>
                             
                             <!-- Gravatar Info -->
-                            <?php if ($avatar['type'] !== 'gravatar' && !empty($user['email'])): ?>
-                                <div class="mt-1 text-xs text-gray-400">
-                                    <a href="https://gravatar.com" target="_blank" class="text-blue-600 hover:text-blue-800">
+                            {% if avatar.type != 'gravatar' and user.email %}
+                                <div class="mt-1 text-xs text-gray-400 dark:text-slate-500">
+                                    <a href="https://gravatar.com" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                                         Set up Gravatar for automatic avatar
                                     </a>
                                 </div>
-                            <?php endif; ?>
+                            {% endif %}
                         </div>
                     </div>
                 </div>
 
                 <form method="POST" action="/profile/update" class="p-6">
-                    <?= csrf_field() ?>
+                    {{ csrf_field() }}
                     <div class="space-y-5">
                         <!-- Full Name -->
                         <div>
-                            <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Full Name
                             </label>
                             <input type="text" id="full_name" name="full_name" 
-                                   value="<?= htmlspecialchars($user['full_name'] ?? '') ?>"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                                   value="{{ user.full_name|default('') }}"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                         </div>
 
                         <!-- Email -->
                         <div>
-                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Email Address
                             </label>
                             <input type="email" id="email" name="email" 
-                                   value="<?= htmlspecialchars($user['email'] ?? '') ?>"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                                   value="{{ user.email|default('') }}"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                             
-                            <?php if (!empty($user['email_verified'])): ?>
-                                <p class="text-xs text-green-600 mt-1.5">
+                            {% if user.email_verified %}
+                                <p class="text-xs text-green-600 dark:text-green-400 mt-1.5">
                                     <i class="fas fa-check-circle mr-1"></i>
                                     Email verified
                                 </p>
-                            <?php else: ?>
-                                <div class="mt-3 bg-amber-50 border border-amber-200 rounded-lg p-3">
+                            {% else %}
+                                <div class="mt-3 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-lg p-3">
                                     <div class="flex items-start justify-between">
                                         <div class="flex items-start">
-                                            <i class="fas fa-exclamation-triangle text-amber-600 mt-0.5 mr-2"></i>
+                                            <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-400 mt-0.5 mr-2"></i>
                                             <div>
-                                                <p class="text-xs font-semibold text-amber-900">Email Not Verified</p>
-                                                <p class="text-xs text-amber-700 mt-0.5">Verify your email to unlock all features</p>
+                                                <p class="text-xs font-semibold text-amber-900 dark:text-amber-400">Email Not Verified</p>
+                                                <p class="text-xs text-amber-700 dark:text-amber-300 mt-0.5">Verify your email to unlock all features</p>
                                             </div>
                                         </div>
                                         <a href="/profile/resend-verification" class="ml-3 inline-flex items-center px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white text-xs rounded-lg transition-colors font-medium whitespace-nowrap">
@@ -243,43 +232,43 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                         </a>
                                     </div>
                                 </div>
-                            <?php endif; ?>
+                            {% endif %}
                         </div>
 
                         <!-- Username (Read-only) -->
                         <div>
-                            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="username" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Username
                             </label>
                             <input type="text" id="username" name="username" 
-                                   value="<?= htmlspecialchars($user['username'] ?? '') ?>"
+                                   value="{{ user.username|default('') }}"
                                    readonly
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed">
-                            <p class="text-xs text-gray-500 mt-1">Username cannot be changed</p>
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-500 dark:text-slate-400 cursor-not-allowed">
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Username cannot be changed</p>
                         </div>
 
                         <!-- Account Details Grid -->
-                        <div class="pt-4 border-t border-gray-200">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-3">Account Information</h4>
+                        <div class="pt-4 border-t border-gray-200 dark:border-slate-700">
+                            <h4 class="text-sm font-semibold text-gray-700 dark:text-slate-300 mb-3">Account Information</h4>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                                    <label class="block text-xs font-medium text-gray-500 mb-1">Member Since</label>
-                                    <p class="text-sm font-semibold text-gray-900">
-                                        <?= date('F j, Y', strtotime($user['created_at'] ?? 'now')) ?>
+                                <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-3 border border-gray-200 dark:border-slate-600">
+                                    <label class="block text-xs font-medium text-gray-500 dark:text-slate-400 mb-1">Member Since</label>
+                                    <p class="text-sm font-semibold text-gray-900 dark:text-white">
+                                        {{ (user.created_at|default('now'))|date('F j, Y') }}
                                     </p>
                                 </div>
-                                <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                                    <label class="block text-xs font-medium text-gray-500 mb-1">Last Login</label>
-                                    <p class="text-sm font-semibold text-gray-900">
-                                        <?= $user['last_login'] ? date('M j, Y g:i A', strtotime($user['last_login'])) : 'Never' ?>
+                                <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-3 border border-gray-200 dark:border-slate-600">
+                                    <label class="block text-xs font-medium text-gray-500 dark:text-slate-400 mb-1">Last Login</label>
+                                    <p class="text-sm font-semibold text-gray-900 dark:text-white">
+                                        {{ user.last_login ? user.last_login|date('M j, Y g:i A') : 'Never' }}
                                     </p>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200 space-x-2">
-                        <button type="button" onclick="location.reload()" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
+                    <div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200 dark:border-slate-700 space-x-2">
+                        <button type="button" onclick="location.reload()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
                             Cancel
                         </button>
                         <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
@@ -293,99 +282,99 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
 
         <!-- Two-Factor Authentication Section -->
         <div id="section-twofactor" class="content-section hidden">
-            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-                    <h3 class="text-lg font-semibold text-gray-900">Two-Factor Authentication</h3>
-                    <p class="text-sm text-gray-600 mt-1">Add an extra layer of security to your account</p>
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Two-Factor Authentication</h3>
+                    <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Add an extra layer of security to your account</p>
                 </div>
 
                 <div class="p-6">
-                    <?php if ($twoFactorPolicy === 'disabled'): ?>
+                    {% if twoFactorPolicy == 'disabled' %}
                         <!-- 2FA Disabled by Admin -->
-                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                        <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-4">
                             <div class="flex items-center">
-                                <i class="fas fa-ban text-gray-400 text-xl mr-3"></i>
+                                <i class="fas fa-ban text-gray-400 dark:text-slate-500 text-xl mr-3"></i>
                                 <div>
-                                    <p class="text-sm font-medium text-gray-900">Two-Factor Authentication Disabled</p>
-                                    <p class="text-sm text-gray-600 mt-1">2FA has been disabled by the administrator.</p>
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Two-Factor Authentication Disabled</p>
+                                    <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">2FA has been disabled by the administrator.</p>
                                 </div>
                             </div>
                         </div>
-                    <?php elseif (!$user['email_verified']): ?>
+                    {% elseif not user.email_verified %}
                         <!-- Email Not Verified -->
-                        <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                        <div class="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-lg p-4">
                             <div class="flex items-center">
-                                <i class="fas fa-exclamation-triangle text-amber-600 text-xl mr-3"></i>
+                                <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-400 text-xl mr-3"></i>
                                 <div>
-                                    <p class="text-sm font-medium text-amber-900">Email Verification Required</p>
-                                    <p class="text-sm text-amber-700 mt-1">You must verify your email address before enabling 2FA.</p>
+                                    <p class="text-sm font-medium text-amber-900 dark:text-amber-400">Email Verification Required</p>
+                                    <p class="text-sm text-amber-700 dark:text-amber-300 mt-1">You must verify your email address before enabling 2FA.</p>
                                 </div>
                             </div>
                         </div>
-                    <?php elseif ($twoFactorStatus['enabled']): ?>
+                    {% elseif twoFactorStatus.enabled %}
                         <!-- 2FA Enabled -->
                         <div class="space-y-4">
-                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
+                            <div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg p-4">
                                 <div class="flex items-center">
-                                    <i class="fas fa-shield-alt text-green-600 text-xl mr-3"></i>
+                                    <i class="fas fa-shield-alt text-green-600 dark:text-green-400 text-xl mr-3"></i>
                                     <div>
-                                        <p class="text-sm font-medium text-green-900">Two-Factor Authentication Enabled</p>
-                                        <p class="text-sm text-green-700 mt-1">
+                                        <p class="text-sm font-medium text-green-900 dark:text-green-400">Two-Factor Authentication Enabled</p>
+                                        <p class="text-sm text-green-700 dark:text-green-300 mt-1">
                                             Your account is protected with 2FA since 
-                                            <?= date('M j, Y', strtotime($twoFactorStatus['setup_at'])) ?>.
+                                            {{ twoFactorStatus.setup_at|date('M j, Y') }}.
                                         </p>
                                     </div>
                                 </div>
                             </div>
 
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="bg-gray-50 rounded-lg p-4">
+                                <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-4">
                                     <div class="flex items-center justify-between">
                                         <div>
-                                            <p class="text-sm font-medium text-gray-900">Backup Codes</p>
-                                            <p class="text-sm text-gray-600"><?= $twoFactorStatus['backup_codes_count'] ?> remaining</p>
+                                            <p class="text-sm font-medium text-gray-900 dark:text-white">Backup Codes</p>
+                                            <p class="text-sm text-gray-600 dark:text-slate-400">{{ twoFactorStatus.backup_codes_count }} remaining</p>
                                         </div>
-                                        <i class="fas fa-key text-gray-400"></i>
+                                        <i class="fas fa-key text-gray-400 dark:text-slate-500"></i>
                                     </div>
                                 </div>
-                                <div class="bg-gray-50 rounded-lg p-4">
+                                <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-4">
                                     <div class="flex items-center justify-between">
                                         <div>
-                                            <p class="text-sm font-medium text-gray-900">Authenticator App</p>
-                                            <p class="text-sm text-gray-600">Active</p>
+                                            <p class="text-sm font-medium text-gray-900 dark:text-white">Authenticator App</p>
+                                            <p class="text-sm text-gray-600 dark:text-slate-400">Active</p>
                                         </div>
-                                        <i class="fas fa-mobile-alt text-gray-400"></i>
+                                        <i class="fas fa-mobile-alt text-gray-400 dark:text-slate-500"></i>
                                     </div>
                                 </div>
                             </div>
 
                             <div class="flex flex-col sm:flex-row gap-3">
-                                <?php if ($twoFactorStatus['backup_codes_count'] < 3): ?>
+                                {% if twoFactorStatus.backup_codes_count < 3 %}
                                 <form method="POST" action="/2fa/regenerate-backup-codes" onsubmit="return confirm('Generate new backup codes? Your current codes will stop working.')">
-                                    <?= csrf_field() ?>
+                                    {{ csrf_field() }}
                                     <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors font-medium">
                                         <i class="fas fa-refresh mr-2"></i>
                                         Generate New Backup Codes
                                     </button>
                                 </form>
-                                <?php endif; ?>
+                                {% endif %}
 
-                                <?php if ($twoFactorPolicy !== 'forced'): ?>
+                                {% if twoFactorPolicy != 'forced' %}
                                 <button type="button" onclick="showDisable2FAModal()" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium">
                                     <i class="fas fa-ban mr-2"></i>
                                     Disable 2FA
                                 </button>
-                                <?php endif; ?>
+                                {% endif %}
                             </div>
                         </div>
-                    <?php elseif ($twoFactorStatus['required']): ?>
+                    {% elseif twoFactorStatus.required %}
                         <!-- 2FA Required -->
-                        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
+                        <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg p-4 mb-4">
                             <div class="flex items-center">
-                                <i class="fas fa-exclamation-circle text-red-600 text-xl mr-3"></i>
+                                <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 text-xl mr-3"></i>
                                 <div>
-                                    <p class="text-sm font-medium text-red-900">Two-Factor Authentication Required</p>
-                                    <p class="text-sm text-red-700 mt-1">You must enable 2FA to continue using your account.</p>
+                                    <p class="text-sm font-medium text-red-900 dark:text-red-400">Two-Factor Authentication Required</p>
+                                    <p class="text-sm text-red-700 dark:text-red-300 mt-1">You must enable 2FA to continue using your account.</p>
                                 </div>
                             </div>
                         </div>
@@ -396,15 +385,15 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                 Enable Two-Factor Authentication
                             </a>
                         </div>
-                    <?php else: ?>
+                    {% else %}
                         <!-- 2FA Optional -->
                         <div class="space-y-4">
-                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                            <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
                                 <div class="flex items-center">
-                                    <i class="fas fa-info-circle text-blue-600 text-xl mr-3"></i>
+                                    <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 text-xl mr-3"></i>
                                     <div>
-                                        <p class="text-sm font-medium text-blue-900">Enhanced Security Available</p>
-                                        <p class="text-sm text-blue-700 mt-1">
+                                        <p class="text-sm font-medium text-blue-900 dark:text-blue-400">Enhanced Security Available</p>
+                                        <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                                             Enable two-factor authentication to add an extra layer of security to your account.
                                         </p>
                                     </div>
@@ -418,9 +407,9 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                 </a>
                             </div>
 
-                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                                <h4 class="text-sm font-medium text-gray-900 mb-2">How 2FA Works</h4>
-                                <ul class="text-sm text-gray-700 space-y-1">
+                            <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-4">
+                                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">How 2FA Works</h4>
+                                <ul class="text-sm text-gray-700 dark:text-slate-300 space-y-1">
                                     <li>• Generate time-based codes using an authenticator app</li>
                                     <li>• Use backup codes if you lose access to your device</li>
                                     <li>• Receive email codes as an alternative method</li>
@@ -428,63 +417,63 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                                 </ul>
                             </div>
                         </div>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
             </div>
         </div>
 
         <!-- Security Section -->
         <div id="section-security" class="content-section hidden">
-            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-                    <h3 class="text-lg font-semibold text-gray-900">Security Settings</h3>
-                    <p class="text-sm text-gray-600 mt-1">Manage your password and security preferences</p>
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Security Settings</h3>
+                    <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Manage your password and security preferences</p>
                 </div>
 
                 <form method="POST" action="/profile/change-password" class="p-6">
-                    <?= csrf_field() ?>
+                    {{ csrf_field() }}
                     <div class="space-y-4">
                         <!-- Current Password -->
                         <div>
-                            <label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="current_password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Current Password
                             </label>
                             <input type="password" id="current_password" name="current_password" required
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="Enter your current password">
                         </div>
 
                         <!-- New Password -->
                         <div>
-                            <label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 New Password
                             </label>
                             <input type="password" id="new_password" name="new_password" required minlength="8"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="Enter a strong password">
-                            <p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Minimum 8 characters</p>
                         </div>
 
                         <!-- Confirm New Password -->
                         <div>
-                            <label for="new_password_confirm" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="new_password_confirm" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Confirm New Password
                             </label>
                             <input type="password" id="new_password_confirm" name="new_password_confirm" required minlength="8"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="Re-enter your new password">
                         </div>
 
                         <!-- Password Tips -->
-                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                            <p class="text-xs text-gray-600">
-                                <i class="fas fa-info-circle text-blue-500 mr-1"></i>
+                        <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-3">
+                            <p class="text-xs text-gray-600 dark:text-slate-400">
+                                <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
                                 Use at least 8 characters with a mix of letters, numbers, and symbols for better security.
                             </p>
                         </div>
                     </div>
 
-                    <div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200">
+                    <div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                         <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                             <i class="fas fa-key mr-2"></i>
                             Update Password
@@ -496,156 +485,150 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
 
         <!-- Active Sessions Section -->
         <div id="section-sessions" class="content-section hidden">
-            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
                     <div class="flex items-center justify-between">
                         <div>
-                            <h3 class="text-lg font-semibold text-gray-900">Active Sessions</h3>
-                            <p class="text-sm text-gray-600 mt-1">Manage devices and sessions where you're logged in (<?= count($sessions ?? []) ?> active)</p>
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Active Sessions</h3>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Manage devices and sessions where you're logged in ({{ sessions|default([])|length }} active)</p>
                         </div>
-                        <?php if (count($sessions ?? []) > 1): ?>
+                        {% if sessions|default([])|length > 1 %}
                         <form method="POST" action="/profile/logout-other-sessions" onsubmit="return confirm('Logout all other sessions?')" class="inline">
-                            <?= csrf_field() ?>
+                            {{ csrf_field() }}
                             <button type="submit" class="inline-flex items-center px-3 py-2 bg-red-600 text-white text-xs rounded-lg hover:bg-red-700 transition-colors font-medium">
                                 <i class="fas fa-sign-out-alt mr-1.5"></i>
                                 Logout Others
                             </button>
                         </form>
-                        <?php endif; ?>
+                        {% endif %}
                     </div>
                 </div>
 
                 <div class="p-6">
-                    <?php if (!empty($sessions)): ?>
+                    {% if sessions is not empty %}
                         <div class="space-y-3">
-                            <?php foreach ($sessions as $session): ?>
-                                <?php
-                                // Display data prepared by SessionHelper in controller
-                                $deviceIcon = $session['deviceIcon'];
-                                $browserInfo = $session['browserInfo'];
-                                $timeAgo = $session['timeAgo'];
-                                $sessionAge = $session['sessionAge'];
-                                $isCurrent = $session['is_current'] ?? false;
-                                $bgClass = $isCurrent ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200';
-                                ?>
-                                <div class="flex items-start justify-between p-4 <?= $bgClass ?> border rounded-lg">
+                            {% for session in sessions %}
+                                {% set isCurrent = session.is_current|default(false) %}
+                                {% set deviceColor = isCurrent ? 'green' : 'gray' %}
+                                {% set bgClass = isCurrent ? 'bg-green-50 dark:bg-green-500/10 border-green-200 dark:border-green-500/20' : 'bg-gray-50 dark:bg-slate-700 border-gray-200 dark:border-slate-600' %}
+                                <div class="flex items-start justify-between p-4 {{ bgClass }} border rounded-lg">
                                     <div class="flex items-start space-x-3 flex-1">
                                         <!-- Device Icon -->
-                                        <div class="w-10 h-10 bg-<?= $isCurrent ? 'green' : 'gray' ?>-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                                            <i class="fas <?= $deviceIcon ?> text-<?= $isCurrent ? 'green' : 'gray' ?>-600"></i>
+                                        <div class="w-10 h-10 bg-{{ deviceColor }}-100 dark:bg-{{ deviceColor }}-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
+                                            <i class="fas {{ session.deviceIcon }} text-{{ deviceColor }}-600 dark:text-{{ deviceColor }}-400"></i>
                                         </div>
                                         
                                         <div class="flex-1 min-w-0">
                                             <!-- Header -->
                                             <div class="flex items-center flex-wrap gap-2">
-                                                <?php if (!empty($session['country_code']) && $session['country_code'] !== 'xx'): ?>
-                                                    <span class="fi fi-<?= strtolower($session['country_code']) ?> text-base"></span>
-                                                <?php endif; ?>
-                                                <h4 class="text-sm font-semibold text-gray-900">
-                                                    <?= htmlspecialchars($session['city'] ?? 'Unknown') ?>, <?= htmlspecialchars($session['country'] ?? 'Unknown') ?>
+                                                {% if session.country_code and session.country_code != 'xx' %}
+                                                    <span class="fi fi-{{ session.country_code|lower }} text-base"></span>
+                                                {% endif %}
+                                                <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                                                    {{ session.city|default('Unknown') }}, {{ session.country|default('Unknown') }}
                                                 </h4>
-                                                <?php if ($isCurrent): ?>
+                                                {% if isCurrent %}
                                                     <span class="px-2 py-0.5 bg-green-500 text-white text-xs font-semibold rounded">
                                                         Current
                                                     </span>
-                                                <?php endif; ?>
-                                                <?php if (!empty($session['has_remember_token'])): ?>
-                                                    <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-semibold rounded" title="Remember me enabled">
+                                                {% endif %}
+                                                {% if session.has_remember_token %}
+                                                    <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 text-xs font-semibold rounded" title="Remember me enabled">
                                                         <i class="fas fa-cookie-bite"></i>
                                                     </span>
-                                                <?php endif; ?>
+                                                {% endif %}
                                             </div>
                                             
                                             <!-- Browser & OS -->
-                                            <p class="text-xs text-gray-600 mt-1">
+                                            <p class="text-xs text-gray-600 dark:text-slate-400 mt-1">
                                                 <i class="fas fa-globe mr-1"></i>
-                                                <?= htmlspecialchars($browserInfo) ?>
-                                                <?php if (!empty($session['user_agent'])): ?>
-                                                    - <?= htmlspecialchars(substr($session['user_agent'], 0, 60)) ?><?= strlen($session['user_agent']) > 60 ? '...' : '' ?>
-                                                <?php endif; ?>
+                                                {{ session.browserInfo }}
+                                                {% if session.user_agent %}
+                                                    - {{ session.user_agent|slice(0, 60) }}{{ session.user_agent|length > 60 ? '...' : '' }}
+                                                {% endif %}
                                             </p>
                                             
                                             <!-- IP & ISP -->
-                                            <div class="flex flex-wrap items-center gap-3 text-xs text-gray-500 mt-1">
+                                            <div class="flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-slate-400 mt-1">
                                                 <span>
                                                     <i class="fas fa-map-marker-alt mr-1"></i>
-                                                    <?= htmlspecialchars($session['ip_address']) ?>
+                                                    {{ session.ip_address }}
                                                 </span>
-                                                <?php if (!empty($session['isp'])): ?>
+                                                {% if session.isp %}
                                                     <span>
                                                         <i class="fas fa-network-wired mr-1"></i>
-                                                        <?= htmlspecialchars($session['isp']) ?>
+                                                        {{ session.isp }}
                                                     </span>
-                                                <?php endif; ?>
+                                                {% endif %}
                                             </div>
                                             
                                             <!-- Session Age & Last Activity -->
-                                            <div class="flex flex-wrap items-center gap-3 text-xs text-gray-400 mt-1">
-                                                <span title="Session started: <?= date('M j, Y H:i', strtotime($session['created_at'])) ?>">
+                                            <div class="flex flex-wrap items-center gap-3 text-xs text-gray-400 dark:text-slate-500 mt-1">
+                                                <span title="Session started: {{ session.created_at|date('M j, Y H:i') }}">
                                                     <i class="fas fa-hourglass-start mr-1"></i>
-                                                    <?= $sessionAge ?>
+                                                    {{ session.sessionAge }}
                                                 </span>
                                                 <span>
                                                     <i class="fas fa-clock mr-1"></i>
-                                                    Active <?= $timeAgo ?>
+                                                    Active {{ session.timeAgo }}
                                                 </span>
                                             </div>
                                         </div>
                                     </div>
 
                                     <!-- Delete Button (only for non-current sessions) -->
-                                    <?php if (!$isCurrent): ?>
-                                        <form method="POST" action="/profile/logout-session/<?= htmlspecialchars($session['id']) ?>" onsubmit="return confirm('Terminate this session?\n\nThat device will be logged out immediately.')" class="ml-3">
-                                            <?= csrf_field() ?>
-                                            <button type="submit" class="flex items-center justify-center w-8 h-8 bg-red-100 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-colors" title="Terminate session">
+                                    {% if not isCurrent %}
+                                        <form method="POST" action="/profile/logout-session/{{ session.id }}" onsubmit="return confirm('Terminate this session?\n\nThat device will be logged out immediately.')" class="ml-3">
+                                            {{ csrf_field() }}
+                                            <button type="submit" class="flex items-center justify-center w-8 h-8 bg-red-100 dark:bg-red-500/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-600 hover:text-white dark:hover:bg-red-600 transition-colors" title="Terminate session">
                                                 <i class="fas fa-times text-sm"></i>
                                             </button>
                                         </form>
-                                    <?php endif; ?>
+                                    {% endif %}
                                 </div>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
 
                         <!-- Info Box -->
-                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4">
-                            <p class="text-xs text-gray-600">
-                                <i class="fas fa-info-circle text-blue-500 mr-1"></i>
+                        <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-3 mt-4">
+                            <p class="text-xs text-gray-600 dark:text-slate-400">
+                                <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
                                 If you see any suspicious sessions or don't recognize a device, logout other sessions immediately and change your password.
                             </p>
                         </div>
-                    <?php else: ?>
+                    {% else %}
                         <div class="text-center py-8">
-                            <i class="fas fa-laptop text-gray-300 text-4xl mb-3"></i>
-                            <p class="text-sm text-gray-600">No active sessions found</p>
+                            <i class="fas fa-laptop text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400">No active sessions found</p>
                         </div>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
             </div>
         </div>
 
         <!-- Danger Zone Section -->
-        <?php if ($user['role'] !== 'admin'): ?>
+        {% if user.role != 'admin' %}
         <div id="section-danger" class="content-section hidden">
-            <div class="bg-white rounded-lg border border-red-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-red-200 bg-red-50">
-                    <h3 class="text-lg font-semibold text-red-900">Danger Zone</h3>
-                    <p class="text-sm text-red-700 mt-1">Irreversible and destructive actions</p>
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-500/20 overflow-hidden">
+                <div class="px-6 py-4 border-b border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-red-500/10">
+                    <h3 class="text-lg font-semibold text-red-900 dark:text-red-400">Danger Zone</h3>
+                    <p class="text-sm text-red-700 dark:text-red-300 mt-1">Irreversible and destructive actions</p>
                 </div>
 
                 <div class="p-6">
-                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+                    <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg p-4">
                         <div class="flex items-start justify-between">
                             <div class="flex-1">
-                                <h4 class="text-sm font-bold text-red-900">Delete Account Permanently</h4>
-                                <p class="text-sm text-red-700 mt-2">
+                                <h4 class="text-sm font-bold text-red-900 dark:text-red-400">Delete Account Permanently</h4>
+                                <p class="text-sm text-red-700 dark:text-red-300 mt-2">
                                     Once you delete your account, there is no going back. This will permanently delete all your profile information and account settings.
                                 </p>
-                                <p class="text-xs text-red-800 font-semibold mt-3 bg-red-100 inline-block px-2 py-1 rounded">
+                                <p class="text-xs text-red-800 dark:text-red-400 font-semibold mt-3 bg-red-100 dark:bg-red-500/20 inline-block px-2 py-1 rounded">
                                     This action cannot be undone
                                 </p>
                             </div>
                             <form id="deleteAccountForm" method="POST" action="/profile/delete" class="inline">
-                                <?= csrf_field() ?>
+                                {{ csrf_field() }}
                                 <button type="button" onclick="confirmDelete()" class="ml-4 inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap">
                                     <i class="fas fa-trash-alt mr-2"></i>
                                     Delete Account
@@ -656,34 +639,39 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
                 </div>
             </div>
         </div>
-        <?php endif; ?>
+        {% endif %}
         
     </div>
 </div>
 
 <style>
-/* Navigation Styles */
 .nav-item {
     color: #6b7280;
     text-align: left;
 }
-
+.dark .nav-item {
+    color: #94a3b8;
+}
 .nav-item:hover {
     background-color: #f3f4f6;
     color: #1f2937;
 }
-
+.dark .nav-item:hover {
+    background-color: #334155;
+    color: #f1f5f9;
+}
 .nav-item.active {
     background-color: #EFF6FF;
     color: #4A90E2;
     font-weight: 600;
 }
-
-/* Content Section Animations */
+.dark .nav-item.active {
+    background-color: rgba(74, 144, 226, 0.15);
+    color: #60a5fa;
+}
 .content-section {
     animation: fadeIn 0.3s ease-out;
 }
-
 @keyframes fadeIn {
     from {
         opacity: 0;
@@ -698,38 +686,28 @@ $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 80);
 
 <script>
 function showSection(section) {
-    // Hide all sections
     document.querySelectorAll('.content-section').forEach(el => {
         el.classList.add('hidden');
     });
     
-    // Remove active class from all nav items
     document.querySelectorAll('.nav-item').forEach(el => {
         el.classList.remove('active');
     });
     
-    // Show selected section
     document.getElementById('section-' + section).classList.remove('hidden');
-    
-    // Add active class to selected nav item
     document.getElementById('nav-' + section).classList.add('active');
     
-    // Update URL hash
     window.location.hash = section;
-    
-    // Scroll to top smoothly
     window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-// On page load, check URL hash and show that section
 document.addEventListener('DOMContentLoaded', function() {
-    const hash = window.location.hash.substring(1); // Remove #
-    const validSections = ['profile', 'security', 'twofactor', 'sessions'<?php if ($user['role'] !== 'admin'): ?>, 'danger'<?php endif; ?>];
+    const hash = window.location.hash.substring(1);
+    const validSections = ['profile', 'security', 'twofactor', 'sessions'{% if user.role != 'admin' %}, 'danger'{% endif %}];
     
     if (hash && validSections.includes(hash)) {
         showSection(hash);
     } else {
-        // Default to profile section
         showSection('profile');
     }
 });
@@ -754,22 +732,22 @@ function hideDisable2FAModal() {
 </script>
 
 <!-- Disable 2FA Modal -->
-<div id="disable2FAModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+<div id="disable2FAModal" class="hidden fixed inset-0 bg-gray-600/50 dark:bg-black/60 overflow-y-auto h-full w-full z-50">
+    <div class="relative top-20 mx-auto p-5 border border-gray-200 dark:border-slate-700 w-96 shadow-lg rounded-md bg-white dark:bg-slate-800">
         <div class="mt-3">
-            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full mb-4">
-                <i class="fas fa-ban text-red-600 text-xl"></i>
+            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 dark:bg-red-500/20 rounded-full mb-4">
+                <i class="fas fa-ban text-red-600 dark:text-red-400 text-xl"></i>
             </div>
             
-            <h3 class="text-lg font-medium text-gray-900 text-center mb-2">Disable Two-Factor Authentication</h3>
-            <p class="text-sm text-gray-500 text-center mb-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white text-center mb-2">Disable Two-Factor Authentication</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 text-center mb-6">
                 This will make your account less secure. Enter your 2FA code to confirm.
             </p>
             
             <form id="disable2FAForm" method="POST" action="/2fa/disable" class="space-y-4">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
                 <div>
-                    <label for="disable2FACode" class="block text-sm font-medium text-gray-700 mb-1.5">
+                    <label for="disable2FACode" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                         Verification Code
                     </label>
                     <input type="text" 
@@ -777,9 +755,9 @@ function hideDisable2FAModal() {
                            name="verification_code" 
                            maxlength="8"
                            placeholder="Enter 2FA code"
-                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors text-sm"
+                           class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                            required>
-                    <p class="text-xs text-gray-500 mt-1">Enter your authenticator code, email code, or backup code</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Enter your authenticator code, email code, or backup code</p>
                 </div>
                 
                 <div class="flex space-x-3 pt-4">
@@ -789,7 +767,7 @@ function hideDisable2FAModal() {
                     </button>
                     <button type="button" 
                             onclick="hideDisable2FAModal()"
-                            class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-2.5 rounded-lg font-medium transition-colors text-sm">
+                            class="flex-1 bg-gray-300 dark:bg-slate-600 hover:bg-gray-400 dark:hover:bg-slate-500 text-gray-700 dark:text-slate-300 py-2.5 rounded-lg font-medium transition-colors text-sm">
                         Cancel
                     </button>
                 </div>
@@ -797,8 +775,4 @@ function hideDisable2FAModal() {
         </div>
     </div>
 </div>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/search/results.php b/app/Views/search/results.php
deleted file mode 100644
index d44aedd..0000000
--- a/app/Views/search/results.php
+++ /dev/null
@@ -1,300 +0,0 @@
-<?php
-$title = 'Search Results';
-$pageTitle = 'Search Results';
-$pageDescription = 'Results for "' . htmlspecialchars($query) . '"';
-$pageIcon = 'fas fa-search';
-ob_start();
-?>
-
-<!-- Search Query Display -->
-<div class="mb-4 bg-white rounded-lg border border-gray-200 p-4">
-    <div class="flex items-center justify-between">
-        <div>
-            <p class="text-sm text-gray-600">Searching for:</p>
-            <h3 class="text-lg font-semibold text-gray-900"><?= htmlspecialchars($query) ?></h3>
-        </div>
-        <form action="/search" method="GET" class="flex gap-2">
-            <input type="text" 
-                   name="q" 
-                   value="<?= htmlspecialchars($query) ?>"
-                   placeholder="Search again..." 
-                   class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm"
-                   autofocus>
-            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
-                <i class="fas fa-search mr-2"></i>
-                Search
-            </button>
-        </form>
-    </div>
-</div>
-
-<!-- Pagination Info & Per Page Selector -->
-<?php if (!empty($existingDomains) && $pagination['total'] > 0): ?>
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?></span> result(s)
-    </div>
-    
-    <form method="GET" action="/search" class="flex items-center gap-2">
-        <input type="hidden" name="q" value="<?= htmlspecialchars($query) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= $pagination['per_page'] == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $pagination['per_page'] == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $pagination['per_page'] == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $pagination['per_page'] == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-<?php endif; ?>
-
-<?php if (!empty($existingDomains)): ?>
-    <!-- Existing Domains Found -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-4">
-        <div class="px-6 py-4 border-b border-gray-200 bg-green-50">
-            <h2 class="text-lg font-semibold text-green-900 flex items-center">
-                <i class="fas fa-check-circle text-green-600 mr-2"></i>
-                Found <?= $pagination['total'] ?> Matching Domain(s) in Your Portfolio
-            </h2>
-        </div>
-        <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Domain</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Registrar</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Expiration</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($existingDomains as $domain): ?>
-                        <?php
-                        // Display data prepared by DomainHelper in controller
-                        $daysLeft = $domain['daysLeft'];
-                        $expiryClass = $domain['expiryClass'];
-                        ?>
-                        <tr class="hover:bg-gray-50">
-                            <td class="px-6 py-4">
-                                <a href="/domains/<?= $domain['id'] ?>" class="text-sm font-semibold text-primary hover:text-primary-dark">
-                                    <?= htmlspecialchars($domain['domain_name']) ?>
-                                </a>
-                            </td>
-                            <td class="px-6 py-4 text-sm text-gray-900">
-                                <?= htmlspecialchars($domain['registrar'] ?? 'Unknown') ?>
-                            </td>
-                            <td class="px-6 py-4">
-                                <?php if (!empty($domain['expiration_date'])): ?>
-                                    <div class="text-sm">
-                                        <div class="font-medium text-gray-900"><?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?></div>
-                                        <div class="text-xs <?= $expiryClass ?>">
-                                            <?= $daysLeft ?> days
-                                        </div>
-                                    </div>
-                                <?php else: ?>
-                                    <span class="text-sm text-gray-400">Not set</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4">
-                                <?php
-                                $statusClass = $domain['status'] === 'active' 
-                                    ? 'bg-green-100 text-green-800' 
-                                    : 'bg-gray-100 text-gray-800';
-                                ?>
-                                <span class="px-3 py-1 rounded-full text-xs font-semibold <?= $statusClass ?>">
-                                    <?= ucfirst($domain['status']) ?>
-                                </span>
-                            </td>
-                            <td class="px-6 py-4 text-right">
-                                <a href="/domains/<?= $domain['id'] ?>" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
-                                    View Details →
-                                </a>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-    <!-- Pagination Controls -->
-    <?php if ($pagination['total_pages'] > 1): ?>
-    <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-        <!-- Page Info -->
-        <div class="text-sm text-gray-600">
-            Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?></span> of 
-            <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?></span>
-        </div>
-        
-        <!-- Pagination Buttons -->
-        <div class="flex items-center gap-1">
-            <?php
-            $currentPage = $pagination['current_page'];
-            $totalPages = $pagination['total_pages'];
-            
-            // Helper function to build pagination URL
-            function paginationUrl($page, $query, $perPage) {
-                return '/search?q=' . urlencode($query) . '&page=' . $page . '&per_page=' . $perPage;
-            }
-            ?>
-            
-            <!-- First Page -->
-            <?php if ($currentPage > 1): ?>
-                <a href="<?= paginationUrl(1, $query, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                    <i class="fas fa-angle-double-left"></i>
-                </a>
-            <?php endif; ?>
-            
-            <!-- Previous Page -->
-            <?php if ($currentPage > 1): ?>
-                <a href="<?= paginationUrl($currentPage - 1, $query, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                    <i class="fas fa-angle-left"></i> Previous
-                </a>
-            <?php endif; ?>
-            
-            <!-- Page Numbers -->
-            <?php
-            $range = 2; // Show 2 pages on each side of current page
-            $start = max(1, $currentPage - $range);
-            $end = min($totalPages, $currentPage + $range);
-            
-            // Show first page + ellipsis if needed
-            if ($start > 1) {
-                echo '<a href="' . paginationUrl(1, $query, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-                if ($start > 2) {
-                    echo '<span class="px-2 text-gray-500">...</span>';
-                }
-            }
-            
-            // Page numbers
-            for ($i = $start; $i <= $end; $i++) {
-                if ($i == $currentPage) {
-                    echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-                } else {
-                    echo '<a href="' . paginationUrl($i, $query, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-                }
-            }
-            
-            // Show last page + ellipsis if needed
-            if ($end < $totalPages) {
-                if ($end < $totalPages - 1) {
-                    echo '<span class="px-2 text-gray-500">...</span>';
-                }
-                echo '<a href="' . paginationUrl($totalPages, $query, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-            }
-            ?>
-            
-            <!-- Next Page -->
-            <?php if ($currentPage < $totalPages): ?>
-                <a href="<?= paginationUrl($currentPage + 1, $query, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                    Next <i class="fas fa-angle-right"></i>
-                </a>
-            <?php endif; ?>
-            
-            <!-- Last Page -->
-            <?php if ($currentPage < $totalPages): ?>
-                <a href="<?= paginationUrl($totalPages, $query, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                    <i class="fas fa-angle-double-right"></i>
-                </a>
-            <?php endif; ?>
-        </div>
-    </div>
-    <?php endif; ?>
-<?php endif; ?>
-
-<?php if ($isDomainLike && $pagination['total'] == 0): ?>
-    <!-- WHOIS Lookup Results -->
-    <?php if ($whoisData): ?>
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-4">
-            <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
-                <h2 class="text-lg font-semibold text-blue-900 flex items-center">
-                    <i class="fas fa-search text-blue-600 mr-2"></i>
-                    WHOIS Lookup Results
-                </h2>
-                <p class="text-sm text-blue-700 mt-1">Domain not found in your portfolio - showing WHOIS information</p>
-            </div>
-            <div class="p-6">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                        <label class="block text-sm font-semibold text-gray-600 mb-1">Domain</label>
-                        <p class="text-lg font-semibold text-gray-900"><?= htmlspecialchars($whoisData['domain']) ?></p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-semibold text-gray-600 mb-1">Registrar</label>
-                        <p class="text-lg text-gray-900"><?= htmlspecialchars($whoisData['registrar']) ?></p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-semibold text-gray-600 mb-1">Expiration Date</label>
-                        <p class="text-lg text-gray-900">
-                            <?= $whoisData['expiration_date'] ? date('M d, Y', strtotime($whoisData['expiration_date'])) : 'N/A' ?>
-                        </p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-semibold text-gray-600 mb-1">Creation Date</label>
-                        <p class="text-lg text-gray-900">
-                            <?= $whoisData['creation_date'] ? date('M d, Y', strtotime($whoisData['creation_date'])) : 'N/A' ?>
-                        </p>
-                    </div>
-                    <?php if (!empty($whoisData['nameservers'])): ?>
-                    <div class="md:col-span-2">
-                        <label class="block text-sm font-semibold text-gray-600 mb-2">Nameservers</label>
-                        <div class="flex flex-wrap gap-2">
-                            <?php foreach ($whoisData['nameservers'] as $ns): ?>
-                                <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm font-mono"><?= htmlspecialchars($ns) ?></span>
-                            <?php endforeach; ?>
-                        </div>
-                    </div>
-                    <?php endif; ?>
-                </div>
-                
-                <!-- Add Domain Button -->
-                <div class="mt-6 pt-6 border-t border-gray-200">
-                    <form method="POST" action="/domains/store" class="flex items-center justify-between">
-                        <input type="hidden" name="domain_name" value="<?= htmlspecialchars($whoisData['domain']) ?>">
-                        <p class="text-sm text-gray-600">Want to monitor this domain?</p>
-                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                            <i class="fas fa-plus mr-2"></i>
-                            Add to Portfolio
-                        </button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    <?php elseif ($whoisError): ?>
-        <!-- WHOIS Error -->
-        <div class="bg-red-50 border border-red-200 rounded-lg p-6">
-            <div class="flex items-start">
-                <i class="fas fa-exclamation-circle text-red-500 text-xl mr-3 mt-0.5"></i>
-                <div>
-                    <h3 class="text-sm font-semibold text-red-900">WHOIS Lookup Failed</h3>
-                    <p class="text-sm text-red-700 mt-1"><?= htmlspecialchars($whoisError) ?></p>
-                </div>
-            </div>
-        </div>
-    <?php endif; ?>
-<?php endif; ?>
-
-<?php if ($pagination['total'] == 0 && !$isDomainLike): ?>
-    <!-- No Results -->
-    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
-        <div class="flex items-start">
-            <i class="fas fa-info-circle text-yellow-500 text-xl mr-3 mt-0.5"></i>
-            <div>
-                <h3 class="text-sm font-semibold text-yellow-900">No Results Found</h3>
-                <p class="text-sm text-yellow-700 mt-1">
-                    No domains match your search. Try a different search term or enter a domain name to perform a WHOIS lookup.
-                </p>
-            </div>
-        </div>
-    </div>
-<?php endif; ?>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
-
diff --git a/app/Views/search/results.twig b/app/Views/search/results.twig
new file mode 100644
index 0000000..fa128a0
--- /dev/null
+++ b/app/Views/search/results.twig
@@ -0,0 +1,279 @@
+{% extends "layout/base.twig" %}
+
+{% set title = 'Search Results' %}
+{% set pageTitle = 'Search Results' %}
+{% set pageDescription = 'Results for "' ~ query ~ '"' %}
+{% set pageIcon = 'fas fa-search' %}
+
+{% block content %}
+<!-- Search Query Display -->
+<div class="mb-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-slate-400">Searching for:</p>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ query }}</h3>
+        </div>
+        <form action="/search" method="GET" class="flex gap-2">
+            <input type="text" 
+                   name="q" 
+                   value="{{ query }}"
+                   placeholder="Search again..." 
+                   class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+                   autofocus>
+            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
+                <i class="fas fa-search mr-2"></i>
+                Search
+            </button>
+        </form>
+    </div>
+</div>
+
+<!-- Pagination Info & Per Page Selector -->
+{% if existingDomains is not empty and pagination.total > 0 %}
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from }}</span> to 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to }}</span> of 
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total }}</span> result(s)
+    </div>
+    
+    <form method="GET" action="/search" class="flex items-center gap-2">
+        <input type="hidden" name="q" value="{{ query }}">
+        
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+            <option value="10" {{ pagination.per_page == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ pagination.per_page == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ pagination.per_page == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ pagination.per_page == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+{% endif %}
+
+{% if existingDomains is not empty %}
+    <!-- Existing Domains Found -->
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden mb-4">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-green-50 dark:bg-green-500/10">
+            <h2 class="text-lg font-semibold text-green-900 dark:text-green-400 flex items-center">
+                <i class="fas fa-check-circle text-green-600 dark:text-green-500 mr-2"></i>
+                Found {{ pagination.total }} Matching Domain(s) in Your Portfolio
+            </h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Domain</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Registrar</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Expiration</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Status</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for domain in existingDomains %}
+                        {% set daysLeft = domain.daysLeft %}
+                        {% set expiryClass = domain.expiryClass %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700">
+                            <td class="px-6 py-4">
+                                <a href="/domains/{{ domain.id }}" class="text-sm font-semibold text-primary hover:text-primary-dark">
+                                    {{ domain.domain_name }}
+                                </a>
+                            </td>
+                            <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">
+                                {{ domain.registrar ?? 'Unknown' }}
+                            </td>
+                            <td class="px-6 py-4">
+                                {% if domain.expiration_date is not empty %}
+                                    <div class="text-sm">
+                                        <div class="font-medium text-gray-900 dark:text-white">{{ domain.expiration_date ? domain.expiration_date|date('M d, Y') : 'Unknown' }}</div>
+                                        <div class="text-xs {{ expiryClass }}">
+                                            {{ daysLeft }} days
+                                        </div>
+                                    </div>
+                                {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">Not set</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4">
+                                {% if domain.status == 'active' %}
+                                    {% set statusClass = 'bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400' %}
+                                {% else %}
+                                    {% set statusClass = 'bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-300' %}
+                                {% endif %}
+                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ statusClass }}">
+                                    {{ domain.status|capitalize }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 text-right">
+                                <a href="/domains/{{ domain.id }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm font-medium">
+                                    View Details →
+                                </a>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Pagination Controls -->
+    {% if pagination.total_pages > 1 %}
+    {% set currentPage = pagination.current_page %}
+    {% set totalPages = pagination.total_pages %}
+    <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <!-- Page Info -->
+        <div class="text-sm text-gray-600 dark:text-slate-400">
+            Page <span class="font-semibold text-gray-900 dark:text-white">{{ currentPage }}</span> of 
+            <span class="font-semibold text-gray-900 dark:text-white">{{ totalPages }}</span>
+        </div>
+        
+        <!-- Pagination Buttons -->
+        <div class="flex items-center gap-1">
+            <!-- First Page -->
+            {% if currentPage > 1 %}
+                <a href="{{ pagination_url(1, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                    <i class="fas fa-angle-double-left"></i>
+                </a>
+            {% endif %}
+            
+            <!-- Previous Page -->
+            {% if currentPage > 1 %}
+                <a href="{{ pagination_url(currentPage - 1, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                    <i class="fas fa-angle-left"></i> Previous
+                </a>
+            {% endif %}
+            
+            <!-- Page Numbers -->
+            {% set range = 2 %}
+            {% set startPage = max(1, currentPage - range) %}
+            {% set endPage = min(totalPages, currentPage + range) %}
+            
+            {% if startPage > 1 %}
+                <a href="{{ pagination_url(1, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+                {% if startPage > 2 %}
+                    <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+                {% endif %}
+            {% endif %}
+            
+            {% for i in startPage..endPage %}
+                {% if i == currentPage %}
+                    <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+                {% else %}
+                    <a href="{{ pagination_url(i, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+                {% endif %}
+            {% endfor %}
+            
+            {% if endPage < totalPages %}
+                {% if endPage < totalPages - 1 %}
+                    <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+                {% endif %}
+                <a href="{{ pagination_url(totalPages, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+            {% endif %}
+            
+            <!-- Next Page -->
+            {% if currentPage < totalPages %}
+                <a href="{{ pagination_url(currentPage + 1, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                    Next <i class="fas fa-angle-right"></i>
+                </a>
+            {% endif %}
+            
+            <!-- Last Page -->
+            {% if currentPage < totalPages %}
+                <a href="{{ pagination_url(totalPages, {q: query}, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                    <i class="fas fa-angle-double-right"></i>
+                </a>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+{% endif %}
+
+{% if isDomainLike and pagination.total == 0 %}
+    <!-- WHOIS Lookup Results -->
+    {% if whoisData %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden mb-4">
+            <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-blue-50 dark:bg-blue-500/10">
+                <h2 class="text-lg font-semibold text-blue-900 dark:text-blue-400 flex items-center">
+                    <i class="fas fa-search text-blue-600 dark:text-blue-500 mr-2"></i>
+                    WHOIS Lookup Results
+                </h2>
+                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">Domain not found in your portfolio - showing WHOIS information</p>
+            </div>
+            <div class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-slate-400 mb-1">Domain</label>
+                        <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ whoisData.domain }}</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-slate-400 mb-1">Registrar</label>
+                        <p class="text-lg text-gray-900 dark:text-white">{{ whoisData.registrar }}</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-slate-400 mb-1">Expiration Date</label>
+                        <p class="text-lg text-gray-900 dark:text-white">
+                            {{ whoisData.expiration_date ? whoisData.expiration_date|date('M d, Y') : 'N/A' }}
+                        </p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-slate-400 mb-1">Creation Date</label>
+                        <p class="text-lg text-gray-900 dark:text-white">
+                            {{ whoisData.creation_date ? whoisData.creation_date|date('M d, Y') : 'N/A' }}
+                        </p>
+                    </div>
+                    {% if whoisData.nameservers is not empty %}
+                    <div class="md:col-span-2">
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-slate-400 mb-2">Nameservers</label>
+                        <div class="flex flex-wrap gap-2">
+                            {% for ns in whoisData.nameservers %}
+                                <span class="px-3 py-1 bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 rounded text-sm font-mono">{{ ns }}</span>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <!-- Add Domain Button -->
+                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-slate-700">
+                    <form method="POST" action="/domains/store" class="flex items-center justify-between">
+                        <input type="hidden" name="domain_name" value="{{ whoisData.domain }}">
+                        <p class="text-sm text-gray-600 dark:text-slate-400">Want to monitor this domain?</p>
+                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                            <i class="fas fa-plus mr-2"></i>
+                            Add to Portfolio
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    {% elseif whoisError %}
+        <!-- WHOIS Error -->
+        <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg p-6">
+            <div class="flex items-start">
+                <i class="fas fa-exclamation-circle text-red-500 text-xl mr-3 mt-0.5"></i>
+                <div>
+                    <h3 class="text-sm font-semibold text-red-900 dark:text-red-400">WHOIS Lookup Failed</h3>
+                    <p class="text-sm text-red-700 dark:text-red-300 mt-1">{{ whoisError }}</p>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+{% endif %}
+
+{% if pagination.total == 0 and not isDomainLike %}
+    <!-- No Results -->
+    <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-6">
+        <div class="flex items-start">
+            <i class="fas fa-info-circle text-yellow-500 text-xl mr-3 mt-0.5"></i>
+            <div>
+                <h3 class="text-sm font-semibold text-yellow-900 dark:text-yellow-400">No Results Found</h3>
+                <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                    No domains match your search. Try a different search term or enter a domain name to perform a WHOIS lookup.
+                </p>
+            </div>
+        </div>
+    </div>
+{% endif %}
+{% endblock %}
diff --git a/app/Views/settings/index.php b/app/Views/settings/index.twig
similarity index 60%
rename from app/Views/settings/index.php
rename to app/Views/settings/index.twig
index 6dd2790..4ad5349 100644
--- a/app/Views/settings/index.php
+++ b/app/Views/settings/index.twig
@@ -1,114 +1,57 @@
-<?php
-$title = 'Settings';
-$pageTitle = 'System Settings';
-$pageDescription = 'Configure application, email, and monitoring settings';
-$pageIcon = 'fas fa-cog';
-ob_start();
+{% extends 'layout/base.twig' %}
 
-$currentNotificationDays = $settings['notification_days_before'] ?? '30,15,7,3,1';
-$currentCheckInterval = $settings['check_interval_hours'] ?? '24';
-$lastCheckRun = $settings['last_check_run'] ?? null;
+{% set title = 'Settings' %}
+{% set pageTitle = 'System Settings' %}
+{% set pageDescription = 'Configure application, email, and monitoring settings' %}
+{% set pageIcon = 'fas fa-cog' %}
 
-// Get timezone list (popular ones first)
-$popularTimezones = [
-    'UTC' => 'UTC',
-    'America/New_York' => 'Eastern Time (US)',
-    'America/Chicago' => 'Central Time (US)',
-    'America/Denver' => 'Mountain Time (US)',
-    'America/Los_Angeles' => 'Pacific Time (US)',
-    'Europe/London' => 'London',
-    'Europe/Paris' => 'Paris',
-    'Asia/Tokyo' => 'Tokyo',
-    'Australia/Sydney' => 'Sydney'
-];
-
-// Determine which preset is selected
-$selectedPreset = 'custom';
-foreach ($notificationPresets as $key => $preset) {
-    if ($preset['value'] === $currentNotificationDays) {
-        $selectedPreset = $key;
-        break;
-    }
-}
-
-// Cached update state for Updates tab (tab badge + modal on load)
-$cachedUpdateAvailable = false;
-$cachedUpdateData = null;
-$currentVer = $appSettings['app_version'] ?? '0';
-$latestVer = $updateSettings['latest_available_version'] ?? null;
-$updateChannel = $updateSettings['update_channel'] ?? 'stable';
-$commitsBehind = (int)($updateSettings['commits_behind_count'] ?? 0);
-$installedSha = $updateSettings['installed_commit_sha'] ?? '';
-$remoteSha = $updateSettings['latest_remote_sha'] ?? '';
-// If installed SHA matches remote SHA, there's no real hotfix — stale cache
-if ($installedSha !== '' && $remoteSha !== '' && str_starts_with($installedSha, $remoteSha)) {
-    $commitsBehind = 0;
-}
-if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
-    $cachedUpdateAvailable = true;
-    $cachedUpdateData = [
-        'available' => true,
-        'type' => 'release',
-        'current_version' => $currentVer,
-        'latest_version' => $latestVer,
-        'release_notes' => $updateSettings['latest_release_notes'] ?? '',
-        'release_url' => $updateSettings['latest_release_url'] ?? '',
-        'published_at' => $updateSettings['latest_release_published_at'] ?? null,
-        'channel' => $updateChannel,
-    ];
-} elseif ($updateChannel === 'latest' && $commitsBehind > 0) {
-    $cachedUpdateAvailable = true;
-    $cachedUpdateData = [
-        'available' => true,
-        'type' => 'hotfix',
-        'current_version' => $currentVer,
-        'commits_behind' => $commitsBehind,
-        'commit_messages' => [],
-        'channel' => $updateChannel,
-    ];
-}
-?>
+{% set currentNotificationDays = settings.notification_days_before|default('30,15,7,3,1') %}
+{% set currentCheckInterval = settings.check_interval_hours|default('24') %}
+{% set lastCheckRun = settings.last_check_run|default(null) %}
+{% set currentVer = appSettings.app_version|default('0') %}
+{% set updateChannel = updateSettings.update_channel|default('stable') %}
 
+{% block content %}
 <!-- Tabs Navigation -->
-<div class="bg-white rounded-lg border border-gray-200 mb-6">
-    <div class="border-b border-gray-200">
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 mb-6">
+    <div class="border-b border-gray-200 dark:border-slate-700">
         <nav class="flex -mb-px overflow-x-auto">
-            <button onclick="switchTab('app')" id="tab-app" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('app')" id="tab-app" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-cog mr-2"></i>
                 Application
             </button>
-            <button onclick="switchTab('email')" id="tab-email" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('email')" id="tab-email" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-envelope mr-2"></i>
                 Email
             </button>
-            <button onclick="switchTab('monitoring')" id="tab-monitoring" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('monitoring')" id="tab-monitoring" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-bell mr-2"></i>
                 Monitoring
             </button>
-            <button onclick="switchTab('isolation')" id="tab-isolation" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('isolation')" id="tab-isolation" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-users mr-2"></i>
                 User Isolation
             </button>
-            <button onclick="switchTab('security')" id="tab-security" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('security')" id="tab-security" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-shield-alt mr-2"></i>
                 Security
             </button>
-            <button onclick="switchTab('system')" id="tab-system" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('system')" id="tab-system" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-server mr-2"></i>
                 System
             </button>
-            <button onclick="switchTab('maintenance')" id="tab-maintenance" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('maintenance')" id="tab-maintenance" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-tools mr-2"></i>
                 Maintenance
             </button>
-            <button onclick="switchTab('updates')" id="tab-updates" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap relative">
+            <button onclick="switchTab('updates')" id="tab-updates" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap relative">
                 <i class="fas fa-cloud-download-alt mr-2"></i>
                 Updates
-                <?php if (!empty($cachedUpdateAvailable)): ?>
+                {% if cachedUpdateAvailable %}
                 <span id="update-badge" class="ml-1.5 inline-flex items-center justify-center w-2 h-2 bg-amber-500 rounded-full" title="Update available"></span>
-                <?php else: ?>
+                {% else %}
                 <span id="update-badge" class="hidden ml-1.5 inline-flex items-center justify-center w-2 h-2 bg-amber-500 rounded-full"></span>
-                <?php endif; ?>
+                {% endif %}
             </button>
         </nav>
     </div>
@@ -116,101 +59,96 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Application Settings -->
 <div id="content-app" class="tab-content">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Application Settings</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure basic application information</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application Settings</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure basic application information</p>
         </div>
 
         <form method="POST" action="/settings/update-app" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="space-y-4">
                 <div>
-                    <label for="app_name" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="app_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         Application Name
                     </label>
                     <input type="text" id="app_name" name="app_name" required
-                           value="<?= htmlspecialchars($appSettings['app_name']) ?>"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                    <p class="text-xs text-gray-500 mt-1">Name displayed in the interface</p>
+                           value="{{ appSettings.app_name }}"
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Name displayed in the interface</p>
                 </div>
 
                 <div>
-                    <label for="app_url" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="app_url" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         Application URL
                     </label>
                     <input type="url" id="app_url" name="app_url" required
-                           value="<?= htmlspecialchars($appSettings['app_url']) ?>"
+                           value="{{ appSettings.app_url }}"
                            placeholder="https://domains.example.com"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                    <p class="text-xs text-gray-500 mt-1">Base URL for the application (used in emails and links)</p>
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Base URL for the application (used in emails and links)</p>
                 </div>
 
                 <div>
-                    <label for="app_timezone" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="app_timezone" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         Timezone
                     </label>
                     <select id="app_timezone" name="app_timezone" required
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <?php foreach ($popularTimezones as $tz => $label): ?>
-                            <option value="<?= htmlspecialchars($tz) ?>" <?= $appSettings['app_timezone'] === $tz ? 'selected' : '' ?>>
-                                <?= htmlspecialchars($label) ?>
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        {% for tz, label in popularTimezones %}
+                            <option value="{{ tz }}" {{ appSettings.app_timezone == tz ? 'selected' : '' }}>
+                                {{ label }}
                             </option>
-                        <?php endforeach; ?>
+                        {% endfor %}
                         <option disabled>──────────</option>
-                        <?php 
-                        $allTimezones = timezone_identifiers_list();
-                        foreach ($allTimezones as $tz): 
-                            if (!isset($popularTimezones[$tz])):
-                        ?>
-                            <option value="<?= htmlspecialchars($tz) ?>" <?= $appSettings['app_timezone'] === $tz ? 'selected' : '' ?>>
-                                <?= htmlspecialchars($tz) ?>
+                        {% for tz in allTimezones %}
+                            {% if tz not in popularTimezones|keys %}
+                            <option value="{{ tz }}" {{ appSettings.app_timezone == tz ? 'selected' : '' }}>
+                                {{ tz }}
                             </option>
-                        <?php 
-                            endif;
-                        endforeach; 
-                        ?>
+                            {% endif %}
+                        {% endfor %}
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">Application timezone for dates and times</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Application timezone for dates and times</p>
                 </div>
 
                 <!-- User Registration Settings -->
-                <div class="border-t border-gray-200 pt-4 mt-6">
-                    <h4 class="text-base font-semibold text-gray-900 mb-4">User Registration</h4>
+                <div class="border-t border-gray-200 dark:border-slate-700 pt-4 mt-6">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-4">User Registration</h4>
                     
                     <div class="space-y-3">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
                                 <input type="checkbox" id="registration_enabled" name="registration_enabled" value="1"
-                                       <?= !empty($settings['registration_enabled']) ? 'checked' : '' ?>
-                                       class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
+                                       {{ settings.registration_enabled ? 'checked' : '' }}
+                                       class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 rounded focus:ring-primary">
                             </div>
                             <div class="ml-3">
-                                <label for="registration_enabled" class="text-sm font-medium text-gray-700">
+                                <label for="registration_enabled" class="text-sm font-medium text-gray-700 dark:text-slate-300">
                                     Enable User Registration
                                 </label>
-                                <p class="text-xs text-gray-500 mt-1">Allow new users to create accounts via registration form</p>
+                                <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Allow new users to create accounts via registration form</p>
                             </div>
                         </div>
 
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
                                 <input type="checkbox" id="require_email_verification" name="require_email_verification" value="1"
-                                       <?= !empty($settings['require_email_verification']) ? 'checked' : '' ?>
-                                       class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
+                                       {{ settings.require_email_verification ? 'checked' : '' }}
+                                       class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 rounded focus:ring-primary">
                             </div>
                             <div class="ml-3">
-                                <label for="require_email_verification" class="text-sm font-medium text-gray-700">
+                                <label for="require_email_verification" class="text-sm font-medium text-gray-700 dark:text-slate-300">
                                     Require Email Verification
                                 </label>
-                                <p class="text-xs text-gray-500 mt-1">Users must verify their email address before accessing the system</p>
+                                <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Users must verify their email address before accessing the system</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                     <i class="fas fa-save mr-2"></i>
                     Save Application Settings
@@ -222,105 +160,105 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Email Settings -->
 <div id="content-email" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Email Settings</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure SMTP server for sending notifications</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Email Settings</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure SMTP server for sending notifications</p>
         </div>
 
         <form method="POST" action="/settings/update-email" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                    <label for="mail_host" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_host" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         SMTP Host <span class="text-red-500">*</span>
                     </label>
                     <input type="text" id="mail_host" name="mail_host" required
-                           value="<?= htmlspecialchars($emailSettings['mail_host']) ?>"
+                           value="{{ emailSettings.mail_host }}"
                            placeholder="smtp.mailtrap.io"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                 </div>
 
                 <div>
-                    <label for="mail_port" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_port" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         SMTP Port <span class="text-red-500">*</span>
                     </label>
                     <input type="number" id="mail_port" name="mail_port" required
-                           value="<?= htmlspecialchars($emailSettings['mail_port']) ?>"
+                           value="{{ emailSettings.mail_port }}"
                            placeholder="2525"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                 </div>
 
                 <div>
-                    <label for="mail_encryption" class="block text-sm font-medium text-gray-700 mb-2">
-                        Encryption <span class="text-blue-500 text-xs">(Auto-detected by port)</span>
+                    <label for="mail_encryption" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
+                        Encryption <span class="text-blue-500 dark:text-blue-400 text-xs">(Auto-detected by port)</span>
                     </label>
                     <select id="mail_encryption" name="mail_encryption"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <option value="tls" <?= $emailSettings['mail_encryption'] === 'tls' ? 'selected' : '' ?>>TLS (STARTTLS)</option>
-                        <option value="ssl" <?= $emailSettings['mail_encryption'] === 'ssl' ? 'selected' : '' ?>>SSL (SMTPS)</option>
-                        <option value="" <?= empty($emailSettings['mail_encryption']) ? 'selected' : '' ?>>None</option>
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="tls" {{ emailSettings.mail_encryption == 'tls' ? 'selected' : '' }}>TLS (STARTTLS)</option>
+                        <option value="ssl" {{ emailSettings.mail_encryption == 'ssl' ? 'selected' : '' }}>SSL (SMTPS)</option>
+                        <option value="" {{ not emailSettings.mail_encryption ? 'selected' : '' }}>None</option>
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">
-                        <i class="fas fa-magic text-blue-600 mr-1"></i>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+                        <i class="fas fa-magic text-blue-600 dark:text-blue-400 mr-1"></i>
                         <span id="encryption-help">Will auto-update based on port selection</span>
                     </p>
                 </div>
 
                 <div class="md:col-span-2">
-                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                        <p class="text-xs text-gray-600">
-                            <i class="fas fa-info-circle text-gray-400 mr-1"></i>
+                    <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-3">
+                        <p class="text-xs text-gray-600 dark:text-slate-400">
+                            <i class="fas fa-info-circle text-gray-400 dark:text-slate-500 mr-1"></i>
                             <strong>Protocol:</strong> This application uses SMTP (Simple Mail Transfer Protocol) for sending emails.
                         </p>
                     </div>
                 </div>
 
                 <div>
-                    <label for="mail_username" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_username" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         SMTP Username
                     </label>
                     <input type="text" id="mail_username" name="mail_username"
-                           value="<?= htmlspecialchars($emailSettings['mail_username']) ?>"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                           value="{{ emailSettings.mail_username }}"
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                 </div>
 
                 <div>
-                    <label for="mail_password" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         SMTP Password
                     </label>
                     <input type="password" id="mail_password" name="mail_password"
-                           value="<?= htmlspecialchars($emailSettings['mail_password']) ?>"
+                           value="{{ emailSettings.mail_password }}"
                            placeholder="••••••••"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                    <p class="text-xs text-gray-500 mt-1">
-                        <i class="fas fa-lock text-green-600 mr-1"></i>
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+                        <i class="fas fa-lock text-green-600 dark:text-green-400 mr-1"></i>
                         Encrypted before storing in database
                     </p>
                 </div>
 
                 <div>
-                    <label for="mail_from_address" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_from_address" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         From Email <span class="text-red-500">*</span>
                     </label>
                     <input type="email" id="mail_from_address" name="mail_from_address" required
-                           value="<?= htmlspecialchars($emailSettings['mail_from_address']) ?>"
+                           value="{{ emailSettings.mail_from_address }}"
                            placeholder="noreply@domainmonitor.com"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                 </div>
 
                 <div>
-                    <label for="mail_from_name" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="mail_from_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         From Name
                     </label>
                     <input type="text" id="mail_from_name" name="mail_from_name"
-                           value="<?= htmlspecialchars($emailSettings['mail_from_name']) ?>"
+                           value="{{ emailSettings.mail_from_name }}"
                            placeholder="Domain Monitor"
-                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                 </div>
             </div>
 
-            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                     <i class="fas fa-save mr-2"></i>
                     Save Email Settings
@@ -330,18 +268,18 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
         <!-- Test Email Section -->
         <div class="px-6 pb-6">
-            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
                 <div class="flex items-start justify-between">
                     <div class="flex-1">
-                        <h4 class="text-sm font-semibold text-gray-900 mb-1">Test Email Configuration</h4>
-                        <p class="text-sm text-gray-700 mb-3">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Test Email Configuration</h4>
+                        <p class="text-sm text-gray-700 dark:text-slate-300 mb-3">
                             Send a test email to verify your SMTP settings are configured correctly.
                         </p>
                         <form method="POST" action="/settings/test-email" id="testEmailForm" class="flex gap-2">
-                            <?= csrf_field() ?>
+                            {{ csrf_field() }}
                             <input type="email" name="test_email" id="test_email" required
                                    placeholder="Enter email address to receive test"
-                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                                   class="flex-1 px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                             <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors font-medium">
                                 <i class="fas fa-paper-plane mr-2"></i>
                                 Send Test Email
@@ -356,146 +294,146 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Monitoring Settings -->
 <div id="content-monitoring" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Monitoring Settings</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure notification schedules and check intervals</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Monitoring Settings</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure notification schedules and check intervals</p>
         </div>
 
         <form method="POST" action="/settings/update" id="settingsForm" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             
             <!-- Notification Settings -->
             <div class="mb-6">
-                <h4 class="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                     <i class="fas fa-bell text-primary mr-2"></i>
                     Notification Schedule
                 </h4>
                 
                 <div class="space-y-4">
                     <div>
-                        <label for="notification_preset" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="notification_preset" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Choose Preset
                         </label>
-                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" 
+                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white" 
                                 id="notification_preset" name="notification_preset">
-                            <?php foreach ($notificationPresets as $key => $preset): ?>
-                                <option value="<?= htmlspecialchars($key) ?>" 
-                                        data-value="<?= htmlspecialchars($preset['value']) ?>"
-                                        <?= $selectedPreset === $key ? 'selected' : '' ?>>
-                                    <?= htmlspecialchars($preset['label']) ?>
+                            {% for key, preset in notificationPresets %}
+                                <option value="{{ key }}" 
+                                        data-value="{{ preset.value }}"
+                                        {{ selectedPreset == key ? 'selected' : '' }}>
+                                    {{ preset.label }}
                                 </option>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </select>
                     </div>
 
                     <input type="hidden" id="notification_days_before" name="notification_days_before" 
-                           value="<?= htmlspecialchars($currentNotificationDays) ?>">
+                           value="{{ currentNotificationDays }}">
 
                     <!-- Custom days input -->
-                    <div id="custom_days_container" style="display: <?= $selectedPreset === 'custom' ? 'block' : 'none' ?>;">
-                        <label for="custom_notification_days" class="block text-sm font-medium text-gray-700 mb-2">
+                    <div id="custom_days_container" style="display: {{ selectedPreset == 'custom' ? 'block' : 'none' }};">
+                        <label for="custom_notification_days" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Custom Days
                         </label>
                         <input type="text" 
-                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" 
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white" 
                                id="custom_notification_days" 
                                name="custom_notification_days" 
-                               value="<?= $selectedPreset === 'custom' ? htmlspecialchars($currentNotificationDays) : '' ?>"
+                               value="{{ selectedPreset == 'custom' ? currentNotificationDays : '' }}"
                                placeholder="e.g., 90,60,30,14,7,3,1">
-                        <p class="text-xs text-gray-500 mt-1">Comma-separated numbers (will be sorted automatically)</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Comma-separated numbers (will be sorted automatically)</p>
                     </div>
 
                     <!-- Preview -->
-                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                        <p class="text-sm text-gray-700">
-                            <i class="fas fa-info-circle text-blue-500 mr-1"></i>
-                            Alerts at: <span id="days_preview" class="font-semibold text-primary"><?= htmlspecialchars($currentNotificationDays) ?></span> days
+                    <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-3">
+                        <p class="text-sm text-gray-700 dark:text-slate-300">
+                            <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
+                            Alerts at: <span id="days_preview" class="font-semibold text-primary">{{ currentNotificationDays }}</span> days
                         </p>
                     </div>
                 </div>
             </div>
 
-            <div class="border-t border-gray-200 my-6"></div>
+            <div class="border-t border-gray-200 dark:border-slate-700 my-6"></div>
 
             <!-- Status Change Notifications -->
             <div class="mb-6">
-                <h4 class="text-base font-semibold text-gray-900 mb-2 flex items-center">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
                     <i class="fas fa-exchange-alt text-primary mr-2"></i>
                     Status Change Notifications
                 </h4>
-                <p class="text-sm text-gray-600 mb-4">Choose which domain status changes should trigger notifications (both in-app and external channels).</p>
+                <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Choose which domain status changes should trigger notifications (both in-app and external channels).</p>
                 
                 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                     <!-- Available -->
-                    <label class="flex items-start p-3 bg-blue-50 border border-blue-200 rounded-lg cursor-pointer hover:bg-blue-100 transition-colors">
+                    <label class="flex items-start p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
                         <input type="checkbox" name="notification_status_triggers[]" value="available"
-                               <?= in_array('available', $statusTriggers) ? 'checked' : '' ?>
-                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5">
+                               {{ 'available' in statusTriggers ? 'checked' : '' }}
+                               class="w-4 h-4 text-blue-600 border-gray-300 dark:border-slate-600 rounded focus:ring-blue-500 mt-0.5">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-blue-800">
+                            <span class="text-sm font-medium text-blue-800 dark:text-blue-400">
                                 <i class="fas fa-check-circle mr-1"></i> Available
                             </span>
-                            <p class="text-xs text-blue-600 mt-0.5">Domain becomes available for registration</p>
+                            <p class="text-xs text-blue-600 dark:text-blue-400 mt-0.5">Domain becomes available for registration</p>
                         </div>
                     </label>
 
                     <!-- Registered -->
-                    <label class="flex items-start p-3 bg-green-50 border border-green-200 rounded-lg cursor-pointer hover:bg-green-100 transition-colors">
+                    <label class="flex items-start p-3 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg cursor-pointer hover:bg-green-100 dark:hover:bg-green-500/20 transition-colors">
                         <input type="checkbox" name="notification_status_triggers[]" value="registered"
-                               <?= in_array('registered', $statusTriggers) ? 'checked' : '' ?>
-                               class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 mt-0.5">
+                               {{ 'registered' in statusTriggers ? 'checked' : '' }}
+                               class="w-4 h-4 text-green-600 border-gray-300 dark:border-slate-600 rounded focus:ring-green-500 mt-0.5">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-green-800">
+                            <span class="text-sm font-medium text-green-800 dark:text-green-400">
                                 <i class="fas fa-globe mr-1"></i> Registered
                             </span>
-                            <p class="text-xs text-green-600 mt-0.5">Domain becomes registered / active</p>
+                            <p class="text-xs text-green-600 dark:text-green-400 mt-0.5">Domain becomes registered / active</p>
                         </div>
                     </label>
 
                     <!-- Expired -->
-                    <label class="flex items-start p-3 bg-red-50 border border-red-200 rounded-lg cursor-pointer hover:bg-red-100 transition-colors">
+                    <label class="flex items-start p-3 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg cursor-pointer hover:bg-red-100 dark:hover:bg-red-500/20 transition-colors">
                         <input type="checkbox" name="notification_status_triggers[]" value="expired"
-                               <?= in_array('expired', $statusTriggers) ? 'checked' : '' ?>
-                               class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500 mt-0.5">
+                               {{ 'expired' in statusTriggers ? 'checked' : '' }}
+                               class="w-4 h-4 text-red-600 border-gray-300 dark:border-slate-600 rounded focus:ring-red-500 mt-0.5">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-red-800">
+                            <span class="text-sm font-medium text-red-800 dark:text-red-400">
                                 <i class="fas fa-times-circle mr-1"></i> Expired
                             </span>
-                            <p class="text-xs text-red-600 mt-0.5">Domain status changes to expired</p>
+                            <p class="text-xs text-red-600 dark:text-red-400 mt-0.5">Domain status changes to expired</p>
                         </div>
                     </label>
 
                     <!-- Redemption Period -->
-                    <label class="flex items-start p-3 bg-amber-50 border border-amber-200 rounded-lg cursor-pointer hover:bg-amber-100 transition-colors">
+                    <label class="flex items-start p-3 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-lg cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-500/20 transition-colors">
                         <input type="checkbox" name="notification_status_triggers[]" value="redemption_period"
-                               <?= in_array('redemption_period', $statusTriggers) ? 'checked' : '' ?>
-                               class="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500 mt-0.5">
+                               {{ 'redemption_period' in statusTriggers ? 'checked' : '' }}
+                               class="w-4 h-4 text-amber-600 border-gray-300 dark:border-slate-600 rounded focus:ring-amber-500 mt-0.5">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-amber-800">
+                            <span class="text-sm font-medium text-amber-800 dark:text-amber-400">
                                 <i class="fas fa-hourglass-half mr-1"></i> Redemption Period
                             </span>
-                            <p class="text-xs text-amber-600 mt-0.5">Domain enters redemption period (recovery fees apply)</p>
+                            <p class="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Domain enters redemption period (recovery fees apply)</p>
                         </div>
                     </label>
 
                     <!-- Pending Delete -->
-                    <label class="flex items-start p-3 bg-rose-50 border border-rose-200 rounded-lg cursor-pointer hover:bg-rose-100 transition-colors">
+                    <label class="flex items-start p-3 bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 rounded-lg cursor-pointer hover:bg-rose-100 dark:hover:bg-rose-500/20 transition-colors">
                         <input type="checkbox" name="notification_status_triggers[]" value="pending_delete"
-                               <?= in_array('pending_delete', $statusTriggers) ? 'checked' : '' ?>
-                               class="w-4 h-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500 mt-0.5">
+                               {{ 'pending_delete' in statusTriggers ? 'checked' : '' }}
+                               class="w-4 h-4 text-rose-600 border-gray-300 dark:border-slate-600 rounded focus:ring-rose-500 mt-0.5">
                         <div class="ml-3">
-                            <span class="text-sm font-medium text-rose-800">
+                            <span class="text-sm font-medium text-rose-800 dark:text-rose-400">
                                 <i class="fas fa-trash-alt mr-1"></i> Pending Delete
                             </span>
-                            <p class="text-xs text-rose-600 mt-0.5">Domain is scheduled for deletion</p>
+                            <p class="text-xs text-rose-600 dark:text-rose-400 mt-0.5">Domain is scheduled for deletion</p>
                         </div>
                     </label>
                 </div>
 
-                <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mt-3">
-                    <p class="text-xs text-gray-600">
-                        <i class="fas fa-info-circle text-gray-400 mr-1"></i>
+                <div class="bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg p-3 mt-3">
+                    <p class="text-xs text-gray-600 dark:text-slate-400">
+                        <i class="fas fa-info-circle text-gray-400 dark:text-slate-500 mr-1"></i>
                         <strong>Note:</strong> These notifications are triggered when a domain's status changes during a WHOIS check. 
                         Redemption Period and Pending Delete detection depends on the TLD registry reporting EPP statuses. 
                         Most gTLDs (.com, .net, .org) support this, but some ccTLDs may not.
@@ -503,54 +441,54 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
                 </div>
             </div>
 
-            <div class="border-t border-gray-200 my-6"></div>
+            <div class="border-t border-gray-200 dark:border-slate-700 my-6"></div>
 
             <!-- Check Interval -->
             <div class="mb-6">
-                <h4 class="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                     <i class="fas fa-clock text-primary mr-2"></i>
                     Domain Check Interval
                 </h4>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                        <label for="check_interval_hours" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="check_interval_hours" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Check Every
                         </label>
-                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" 
+                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white" 
                                 id="check_interval_hours" name="check_interval_hours">
-                            <?php foreach ($checkIntervalPresets as $preset): ?>
-                                <option value="<?= $preset['value'] ?>" 
-                                        <?= $currentCheckInterval == $preset['value'] ? 'selected' : '' ?>>
-                                    <?= htmlspecialchars($preset['label']) ?>
+                            {% for preset in checkIntervalPresets %}
+                                <option value="{{ preset.value }}" 
+                                        {{ currentCheckInterval == preset.value ? 'selected' : '' }}>
+                                    {{ preset.label }}
                                 </option>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </select>
                     </div>
 
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">
+                        <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Last Check Run
                         </label>
-                        <div class="px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg">
-                            <?php if ($lastCheckRun): ?>
+                        <div class="px-3 py-2 bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg">
+                            {% if lastCheckRun %}
                                 <div class="flex items-center text-sm">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span class="text-gray-700"><?= date('M d, Y H:i', strtotime($lastCheckRun)) ?></span>
+                                    <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
+                                    <span class="text-gray-700 dark:text-slate-300">{{ lastCheckRun|date('M d, Y H:i') }}</span>
                                 </div>
-                            <?php else: ?>
+                            {% else %}
                                 <div class="flex items-center text-sm">
-                                    <i class="fas fa-minus-circle text-gray-400 mr-2"></i>
-                                    <span class="text-gray-500">Never run</span>
+                                    <i class="fas fa-minus-circle text-gray-400 dark:text-slate-500 mr-2"></i>
+                                    <span class="text-gray-500 dark:text-slate-400">Never run</span>
                                 </div>
-                            <?php endif; ?>
+                            {% endif %}
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- Actions -->
-            <div class="flex items-center justify-between pt-4 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                     <i class="fas fa-save mr-2"></i>
                     Save Monitoring Settings
@@ -562,65 +500,65 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: User Isolation Settings -->
 <div id="content-isolation" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">User Isolation Settings</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure how users see domains, groups, and tags</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">User Isolation Settings</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure how users see domains, groups, and tags</p>
         </div>
 
         <form method="POST" action="/settings/toggle-isolation" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             
             <div class="space-y-6">
                 <!-- Isolation Mode -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         User Data Visibility
                     </label>
-                    <select name="user_isolation_mode" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <option value="shared" <?= $isolationSettings['user_isolation_mode'] === 'shared' ? 'selected' : '' ?>>
+                    <select name="user_isolation_mode" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="shared" {{ isolationSettings.user_isolation_mode == 'shared' ? 'selected' : '' }}>
                             Shared - All users see all domains, groups, and tags
                         </option>
-                        <option value="isolated" <?= $isolationSettings['user_isolation_mode'] === 'isolated' ? 'selected' : '' ?>>
+                        <option value="isolated" {{ isolationSettings.user_isolation_mode == 'isolated' ? 'selected' : '' }}>
                             Isolated - Users only see their own domains, groups, and tags
                         </option>
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">
                         <strong>Shared:</strong> Current behavior - everyone sees everything<br>
                         <strong>Isolated:</strong> Users only see what they created
                     </p>
                 </div>
 
-                <?php if ($isolationSettings['user_isolation_mode'] === 'shared'): ?>
-                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                {% if isolationSettings.user_isolation_mode == 'shared' %}
+                    <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4">
                         <div class="flex">
-                            <i class="fas fa-exclamation-triangle text-yellow-600 mt-1"></i>
+                            <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-1"></i>
                             <div class="ml-3">
-                                <h4 class="text-sm font-medium text-yellow-800">Migration Notice</h4>
-                                <p class="text-sm text-yellow-700 mt-1">
+                                <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-400">Migration Notice</h4>
+                                <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
                                     When switching to isolated mode, all existing domains and groups will be assigned to the first admin user. 
                                     You can then transfer them to other users as needed.
                                 </p>
                             </div>
                         </div>
                     </div>
-                <?php endif; ?>
+                {% endif %}
 
-                <?php if ($isolationSettings['user_isolation_mode'] === 'isolated'): ?>
-                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                {% if isolationSettings.user_isolation_mode == 'isolated' %}
+                    <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
                         <div class="flex">
-                            <i class="fas fa-info-circle text-blue-600 mt-1"></i>
+                            <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-1"></i>
                             <div class="ml-3">
-                                <h4 class="text-sm font-medium text-blue-800">Isolation Mode Active</h4>
-                                <p class="text-sm text-blue-700 mt-1">
+                                <h4 class="text-sm font-medium text-blue-800 dark:text-blue-400">Isolation Mode Active</h4>
+                                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                                     Users can only see their own domains, groups, and tags. Admins can transfer domains and groups between users.
                                 </p>
                             </div>
                         </div>
                     </div>
-                <?php endif; ?>
+                {% endif %}
 
-                <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+                <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                     <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                         <i class="fas fa-save mr-2"></i>
                         Update Isolation Mode
@@ -633,100 +571,100 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Security Settings -->
 <div id="content-security" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Security Settings</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure CAPTCHA protection for authentication forms</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Security Settings</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure CAPTCHA protection for authentication forms</p>
         </div>
 
         <!-- CAPTCHA Settings -->
         <form method="POST" action="/settings/update-captcha" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="space-y-4">
                 <!-- CAPTCHA Provider Selection -->
                 <div>
-                    <label for="captcha_provider" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="captcha_provider" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         CAPTCHA Provider
                     </label>
                     <select id="captcha_provider" name="captcha_provider" 
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <option value="disabled" <?= ($captchaSettings['provider'] ?? 'disabled') === 'disabled' ? 'selected' : '' ?>>
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="disabled" {{ (captchaSettings.provider|default('disabled')) == 'disabled' ? 'selected' : '' }}>
                             Disabled (No CAPTCHA)
                         </option>
-                        <option value="recaptcha_v2" <?= ($captchaSettings['provider'] ?? '') === 'recaptcha_v2' ? 'selected' : '' ?>>
+                        <option value="recaptcha_v2" {{ (captchaSettings.provider|default('')) == 'recaptcha_v2' ? 'selected' : '' }}>
                             Google reCAPTCHA v2 (Checkbox)
                         </option>
-                        <option value="recaptcha_v3" <?= ($captchaSettings['provider'] ?? '') === 'recaptcha_v3' ? 'selected' : '' ?>>
+                        <option value="recaptcha_v3" {{ (captchaSettings.provider|default('')) == 'recaptcha_v3' ? 'selected' : '' }}>
                             Google reCAPTCHA v3 (Invisible)
                         </option>
-                        <option value="turnstile" <?= ($captchaSettings['provider'] ?? '') === 'turnstile' ? 'selected' : '' ?>>
+                        <option value="turnstile" {{ (captchaSettings.provider|default('')) == 'turnstile' ? 'selected' : '' }}>
                             Cloudflare Turnstile
                         </option>
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">CAPTCHA protects login, registration, and password reset forms</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">CAPTCHA protects login, registration, and password reset forms</p>
                 </div>
 
                 <!-- CAPTCHA Configuration Fields (shown when enabled) -->
-                <div id="captcha_config" style="display: <?= ($captchaSettings['provider'] ?? 'disabled') !== 'disabled' ? 'block' : 'none' ?>;">
-                    <div class="border-t border-gray-200 pt-4 mt-4">
+                <div id="captcha_config" style="display: {{ (captchaSettings.provider|default('disabled')) != 'disabled' ? 'block' : 'none' }};">
+                    <div class="border-t border-gray-200 dark:border-slate-700 pt-4 mt-4">
                         <!-- Site Key -->
                         <div class="mb-4">
-                            <label for="captcha_site_key" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="captcha_site_key" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Site Key (Public Key)
                             </label>
                             <input type="text" id="captcha_site_key" name="captcha_site_key"
-                                   value="<?= htmlspecialchars($captchaSettings['site_key'] ?? '') ?>"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
+                                   value="{{ captchaSettings.site_key|default('') }}"
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                    placeholder="Enter your site/public key">
-                            <p class="text-xs text-gray-500 mt-1">Public key visible in HTML source</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Public key visible in HTML source</p>
                         </div>
 
                         <!-- Secret Key -->
                         <div class="mb-4">
-                            <label for="captcha_secret_key" class="block text-sm font-medium text-gray-700 mb-2">
+                            <label for="captcha_secret_key" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 Secret Key
                             </label>
                             <input type="password" id="captcha_secret_key" name="captcha_secret_key"
                                    value=""
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
-                                   placeholder="<?= !empty($captchaSettings['secret_key']) ? '••••••••••••••••' : 'Enter your secret key' ?>">
-                            <p class="text-xs text-gray-500 mt-1">
-                                <i class="fas fa-lock text-green-600 mr-1"></i>
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+                                   placeholder="{{ captchaSettings.secret_key ? '••••••••••••••••' : 'Enter your secret key' }}">
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+                                <i class="fas fa-lock text-green-600 dark:text-green-400 mr-1"></i>
                                 Encrypted before storing in database. Leave blank to keep existing key.
                             </p>
                         </div>
 
                         <!-- reCAPTCHA v3 Score Threshold (only for v3) -->
-                        <div id="recaptcha_v3_threshold" style="display: <?= ($captchaSettings['provider'] ?? '') === 'recaptcha_v3' ? 'block' : 'none' ?>;">
-                            <label for="recaptcha_v3_score_threshold" class="block text-sm font-medium text-gray-700 mb-2">
+                        <div id="recaptcha_v3_threshold" style="display: {{ (captchaSettings.provider|default('')) == 'recaptcha_v3' ? 'block' : 'none' }};">
+                            <label for="recaptcha_v3_score_threshold" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                                 reCAPTCHA v3 Score Threshold
                             </label>
                             <input type="number" id="recaptcha_v3_score_threshold" name="recaptcha_v3_score_threshold"
-                                   value="<?= htmlspecialchars($captchaSettings['score_threshold'] ?? '0.5') ?>"
+                                   value="{{ captchaSettings.score_threshold|default('0.5') }}"
                                    min="0.0" max="1.0" step="0.1"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                            <p class="text-xs text-gray-500 mt-1">Minimum score required (0.0 to 1.0). Default: 0.5. Lower = more permissive.</p>
+                                   class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Minimum score required (0.0 to 1.0). Default: 0.5. Lower = more permissive.</p>
                         </div>
                     </div>
 
                     <!-- Provider-specific Documentation -->
-                    <div id="captcha_docs" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
-                        <p class="text-sm font-medium text-gray-900 mb-2">
-                            <i class="fas fa-info-circle text-blue-500 mr-1"></i>
+                    <div id="captcha_docs" class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4 mt-4">
+                        <p class="text-sm font-medium text-gray-900 dark:text-white mb-2">
+                            <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
                             <span id="captcha_docs_title">Setup Instructions</span>
                         </p>
-                        <div id="docs_recaptcha_v2" class="text-sm text-gray-700" style="display: none;">
+                        <div id="docs_recaptcha_v2" class="text-sm text-gray-700 dark:text-slate-300" style="display: none;">
                             <p class="mb-1">1. Visit <a href="https://www.google.com/recaptcha/admin" target="_blank" class="text-primary hover:underline">Google reCAPTCHA Admin Console</a></p>
                             <p class="mb-1">2. Register a new site with reCAPTCHA v2 "I'm not a robot" Checkbox</p>
                             <p>3. Copy the Site Key and Secret Key to the fields above</p>
                         </div>
-                        <div id="docs_recaptcha_v3" class="text-sm text-gray-700" style="display: none;">
+                        <div id="docs_recaptcha_v3" class="text-sm text-gray-700 dark:text-slate-300" style="display: none;">
                             <p class="mb-1">1. Visit <a href="https://www.google.com/recaptcha/admin" target="_blank" class="text-primary hover:underline">Google reCAPTCHA Admin Console</a></p>
                             <p class="mb-1">2. Register a new site with reCAPTCHA v3</p>
                             <p class="mb-1">3. Copy the Site Key and Secret Key to the fields above</p>
                             <p>4. Adjust the score threshold based on your security needs (0.5 is recommended)</p>
                         </div>
-                        <div id="docs_turnstile" class="text-sm text-gray-700" style="display: none;">
+                        <div id="docs_turnstile" class="text-sm text-gray-700 dark:text-slate-300" style="display: none;">
                             <p class="mb-1">1. Visit <a href="https://dash.cloudflare.com/?to=/:account/turnstile" target="_blank" class="text-primary hover:underline">Cloudflare Turnstile Dashboard</a></p>
                             <p class="mb-1">2. Create a new Turnstile widget</p>
                             <p class="mb-1">3. Choose "Managed" mode for best user experience</p>
@@ -736,7 +674,7 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
                 </div>
             </div>
 
-            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                     <i class="fas fa-save mr-2"></i>
                     Save Security Settings
@@ -745,68 +683,68 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
         </form>
     </div>
     <!-- Two-Factor Authentication Settings -->
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden mt-6">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Two-Factor Authentication</h3>
-            <p class="text-sm text-gray-600 mt-1">Configure 2FA policy and security settings</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden mt-6">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Two-Factor Authentication</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Configure 2FA policy and security settings</p>
         </div>
 
         <form method="POST" action="/settings/update-two-factor" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="space-y-4">
                 <div>
-                    <label for="two_factor_policy" class="block text-sm font-medium text-gray-700 mb-2">
+                    <label for="two_factor_policy" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                         2FA Policy
                     </label>
                     <select id="two_factor_policy" name="two_factor_policy" 
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <option value="disabled" <?= ($twoFactorSettings['policy'] ?? 'optional') === 'disabled' ? 'selected' : '' ?>>
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <option value="disabled" {{ (twoFactorSettings.policy|default('optional')) == 'disabled' ? 'selected' : '' }}>
                             Disabled - No 2FA features available
                         </option>
-                        <option value="optional" <?= ($twoFactorSettings['policy'] ?? 'optional') === 'optional' ? 'selected' : '' ?>>
+                        <option value="optional" {{ (twoFactorSettings.policy|default('optional')) == 'optional' ? 'selected' : '' }}>
                             Optional - Users can choose to enable 2FA
                         </option>
-                        <option value="forced" <?= ($twoFactorSettings['policy'] ?? 'optional') === 'forced' ? 'selected' : '' ?>>
+                        <option value="forced" {{ (twoFactorSettings.policy|default('optional')) == 'forced' ? 'selected' : '' }}>
                             Forced - All users must enable 2FA (email verification required)
                         </option>
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">
-                        <i class="fas fa-info-circle text-blue-500 mr-1"></i>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+                        <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
                         Users must have verified email addresses to enable 2FA
                     </p>
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                        <label for="two_factor_rate_limit_minutes" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="two_factor_rate_limit_minutes" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Rate Limit (minutes)
                         </label>
                         <input type="number" id="two_factor_rate_limit_minutes" name="two_factor_rate_limit_minutes"
-                               value="<?= htmlspecialchars($twoFactorSettings['rate_limit_minutes'] ?? 15) ?>"
+                               value="{{ twoFactorSettings.rate_limit_minutes|default(15) }}"
                                min="1" max="60"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <p class="text-xs text-gray-500 mt-1">Maximum failed attempts per IP address</p>
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Maximum failed attempts per IP address</p>
                     </div>
 
                     <div>
-                        <label for="two_factor_email_code_expiry_minutes" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="two_factor_email_code_expiry_minutes" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
                             Email Code Expiry (minutes)
                         </label>
                         <input type="number" id="two_factor_email_code_expiry_minutes" name="two_factor_email_code_expiry_minutes"
-                               value="<?= htmlspecialchars($twoFactorSettings['email_code_expiry_minutes'] ?? 10) ?>"
+                               value="{{ twoFactorSettings.email_code_expiry_minutes|default(10) }}"
                                min="1" max="30"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                        <p class="text-xs text-gray-500 mt-1">How long email backup codes remain valid</p>
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">How long email backup codes remain valid</p>
                     </div>
                 </div>
 
                 <!-- 2FA Info Box -->
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                    <p class="text-sm font-medium text-gray-900 mb-2">
-                        <i class="fas fa-info-circle text-blue-500 mr-1"></i>
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white mb-2">
+                        <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mr-1"></i>
                         Two-Factor Authentication Features
                     </p>
-                    <ul class="text-sm text-gray-700 space-y-1">
+                    <ul class="text-sm text-gray-700 dark:text-slate-300 space-y-1">
                         <li>• <strong>TOTP Authenticator Apps:</strong> Google Authenticator, Authy, Microsoft Authenticator</li>
                         <li>• <strong>Email Backup Codes:</strong> One-time codes sent to verified email addresses</li>
                         <li>• <strong>Backup Recovery Codes:</strong> 8 single-use codes generated during setup</li>
@@ -815,7 +753,7 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
                 </div>
             </div>
 
-            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors font-medium">
                     <i class="fas fa-shield-alt mr-2"></i>
                     Save 2FA Settings
@@ -824,19 +762,20 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
         </form>
     </div>
 </div>
+
 <!-- Tab Content: System Information -->
 <div id="content-system" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">System Information</h3>
-            <p class="text-sm text-gray-600 mt-1">Cron job configuration and log file locations</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">System Information</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Cron job configuration and log file locations</p>
         </div>
 
         <div class="p-6 space-y-6">
             <!-- Cron Command -->
             <div>
-                <h4 class="text-sm font-semibold text-gray-900 mb-2 flex items-center">
-                    <i class="fas fa-terminal text-blue-500 mr-2"></i>
+                <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
+                    <i class="fas fa-terminal text-blue-500 dark:text-blue-400 mr-2"></i>
                     Cron Job Command
                 </h4>
                 <div class="bg-gray-900 text-gray-100 px-4 py-3 rounded-lg font-mono text-sm">
@@ -846,34 +785,34 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
             <!-- Crontab Entry -->
             <div>
-                <h4 class="text-sm font-semibold text-gray-900 mb-2 flex items-center">
-                    <i class="fas fa-calendar-alt text-green-500 mr-2"></i>
+                <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
+                    <i class="fas fa-calendar-alt text-green-500 dark:text-green-400 mr-2"></i>
                     Recommended Crontab Entry
                 </h4>
                 <div class="bg-gray-900 text-gray-100 px-4 py-3 rounded-lg font-mono text-sm break-all">
-                    <code>0 */<?= $currentCheckInterval ?> * * * php <?= realpath(PATH_ROOT . 'cron/check_domains.php') ?></code>
+                    <code>0 */{{ currentCheckInterval }} * * * php {{ cronPath }}</code>
                 </div>
-                <p class="text-xs text-gray-500 mt-2">Update the path to match your server installation</p>
+                <p class="text-xs text-gray-500 dark:text-slate-400 mt-2">Update the path to match your server installation</p>
             </div>
 
             <!-- Log Files -->
             <div>
-                <h4 class="text-sm font-semibold text-gray-900 mb-3 flex items-center">
-                    <i class="fas fa-file-alt text-orange-500 mr-2"></i>
+                <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
+                    <i class="fas fa-file-alt text-orange-500 dark:text-orange-400 mr-2"></i>
                     Log Files
                 </h4>
                 <div class="space-y-2">
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
+                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-700 rounded-lg border border-gray-200 dark:border-slate-600">
                         <div>
-                            <p class="text-sm font-medium text-gray-900">Cron Log</p>
-                            <p class="text-xs text-gray-500 mt-0.5">Domain check execution logs</p>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">Cron Log</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-0.5">Domain check execution logs</p>
                         </div>
                         <code class="text-xs bg-gray-900 text-gray-100 px-2 py-1 rounded">logs/cron.log</code>
                     </div>
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
+                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-700 rounded-lg border border-gray-200 dark:border-slate-600">
                         <div>
-                            <p class="text-sm font-medium text-gray-900">TLD Import Log</p>
-                            <p class="text-xs text-gray-500 mt-0.5">TLD registry import logs</p>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">TLD Import Log</p>
+                            <p class="text-xs text-gray-500 dark:text-slate-400 mt-0.5">TLD registry import logs</p>
                         </div>
                         <code class="text-xs bg-gray-900 text-gray-100 px-2 py-1 rounded">logs/tld_import_*.log</code>
                     </div>
@@ -885,26 +824,26 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Maintenance -->
 <div id="content-maintenance" class="tab-content hidden">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Maintenance Tools</h3>
-            <p class="text-sm text-gray-600 mt-1">Database cleanup and system maintenance</p>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maintenance Tools</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Database cleanup and system maintenance</p>
         </div>
 
         <div class="p-6">
             <!-- Clear Logs -->
             <div class="mb-6">
-                <h4 class="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                    <i class="fas fa-trash-alt text-red-500 mr-2"></i>
+                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
+                    <i class="fas fa-trash-alt text-red-500 dark:text-red-400 mr-2"></i>
                     Clear Old Notification Logs
                 </h4>
                 
-                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+                <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4 mb-4">
                     <div class="flex">
-                        <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5 mr-3"></i>
+                        <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3"></i>
                         <div>
-                            <p class="text-sm font-medium text-gray-900">Warning</p>
-                            <p class="text-sm text-gray-700 mt-1">
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
+                            <p class="text-sm text-gray-700 dark:text-slate-300 mt-1">
                                 This will permanently delete all notification logs older than 30 days. This action cannot be undone.
                             </p>
                         </div>
@@ -912,7 +851,7 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
                 </div>
 
                 <form method="POST" action="/settings/clear-logs" onsubmit="return confirm('Are you sure you want to clear logs older than 30 days? This action cannot be undone.')">
-                    <?= csrf_field() ?>
+                    {{ csrf_field() }}
                     <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium">
                         <i class="fas fa-trash-alt mr-2"></i>
                         Clear Old Logs
@@ -921,13 +860,13 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
             </div>
 
             <!-- Future maintenance tools can be added here -->
-            <div class="border-t border-gray-200 pt-6 mt-6">
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="border-t border-gray-200 dark:border-slate-700 pt-6 mt-6">
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
                     <div class="flex">
-                        <i class="fas fa-lightbulb text-blue-500 mt-0.5 mr-3"></i>
+                        <i class="fas fa-lightbulb text-blue-500 dark:text-blue-400 mt-0.5 mr-3"></i>
                         <div>
-                            <p class="text-sm font-medium text-gray-900">Database Optimization</p>
-                            <p class="text-sm text-gray-700 mt-1">
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">Database Optimization</p>
+                            <p class="text-sm text-gray-700 dark:text-slate-300 mt-1">
                                 Regular maintenance keeps your system running smoothly. Consider clearing old logs monthly.
                             </p>
                         </div>
@@ -940,23 +879,23 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 
 <!-- Tab Content: Updates -->
 <div id="content-updates" class="tab-content hidden">
-    <!-- Update Status card: current version + Check button; show "Update available" card when cached -->
-    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-6">
-        <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
+    <!-- Update Status card -->
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden mb-6">
+        <div class="px-6 py-5 border-b border-gray-100 dark:border-slate-700 bg-gradient-to-r from-gray-50 dark:from-slate-900 to-white dark:to-slate-800">
             <div class="flex flex-wrap items-center justify-between gap-4">
                 <div class="flex items-center gap-4">
                     <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                         <i class="fas fa-sync-alt text-primary text-xl"></i>
                     </div>
                     <div>
-                        <h3 class="text-lg font-semibold text-gray-900">Update Status</h3>
-                        <p class="text-sm text-gray-500 mt-0.5">Current version <code class="text-primary font-medium">v<?= htmlspecialchars($appSettings['app_version']) ?></code></p>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Update Status</h3>
+                        <p class="text-sm text-gray-500 dark:text-slate-400 mt-0.5">Current version <code class="text-primary font-medium">v{{ appSettings.app_version }}</code></p>
                     </div>
                 </div>
                 <div class="flex items-center gap-3">
-                    <?php if ($updateSettings['last_update_check']): ?>
-                        <span class="text-xs text-gray-400 hidden sm:inline">Last checked: <?= date('M d, H:i', strtotime($updateSettings['last_update_check'])) ?></span>
-                    <?php endif; ?>
+                    {% if updateSettings.last_update_check %}
+                        <span class="text-xs text-gray-400 dark:text-slate-500 hidden sm:inline">Last checked: {{ updateSettings.last_update_check|date('M d, H:i') }}</span>
+                    {% endif %}
                     <button type="button" id="checkUpdatesBtn" onclick="checkForUpdates()"
                             class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-dark transition-colors shadow-sm">
                         <i class="fas fa-sync-alt mr-2" id="checkUpdatesIcon"></i>
@@ -966,113 +905,112 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
             </div>
         </div>
         <div class="p-6">
-            <!-- Cached update available: show card that opens modal (so landing from top bar shows update without clicking Check) -->
-            <?php if ($cachedUpdateAvailable && $cachedUpdateData): ?>
-            <div id="cachedUpdateCard" class="mb-6 p-4 rounded-xl border-2 border-amber-200 bg-amber-50/80 hover:bg-amber-50 transition-colors cursor-pointer" onclick="openUpdateModal(window.__cachedUpdateData)">
+            {% if cachedUpdateAvailable and cachedUpdateData %}
+            <div id="cachedUpdateCard" class="mb-6 p-4 rounded-xl border-2 border-amber-200 dark:border-amber-500/30 bg-amber-50/80 dark:bg-amber-500/10 hover:bg-amber-50 dark:hover:bg-amber-500/15 transition-colors cursor-pointer" onclick="openUpdateModal(window.__cachedUpdateData)">
                 <div class="flex items-center justify-between">
                     <div class="flex items-center gap-3">
-                        <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
-                            <i class="fas fa-cloud-download-alt text-amber-600"></i>
+                        <div class="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center">
+                            <i class="fas fa-cloud-download-alt text-amber-600 dark:text-amber-400"></i>
                         </div>
                         <div>
-                            <p class="text-sm font-semibold text-amber-900">Update available</p>
-                            <p class="text-xs text-amber-700">
-                                <?php if (($cachedUpdateData['type'] ?? '') === 'release'): ?>
-                                    New release: v<?= htmlspecialchars($cachedUpdateData['latest_version'] ?? '') ?> — click to view details and apply
-                                <?php else: ?>
-                                    <?= (int)($cachedUpdateData['commits_behind'] ?? 0) ?> new commit(s) — click to apply hotfix
-                                <?php endif; ?>
+                            <p class="text-sm font-semibold text-amber-900 dark:text-amber-400">Update available</p>
+                            <p class="text-xs text-amber-700 dark:text-amber-300">
+                                {% if (cachedUpdateData.type|default('')) == 'release' %}
+                                    New release: v{{ cachedUpdateData.latest_version|default('') }} — click to view details and apply
+                                {% else %}
+                                    {{ cachedUpdateData.commits_behind|default(0) }} new commit(s) — click to apply hotfix
+                                {% endif %}
                             </p>
                         </div>
                     </div>
-                    <i class="fas fa-chevron-right text-amber-600 text-sm"></i>
+                    <i class="fas fa-chevron-right text-amber-600 dark:text-amber-400 text-sm"></i>
                 </div>
             </div>
-            <?php elseif (!empty($updateSettings['last_update_check'])): ?>
+            {% elseif updateSettings.last_update_check %}
             <!-- Last check found no update: show "up to date" from cache -->
             <div id="cachedUpToDate">
-                <div class="flex items-center p-4 bg-green-50 border border-green-200 rounded-lg">
-                    <i class="fas fa-check-circle text-green-500 text-lg mr-3"></i>
+                <div class="flex items-center p-4 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg">
+                    <i class="fas fa-check-circle text-green-500 dark:text-green-400 text-lg mr-3"></i>
                     <div>
-                        <p class="text-sm font-semibold text-green-800">You're up to date!</p>
-                        <p class="text-xs text-green-600 mt-0.5">Version v<?= htmlspecialchars($appSettings['app_version']) ?> is the latest<?= ($updateSettings['update_channel'] ?? 'stable') === 'stable' ? ' stable release' : ' version' ?>.</p>
+                        <p class="text-sm font-semibold text-green-800 dark:text-green-400">You're up to date!</p>
+                        <p class="text-xs text-green-600 dark:text-green-400 mt-0.5">Version v{{ appSettings.app_version }} is the latest{{ updateChannel == 'stable' ? ' stable release' : ' version' }}.</p>
                     </div>
                 </div>
             </div>
-            <?php endif; ?>
+            {% endif %}
             <!-- Inline result: loading / up-to-date / error (update-available goes in modal) -->
             <div id="updateResultContainer" class="hidden"></div>
         </div>
     </div>
 
     <!-- Update preferences (channel + badge) -->
-    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-6">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Update Preferences</h3>
-            <p class="text-sm text-gray-600 mt-1">Choose update channel and display options</p>
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden mb-6">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Update Preferences</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Choose update channel and display options</p>
         </div>
 
         <form method="POST" action="/settings/updates/preferences" class="p-6">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="space-y-4">
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Update Channel</label>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Update Channel</label>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <!-- Stable Channel -->
                         <label class="relative flex items-start p-4 border-2 rounded-lg cursor-pointer transition-colors
-                            <?= ($updateSettings['update_channel'] ?? 'stable') === 'stable' ? 'border-primary bg-blue-50' : 'border-gray-200 hover:border-gray-300' ?>">
+                            {{ (updateSettings.update_channel|default('stable')) == 'stable' ? 'border-primary bg-blue-50 dark:bg-blue-500/10' : 'border-gray-200 dark:border-slate-600 hover:border-gray-300 dark:hover:border-slate-500' }}">
                             <input type="radio" name="update_channel" value="stable"
-                                   <?= ($updateSettings['update_channel'] ?? 'stable') === 'stable' ? 'checked' : '' ?>
-                                   class="w-4 h-4 text-primary border-gray-300 focus:ring-primary mt-0.5">
+                                   {{ (updateSettings.update_channel|default('stable')) == 'stable' ? 'checked' : '' }}
+                                   class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 focus:ring-primary mt-0.5">
                             <div class="ml-3">
-                                <span class="text-sm font-semibold text-gray-900 flex items-center">
-                                    <i class="fas fa-shield-alt text-green-600 mr-2"></i>
+                                <span class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                                    <i class="fas fa-shield-alt text-green-600 dark:text-green-400 mr-2"></i>
                                     Stable
                                 </span>
-                                <p class="text-xs text-gray-600 mt-1">Only receive tagged release updates (e.g., v1.2.0). Recommended for production environments.</p>
+                                <p class="text-xs text-gray-600 dark:text-slate-400 mt-1">Only receive tagged release updates (e.g., v1.2.0). Recommended for production environments.</p>
                             </div>
                         </label>
 
                         <!-- Latest Channel -->
                         <label class="relative flex items-start p-4 border-2 rounded-lg cursor-pointer transition-colors
-                            <?= ($updateSettings['update_channel'] ?? 'stable') === 'latest' ? 'border-primary bg-blue-50' : 'border-gray-200 hover:border-gray-300' ?>">
+                            {{ (updateSettings.update_channel|default('stable')) == 'latest' ? 'border-primary bg-blue-50 dark:bg-blue-500/10' : 'border-gray-200 dark:border-slate-600 hover:border-gray-300 dark:hover:border-slate-500' }}">
                             <input type="radio" name="update_channel" value="latest"
-                                   <?= ($updateSettings['update_channel'] ?? 'stable') === 'latest' ? 'checked' : '' ?>
-                                   class="w-4 h-4 text-primary border-gray-300 focus:ring-primary mt-0.5">
+                                   {{ (updateSettings.update_channel|default('stable')) == 'latest' ? 'checked' : '' }}
+                                   class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 focus:ring-primary mt-0.5">
                             <div class="ml-3">
-                                <span class="text-sm font-semibold text-gray-900 flex items-center">
-                                    <i class="fas fa-bolt text-amber-500 mr-2"></i>
+                                <span class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                                    <i class="fas fa-bolt text-amber-500 dark:text-amber-400 mr-2"></i>
                                     Latest
                                 </span>
-                                <p class="text-xs text-gray-600 mt-1">Receive both releases and hotfix commits pushed to the main branch. Get fixes faster.</p>
+                                <p class="text-xs text-gray-600 dark:text-slate-400 mt-1">Receive both releases and hotfix commits pushed to the main branch. Get fixes faster.</p>
                             </div>
                         </label>
                     </div>
                 </div>
 
-                <?php if (($updateSettings['update_channel'] ?? 'stable') === 'latest' && empty($updateSettings['installed_commit_sha'])): ?>
-                    <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-                        <p class="text-sm text-amber-800">
+                {% if (updateSettings.update_channel|default('stable')) == 'latest' and not updateSettings.installed_commit_sha %}
+                    <div class="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-lg p-3">
+                        <p class="text-sm text-amber-800 dark:text-amber-400">
                             <i class="fas fa-info-circle mr-1"></i>
                             Commit tracking is not yet active. It will begin after the first update is applied through this system. Until then, only release updates will be detected.
                         </p>
                     </div>
-                <?php endif; ?>
+                {% endif %}
 
                 <!-- Show update badge in top menu -->
-                <div class="border-t border-gray-200 pt-4 mt-4">
+                <div class="border-t border-gray-200 dark:border-slate-700 pt-4 mt-4">
                     <label class="flex items-start cursor-pointer">
                         <input type="checkbox" name="update_badge_enabled" value="1"
-                               <?= ($updateSettings['update_badge_enabled'] ?? '1') !== '0' ? 'checked' : '' ?>
-                               class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mt-0.5">
-                        <span class="ml-3 text-sm text-gray-700">
+                               {{ (updateSettings.update_badge_enabled|default('1')) != '0' ? 'checked' : '' }}
+                               class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 rounded focus:ring-primary mt-0.5">
+                        <span class="ml-3 text-sm text-gray-700 dark:text-slate-300">
                             Show <strong>Update available</strong> badge in the top menu when an update is available (recommended so admins see it without opening the notification panel).
                         </span>
                     </label>
                 </div>
             </div>
 
-            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 mt-6 border-t border-gray-200 dark:border-slate-700">
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                     <i class="fas fa-save mr-2"></i>
                     Save update preferences
@@ -1082,36 +1020,36 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
     </div>
 
     <!-- Rollback Section -->
-    <?php if (!empty($updateSettings['update_backup_path']) && file_exists($updateSettings['update_backup_path'])): ?>
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">Rollback</h3>
-            <p class="text-sm text-gray-600 mt-1">Revert to the previous version if something went wrong</p>
+    {% if rollbackAvailable %}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rollback</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mt-1">Revert to the previous version if something went wrong</p>
         </div>
 
         <div class="p-6">
-            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+            <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4 mb-4">
                 <div class="flex">
-                    <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5 mr-3"></i>
+                    <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3"></i>
                     <div>
-                        <p class="text-sm font-medium text-gray-900">Warning</p>
-                        <p class="text-sm text-gray-700 mt-1">
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
+                        <p class="text-sm text-gray-700 dark:text-slate-300 mt-1">
                             Rolling back will restore application files and database to the state before the last update. 
-                            If the database restore fails automatically, you can import the SQL backup manually from the <code class="text-xs bg-gray-100 px-1 rounded">backups/</code> directory.
+                            If the database restore fails automatically, you can import the SQL backup manually from the <code class="text-xs bg-gray-100 dark:bg-slate-700 px-1 rounded">backups/</code> directory.
                         </p>
                     </div>
                 </div>
             </div>
 
             <div class="flex items-center gap-3">
-                <p class="text-sm text-gray-600">
-                    Backup available: <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded"><?= htmlspecialchars(basename($updateSettings['update_backup_path'])) ?></code>
+                <p class="text-sm text-gray-600 dark:text-slate-400">
+                    Backup available: <code class="text-xs bg-gray-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-gray-900 dark:text-white">{{ updateSettings.update_backup_path|split('/')|last }}</code>
                 </p>
             </div>
 
             <form method="POST" action="/settings/updates/rollback" class="mt-4"
                   onsubmit="return confirm('Are you sure you want to rollback? This will restore files to the previous version.')">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
                 <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors font-medium">
                     <i class="fas fa-undo mr-2"></i>
                     Rollback to Previous Version
@@ -1119,33 +1057,31 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
             </form>
         </div>
     </div>
-    <?php endif; ?>
+    {% endif %}
 
-    <!-- Update Available Modal: same content as before (blue/amber card inside), just in a popup -->
+    <!-- Update Available Modal -->
     <div id="updateAvailableModal" class="fixed inset-0 z-50 hidden" aria-modal="true">
         <div class="fixed inset-0 bg-black/50 transition-opacity" onclick="closeUpdateModal()"></div>
         <div class="fixed inset-0 flex items-center justify-center p-4 pointer-events-none">
-            <div id="updateAvailableModalContent" class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto overflow-hidden">
-                <div class="flex items-start justify-between px-4 py-3 flex-shrink-0 gap-3 bg-blue-50 border border-blue-200 rounded-t-xl">
+            <div id="updateAvailableModalContent" class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto overflow-hidden">
+                <div class="flex items-start justify-between px-4 py-3 flex-shrink-0 gap-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-t-xl">
                     <div class="flex items-start min-w-0">
-                        <i id="updateModalIcon" class="fas fa-arrow-circle-up text-blue-500 text-lg mt-0.5 mr-3"></i>
+                        <i id="updateModalIcon" class="fas fa-arrow-circle-up text-blue-500 dark:text-blue-400 text-lg mt-0.5 mr-3"></i>
                         <div>
-                            <p id="updateModalTitle" class="text-sm font-semibold text-blue-800">New Release Available</p>
-                            <p id="updateModalSubline" class="text-xs text-blue-600 mt-0.5"></p>
+                            <p id="updateModalTitle" class="text-sm font-semibold text-blue-800 dark:text-blue-400">New Release Available</p>
+                            <p id="updateModalSubline" class="text-xs text-blue-600 dark:text-blue-400 mt-0.5"></p>
                         </div>
                     </div>
                     <div class="flex items-center gap-2 flex-shrink-0">
-                        <a id="updateModalReleaseLink" href="#" target="_blank" rel="noopener" class="text-xs text-blue-600 hover:underline whitespace-nowrap"><i class="fab fa-github mr-1"></i>Release notes</a>
-                        <button type="button" onclick="closeUpdateModal()" class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors" aria-label="Close">
+                        <a id="updateModalReleaseLink" href="#" target="_blank" rel="noopener" class="text-xs text-blue-600 dark:text-blue-400 hover:underline whitespace-nowrap"><i class="fab fa-github mr-1"></i>Release notes</a>
+                        <button type="button" onclick="closeUpdateModal()" class="p-2 text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors" aria-label="Close">
                             <i class="fas fa-times text-lg"></i>
                         </button>
                     </div>
                 </div>
                 <div id="updateModalBody" class="update-modal-body p-6 overflow-y-auto flex-1 text-sm min-h-0">
-                    <!-- Filled by JS: changelog or commit list only -->
                 </div>
-                <div id="updateModalFooter" class="px-4 py-3 flex-shrink-0 border-t rounded-b-xl">
-                    <!-- Filled by JS: Apply form (blue for release, amber for hotfix) -->
+                <div id="updateModalFooter" class="px-4 py-3 flex-shrink-0 border-t dark:border-slate-700 rounded-b-xl">
                 </div>
             </div>
         </div>
@@ -1153,7 +1089,7 @@ if ($latestVer && version_compare($latestVer, $currentVer, '>')) {
 </div>
 
 <script>
-window.__cachedUpdateData = <?= $cachedUpdateData ? json_encode($cachedUpdateData) : 'null' ?>;
+window.__cachedUpdateData = {{ cachedUpdateData ? cachedUpdateData|json_encode|raw : 'null' }};
 </script>
 <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.9/dist/purify.min.js"></script>
@@ -1174,9 +1110,14 @@ window.__cachedUpdateData = <?= $cachedUpdateData ? json_encode($cachedUpdateDat
 .changelog-markdown hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 0.5em 0; }
 .changelog-markdown blockquote { border-left: 3px solid rgba(0,0,0,0.15); margin: 0.5em 0; padding-left: 0.75em; color: inherit; opacity: 0.95; }
 .update-modal-body .changelog-markdown { max-height: 20rem; }
+.dark .changelog-markdown code { background: rgba(255,255,255,0.1); }
+.dark .changelog-markdown pre { background: rgba(255,255,255,0.1); }
+.dark .changelog-markdown a { color: #60a5fa; }
+.dark .changelog-markdown a:hover { color: #93bbfc; }
+.dark .changelog-markdown hr { border-top-color: rgba(255,255,255,0.1); }
+.dark .changelog-markdown blockquote { border-left-color: rgba(255,255,255,0.15); }
 </style>
 <script>
-// Auto-update encryption based on port
 function updateEncryptionByPort() {
     const portField = document.getElementById('mail_port');
     const encryptionField = document.getElementById('mail_encryption');
@@ -1186,71 +1127,58 @@ function updateEncryptionByPort() {
     
     const port = parseInt(portField.value);
     
-    // Auto-select encryption based on port
     if (port === 465) {
         encryptionField.value = 'ssl';
-        helpText.innerHTML = '<i class="fas fa-check text-green-600 mr-1"></i>Port 465 detected: SSL encryption selected';
-        helpText.className = 'text-xs text-green-600 mt-1';
+        helpText.innerHTML = '<i class="fas fa-check text-green-600 dark:text-green-400 mr-1"></i>Port 465 detected: SSL encryption selected';
+        helpText.className = 'text-xs text-green-600 dark:text-green-400 mt-1';
     } else if (port === 587) {
         encryptionField.value = 'tls';
-        helpText.innerHTML = '<i class="fas fa-check text-green-600 mr-1"></i>Port 587 detected: TLS encryption selected';
-        helpText.className = 'text-xs text-green-600 mt-1';
+        helpText.innerHTML = '<i class="fas fa-check text-green-600 dark:text-green-400 mr-1"></i>Port 587 detected: TLS encryption selected';
+        helpText.className = 'text-xs text-green-600 dark:text-green-400 mt-1';
     } else if (port === 25 || port === 2525) {
-        // Keep current selection but show info
-        helpText.innerHTML = '<i class="fas fa-info text-blue-600 mr-1"></i>Port ' + port + ': Choose TLS or None based on your server';
-        helpText.className = 'text-xs text-blue-600 mt-1';
+        helpText.innerHTML = '<i class="fas fa-info text-blue-600 dark:text-blue-400 mr-1"></i>Port ' + port + ': Choose TLS or None based on your server';
+        helpText.className = 'text-xs text-blue-600 dark:text-blue-400 mt-1';
     } else {
-        helpText.innerHTML = '<i class="fas fa-question text-gray-600 mr-1"></i>Custom port: Choose encryption manually';
-        helpText.className = 'text-xs text-gray-600 mt-1';
+        helpText.innerHTML = '<i class="fas fa-question text-gray-600 dark:text-slate-400 mr-1"></i>Custom port: Choose encryption manually';
+        helpText.className = 'text-xs text-gray-600 dark:text-slate-400 mt-1';
     }
 }
 
-// Initialize on page load
 document.addEventListener('DOMContentLoaded', function() {
-    // Set up port change listener
     const portField = document.getElementById('mail_port');
     if (portField) {
         portField.addEventListener('input', updateEncryptionByPort);
         portField.addEventListener('change', updateEncryptionByPort);
-        
-        // Run once on page load
         updateEncryptionByPort();
     }
 });
 
-// Tab switching
 function switchTab(tabName) {
-    // Hide all tabs
     document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
     document.querySelectorAll('.tab-button').forEach(btn => {
         btn.classList.remove('active', 'border-primary', 'text-primary');
-        btn.classList.add('border-transparent', 'text-gray-500');
+        btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-slate-400');
     });
     
-    // Show selected tab
     document.getElementById('content-' + tabName).classList.remove('hidden');
     const activeBtn = document.getElementById('tab-' + tabName);
     activeBtn.classList.add('active', 'border-primary', 'text-primary');
-    activeBtn.classList.remove('border-transparent', 'text-gray-500');
+    activeBtn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-slate-400');
     
-    // Update URL hash without scrolling
     history.replaceState(null, null, '#' + tabName);
 }
 
-// Load tab from URL hash on page load
 window.addEventListener('DOMContentLoaded', function() {
-    const hash = window.location.hash.substring(1); // Remove the #
+    const hash = window.location.hash.substring(1);
     const validTabs = ['app', 'email', 'monitoring', 'isolation', 'security', 'system', 'maintenance', 'updates'];
     
     if (hash && validTabs.includes(hash)) {
         switchTab(hash);
     } else {
-        // Default to first tab
         switchTab('app');
     }
 });
 
-// Settings form logic
 document.addEventListener('DOMContentLoaded', function() {
     const presetSelect = document.getElementById('notification_preset');
     if (!presetSelect) return;
@@ -1304,27 +1232,23 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Update check AJAX functionality
     function checkForUpdates() {
         const btn = document.getElementById('checkUpdatesBtn');
         const icon = document.getElementById('checkUpdatesIcon');
         const container = document.getElementById('updateResultContainer');
         const badge = document.getElementById('update-badge');
         
-        // Hide any cached status cards
         var cachedCard = document.getElementById('cachedUpdateCard');
         var cachedUpToDate = document.getElementById('cachedUpToDate');
         if (cachedCard) cachedCard.classList.add('hidden');
         if (cachedUpToDate) cachedUpToDate.classList.add('hidden');
         
-        // Show loading state
         btn.disabled = true;
         btn.classList.add('opacity-75');
         icon.classList.add('fa-spin');
         container.classList.remove('hidden');
-        container.innerHTML = '<div class="flex items-center p-4 bg-gray-50 rounded-lg border border-gray-200"><i class="fas fa-spinner fa-spin text-primary mr-3"></i><span class="text-sm text-gray-600">Checking for updates...</span></div>';
+        container.innerHTML = '<div class="flex items-center p-4 bg-gray-50 dark:bg-slate-700 rounded-lg border border-gray-200 dark:border-slate-600"><i class="fas fa-spinner fa-spin text-primary mr-3"></i><span class="text-sm text-gray-600 dark:text-slate-400">Checking for updates...</span></div>';
         
-        // Get CSRF token
         const csrfInput = document.querySelector('input[name="csrf_token"]');
         const csrfToken = csrfInput ? csrfInput.value : '';
         
@@ -1394,18 +1318,16 @@ document.addEventListener('DOMContentLoaded', function() {
                 releaseLinkEl.classList.add('hidden');
             }
         }
-        if (iconEl) iconEl.className = isRelease ? 'fas fa-arrow-circle-up text-blue-500 text-lg mt-0.5 mr-3' : 'fas fa-wrench text-amber-500 text-lg mt-0.5 mr-3';
-        // Update header colors (blue for release, amber for hotfix)
+        if (iconEl) iconEl.className = isRelease ? 'fas fa-arrow-circle-up text-blue-500 dark:text-blue-400 text-lg mt-0.5 mr-3' : 'fas fa-wrench text-amber-500 dark:text-amber-400 text-lg mt-0.5 mr-3';
         var headerEl = bodyEl.parentElement.querySelector('.rounded-t-xl');
-        if (headerEl) headerEl.className = 'flex items-start justify-between px-4 py-3 flex-shrink-0 gap-3 rounded-t-xl ' + (isRelease ? 'bg-blue-50 border border-blue-200' : 'bg-amber-50 border border-amber-200');
-        if (titleEl) titleEl.className = 'text-sm font-semibold ' + (isRelease ? 'text-blue-800' : 'text-amber-800');
-        if (sublineEl) sublineEl.className = 'text-xs mt-0.5 ' + (isRelease ? 'text-blue-600' : 'text-amber-600');
-        if (releaseLinkEl) releaseLinkEl.className = releaseLinkEl.className.replace(/text-(blue|amber)-600/g, isRelease ? 'text-blue-600' : 'text-amber-600');
-        bodyEl.className = 'update-modal-body p-6 overflow-y-auto flex-1 text-sm min-h-0 ' + (isRelease ? 'bg-blue-50 border-x border-b border-blue-200' : 'bg-amber-50 border-x border-b border-amber-200');
+        if (headerEl) headerEl.className = 'flex items-start justify-between px-4 py-3 flex-shrink-0 gap-3 rounded-t-xl ' + (isRelease ? 'bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20' : 'bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20');
+        if (titleEl) titleEl.className = 'text-sm font-semibold ' + (isRelease ? 'text-blue-800 dark:text-blue-400' : 'text-amber-800 dark:text-amber-400');
+        if (sublineEl) sublineEl.className = 'text-xs mt-0.5 ' + (isRelease ? 'text-blue-600 dark:text-blue-400' : 'text-amber-600 dark:text-amber-400');
+        bodyEl.className = 'update-modal-body p-6 overflow-y-auto flex-1 text-sm min-h-0 ' + (isRelease ? 'bg-blue-50 dark:bg-blue-500/10 border-x border-b border-blue-200 dark:border-blue-500/20' : 'bg-amber-50 dark:bg-amber-500/10 border-x border-b border-amber-200 dark:border-amber-500/20');
         bodyEl.innerHTML = renderUpdateAvailable(data);
         var csrf = document.querySelector('input[name=csrf_token]') ? document.querySelector('input[name=csrf_token]').value : '';
         if (footerEl) {
-            footerEl.className = 'px-4 py-3 flex-shrink-0 border-t rounded-b-xl ' + (isRelease ? 'bg-blue-100 border-blue-200' : 'bg-amber-100 border-amber-200');
+            footerEl.className = 'px-4 py-3 flex-shrink-0 border-t rounded-b-xl ' + (isRelease ? 'bg-blue-100 dark:bg-blue-500/20 border-blue-200 dark:border-blue-500/20' : 'bg-amber-100 dark:bg-amber-500/20 border-amber-200 dark:border-amber-500/20');
             if (isRelease) {
                 footerEl.innerHTML = '<form method="POST" action="/settings/updates/apply" onsubmit="return confirm(\'Apply update to v' + escapeHtml(data.latest_version || '') + '? A backup will be created before updating.\')">' +
                     (csrf ? '<input type="hidden" name="csrf_token" value="' + escapeHtml(csrf) + '">' : '') +
@@ -1439,8 +1361,6 @@ document.addEventListener('DOMContentLoaded', function() {
     window.openUpdateModal = openUpdateModal;
     window.closeUpdateModal = closeUpdateModal;
     
-    // When landing on Settings#updates from an external link (e.g. top bar badge or notification),
-    // auto-open the modal. Skip if the user just submitted a form on this page (referrer is self).
     if (window.location.hash === '#updates' && window.__cachedUpdateData) {
         var ref = document.referrer || '';
         var onSettingsPage = ref.indexOf('/settings') !== -1;
@@ -1461,11 +1381,11 @@ document.addEventListener('DOMContentLoaded', function() {
     
     function renderUpToDate(data) {
         return `
-            <div class="flex items-center p-4 bg-green-50 border border-green-200 rounded-lg">
-                <i class="fas fa-check-circle text-green-500 text-lg mr-3"></i>
+            <div class="flex items-center p-4 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg">
+                <i class="fas fa-check-circle text-green-500 dark:text-green-400 text-lg mr-3"></i>
                 <div>
-                    <p class="text-sm font-semibold text-green-800">You're up to date!</p>
-                    <p class="text-xs text-green-600 mt-0.5">Version ${escapeHtml(data.current_version)} is the latest${data.channel === 'stable' ? ' stable release' : ' version'}.</p>
+                    <p class="text-sm font-semibold text-green-800 dark:text-green-400">You're up to date!</p>
+                    <p class="text-xs text-green-600 dark:text-green-400 mt-0.5">Version ${escapeHtml(data.current_version)} is the latest${data.channel === 'stable' ? ' stable release' : ' version'}.</p>
                 </div>
             </div>`;
     }
@@ -1474,14 +1394,14 @@ document.addEventListener('DOMContentLoaded', function() {
         var html = '';
         if (data.type === 'release') {
             html = data.release_notes
-                ? '<p class="text-sm font-semibold text-blue-800 mb-2 -mt-1">Changelog:</p><hr class="border-blue-200 mb-3"><div class="changelog-markdown text-xs text-blue-700 max-h-40 overflow-y-auto">' + renderReleaseNotesMarkdown(data.release_notes) + '</div>'
-                : '<p class="text-gray-500 text-sm">No changelog available.</p>';
+                ? '<p class="text-sm font-semibold text-blue-800 dark:text-blue-400 mb-2 -mt-1">Changelog:</p><hr class="border-blue-200 dark:border-blue-500/20 mb-3"><div class="changelog-markdown text-xs text-blue-700 dark:text-blue-300 max-h-40 overflow-y-auto">' + renderReleaseNotesMarkdown(data.release_notes) + '</div>'
+                : '<p class="text-gray-500 dark:text-slate-400 text-sm">No changelog available.</p>';
         } else if (data.type === 'hotfix') {
             if (data.commit_messages && data.commit_messages.length > 0) {
-                html = '<p class="text-xs font-semibold text-amber-800 mb-2">Recent commits:</p><div class="space-y-1 max-h-40 overflow-y-auto">';
+                html = '<p class="text-xs font-semibold text-amber-800 dark:text-amber-400 mb-2">Recent commits:</p><div class="space-y-1 max-h-40 overflow-y-auto">';
                 data.commit_messages.forEach(function(c) {
                     var firstLine = (c.message || '').split('\n')[0];
-                    html += '<div class="text-xs text-amber-700 flex items-start"><code class="text-amber-600 bg-amber-100 px-1 rounded mr-2 flex-shrink-0">' + escapeHtml((c.sha || '').substring(0, 7)) + '</code><span class="truncate">' + escapeHtml(firstLine) + '</span></div>';
+                    html += '<div class="text-xs text-amber-700 dark:text-amber-300 flex items-start"><code class="text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-500/20 px-1 rounded mr-2 flex-shrink-0">' + escapeHtml((c.sha || '').substring(0, 7)) + '</code><span class="truncate">' + escapeHtml(firstLine) + '</span></div>';
                 });
                 html += '</div>';
             } else {
@@ -1493,16 +1413,15 @@ document.addEventListener('DOMContentLoaded', function() {
     
     function renderUpdateError(message) {
         return `
-            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
-                <i class="fas fa-exclamation-circle text-red-500 text-lg mr-3"></i>
+            <div class="flex items-center p-4 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-lg">
+                <i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 text-lg mr-3"></i>
                 <div>
-                    <p class="text-sm font-semibold text-red-800">Update check failed</p>
-                    <p class="text-xs text-red-600 mt-0.5">${escapeHtml(message)}</p>
+                    <p class="text-sm font-semibold text-red-800 dark:text-red-400">Update check failed</p>
+                    <p class="text-xs text-red-600 dark:text-red-400 mt-0.5">${escapeHtml(message)}</p>
                 </div>
             </div>`;
     }
     
-    // Ensure escapeHtml is available (may also be defined in base layout)
     if (typeof window.escapeHtml === 'undefined') {
         window.escapeHtml = function(text) {
             if (!text) return '';
@@ -1512,7 +1431,6 @@ document.addEventListener('DOMContentLoaded', function() {
         };
     }
 
-    // CAPTCHA provider selection logic
     const captchaProvider = document.getElementById('captcha_provider');
     if (captchaProvider) {
         const captchaConfig = document.getElementById('captcha_config');
@@ -1524,21 +1442,18 @@ document.addEventListener('DOMContentLoaded', function() {
         function updateCaptchaUI() {
             const selectedProvider = captchaProvider.value;
             
-            // Show/hide configuration section
             if (selectedProvider === 'disabled') {
                 captchaConfig.style.display = 'none';
             } else {
                 captchaConfig.style.display = 'block';
             }
 
-            // Show/hide v3 threshold field
             if (selectedProvider === 'recaptcha_v3') {
                 v3Threshold.style.display = 'block';
             } else {
                 v3Threshold.style.display = 'none';
             }
 
-            // Update documentation
             docsV2.style.display = 'none';
             docsV3.style.display = 'none';
             docsTurnstile.style.display = 'none';
@@ -1553,13 +1468,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         captchaProvider.addEventListener('change', updateCaptchaUI);
-        // Initialize on page load
         updateCaptchaUI();
     }
 });
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/tags/index.php b/app/Views/tags/index.twig
similarity index 56%
rename from app/Views/tags/index.php
rename to app/Views/tags/index.twig
index d4e9341..552dff4 100644
--- a/app/Views/tags/index.php
+++ b/app/Views/tags/index.twig
@@ -1,53 +1,34 @@
-<?php
-$title = 'Tag Management';
-$pageTitle = 'Tag Management';
-$pageDescription = 'Manage your domain tags, colors, and organization';
-$pageIcon = 'fas fa-tags';
-ob_start();
+{% extends 'layout/base.twig' %}
 
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $_GET;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/tags?' . http_build_query($params);
-}
+{% set title = 'Tag Management' %}
+{% set pageTitle = 'Tag Management' %}
+{% set pageDescription = 'Manage your domain tags, colors, and organization' %}
+{% set pageIcon = 'fas fa-tags' %}
 
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
+{% set currentFilters = filters|default({ search: '', color: '', type: '', sort: 'name', order: 'asc' }) %}
 
-// Get current filters
-$currentFilters = $filters ?? ['search' => '', 'color' => '', 'type' => '', 'sort' => 'name', 'order' => 'asc'];
-?>
-
-<!-- Action Buttons -->
+{% block content %}
+{# Action Buttons #}
 <div class="mb-4 flex gap-2 justify-end">
-    <!-- Export Dropdown -->
+    {# Export Dropdown #}
     <div class="relative" id="exportDropdownWrapper">
         <button onclick="document.getElementById('exportDropdownMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors font-medium">
             <i class="fas fa-download mr-2"></i>
             Export
             <i class="fas fa-chevron-down ml-2 text-xs"></i>
         </button>
-        <div id="exportDropdownMenu" class="hidden absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 z-30 overflow-hidden">
-            <a href="/tags/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+        <div id="exportDropdownMenu" class="hidden absolute right-0 mt-1 w-44 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-30 overflow-hidden">
+            <a href="/tags/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                 <i class="fas fa-file-csv text-green-600 mr-2.5"></i>
                 Export as CSV
             </a>
-            <a href="/tags/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100">
+            <a href="/tags/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors border-t border-gray-100 dark:border-slate-700">
                 <i class="fas fa-file-code text-blue-600 mr-2.5"></i>
                 Export as JSON
             </a>
         </div>
     </div>
-    <!-- Import Button -->
+    {# Import Button #}
     <button onclick="document.getElementById('importModal').classList.remove('hidden')" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
         <i class="fas fa-upload mr-2"></i>
         Import
@@ -58,32 +39,32 @@ $currentFilters = $filters ?? ['search' => '', 'color' => '', 'type' => '', 'sor
     </button>
 </div>
 
-<!-- Filters & Search -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+{# Filters & Search #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
     <form method="GET" action="/tags" id="filter-form">
         <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search</label>
                 <div class="relative">
-                    <input type="text" name="search" id="tagSearch" value="<?= htmlspecialchars($currentFilters['search'] ?? '') ?>" placeholder="Search tags..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                    <input type="text" name="search" id="tagSearch" value="{{ currentFilters.search|default('') }}" placeholder="Search tags..." class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
                 </div>
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Color</label>
-                <select name="color" id="colorFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Color</label>
+                <select name="color" id="colorFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                     <option value="">All Colors</option>
-                    <?php foreach ($availableColors as $colorValue => $colorName): ?>
-                        <option value="<?= htmlspecialchars($colorValue) ?>" <?= ($currentFilters['color'] ?? '') === $colorValue ? 'selected' : '' ?>><?= htmlspecialchars($colorName) ?></option>
-                    <?php endforeach; ?>
+                    {% for colorValue, colorName in availableColors %}
+                        <option value="{{ colorValue }}" {{ (currentFilters.color|default('')) == colorValue ? 'selected' : '' }}>{{ colorName }}</option>
+                    {% endfor %}
                 </select>
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Type</label>
-                <select name="type" id="typeFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Type</label>
+                <select name="type" id="typeFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                     <option value="">All Types</option>
-                    <option value="global" <?= ($currentFilters['type'] ?? '') === 'global' ? 'selected' : '' ?>>Global Tags</option>
-                    <option value="user" <?= ($currentFilters['type'] ?? '') === 'user' ? 'selected' : '' ?>>My Tags</option>
+                    <option value="global" {{ (currentFilters.type|default('')) == 'global' ? 'selected' : '' }}>Global Tags</option>
+                    <option value="user" {{ (currentFilters.type|default('')) == 'user' ? 'selected' : '' }}>My Tags</option>
                 </select>
             </div>
             <div class="flex items-end space-x-2">
@@ -91,466 +72,437 @@ $currentFilters = $filters ?? ['search' => '', 'color' => '', 'type' => '', 'sor
                     <i class="fas fa-filter mr-2"></i>
                     Apply
                 </button>
-                <a href="/tags" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
+                <a href="/tags" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
                     <i class="fas fa-times"></i>
                     Clear
                 </a>
             </div>
         </div>
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort'] ?? 'name') ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order'] ?? 'asc') ?>">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort|default('name') }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order|default('asc') }}">
     </form>
 </div>
 
-<!-- Pagination Info & Per Page Selector -->
+{# Pagination Info & Per Page Selector #}
 <div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?? 1 ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?? count($tags) ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?? count($tags) ?></span> tag(s)
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from|default(1) }}</span> to
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to|default(tags|length) }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total|default(tags|length) }}</span> tag(s)
     </div>
-    
+
     <form method="GET" action="/tags" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="search" value="<?= htmlspecialchars($currentFilters['search'] ?? '') ?>">
-        <input type="hidden" name="color" value="<?= htmlspecialchars($currentFilters['color'] ?? '') ?>">
-        <input type="hidden" name="type" value="<?= htmlspecialchars($currentFilters['type'] ?? '') ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort'] ?? 'name') ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order'] ?? 'asc') ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= ($pagination['per_page'] ?? 25) == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= ($pagination['per_page'] ?? 25) == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= ($pagination['per_page'] ?? 25) == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= ($pagination['per_page'] ?? 25) == 100 ? 'selected' : '' ?>>100</option>
+        <input type="hidden" name="search" value="{{ currentFilters.search|default('') }}">
+        <input type="hidden" name="color" value="{{ currentFilters.color|default('') }}">
+        <input type="hidden" name="type" value="{{ currentFilters.type|default('') }}">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort|default('name') }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order|default('asc') }}">
+
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+            <option value="10" {{ (pagination.per_page|default(25)) == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ (pagination.per_page|default(25)) == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ (pagination.per_page|default(25)) == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ (pagination.per_page|default(25)) == 100 ? 'selected' : '' }}>100</option>
         </select>
     </form>
 </div>
 
-<!-- Tags List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <!-- Bulk Actions Bar (shown when tags are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
+{# Tags List #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {# Bulk Actions Bar (shown when tags are selected) #}
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
             <div class="flex items-center gap-3 flex-wrap">
                 <div class="flex items-center gap-2">
-                    <?php if (\Core\Auth::isAdmin()): ?>
+                    {% if auth.isAdmin %}
                     <button type="button" onclick="bulkTransferTags()" class="inline-flex items-center px-4 py-1.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
                         <i class="fas fa-exchange-alt mr-1"></i> Transfer Selected
                     </button>
-                    <?php endif; ?>
+                    {% endif %}
                     <button type="button" onclick="bulkDeleteTags()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                         <i class="fas fa-trash mr-1"></i> Delete Selected
                     </button>
                 </div>
             </div>
         </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
             <i class="fas fa-times mr-1.5"></i> Clear Selection
         </button>
     </div>
-    <?php if (!empty($tags)): ?>
-        <!-- Table View (Desktop) -->
+    {% if tags is not empty %}
+        {# Table View (Desktop) #}
         <div class="hidden lg:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
                     <tr>
                         <th class="px-6 py-3 text-left">
-                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 text-primary focus:ring-primary">
+                            <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('name', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>" class="hover:text-primary flex items-center">
-                                Tag <?= sortIcon('name', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('name', currentFilters.sort|default('name'), currentFilters.order|default('asc'), currentFilters) }}" class="hover:text-primary flex items-center">
+                                Tag {{ sort_icon('name', currentFilters.sort|default('name'), currentFilters.order|default('asc')) }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('description', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>" class="hover:text-primary flex items-center">
-                                Description <?= sortIcon('description', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('description', currentFilters.sort|default('name'), currentFilters.order|default('asc'), currentFilters) }}" class="hover:text-primary flex items-center">
+                                Description {{ sort_icon('description', currentFilters.sort|default('name'), currentFilters.order|default('asc')) }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('usage_count', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>" class="hover:text-primary flex items-center">
-                                Usage <?= sortIcon('usage_count', $currentFilters['sort'] ?? 'name', $currentFilters['order'] ?? 'asc') ?>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('usage_count', currentFilters.sort|default('name'), currentFilters.order|default('asc'), currentFilters) }}" class="hover:text-primary flex items-center">
+                                Usage {{ sort_icon('usage_count', currentFilters.sort|default('name'), currentFilters.order|default('asc')) }}
                             </a>
                         </th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($tags as $tag): ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150 tag-row">
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for tag in tags %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150 tag-row">
                             <td class="px-6 py-4">
-                                <input type="checkbox" class="tag-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="<?= $tag['id'] ?>" onchange="updateBulkActions()">
+                                <input type="checkbox" class="tag-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" value="{{ tag.id }}" onchange="updateBulkActions()">
                             </td>
                             <td class="px-6 py-4">
                                 <div class="flex items-center">
-                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?>">
+                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border {{ tag.color }}">
                                         <i class="fas fa-tag mr-1" style="font-size: 9px;"></i>
-                                        <?= htmlspecialchars($tag['name']) ?>
+                                        {{ tag.name }}
                                     </span>
-                                    <?php if ($tag['user_id'] === null): ?>
-                                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    {% if tag.user_id is null %}
+                                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-400">
                                             <i class="fas fa-globe mr-1" style="font-size: 8px;"></i>
                                             Global
                                         </span>
-                                    <?php endif; ?>
+                                    {% endif %}
                                 </div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">
-                                    <?= !empty($tag['description']) ? htmlspecialchars($tag['description']) : '<span class="text-gray-400 italic">No description</span>' ?>
+                                <div class="text-sm text-gray-900 dark:text-white">
+                                    {% if tag.description is not empty %}
+                                        {{ tag.description }}
+                                    {% else %}
+                                        <span class="text-gray-400 dark:text-slate-500 italic">No description</span>
+                                    {% endif %}
                                 </div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="flex items-center text-sm text-gray-500">
+                                <div class="flex items-center text-sm text-gray-500 dark:text-slate-400">
                                     <i class="fas fa-link mr-1"></i>
-                                    <?= $tag['usage_count'] ?> domain<?= $tag['usage_count'] !== 1 ? 's' : '' ?>
+                                    {{ tag.usage_count }} domain{{ tag.usage_count != 1 ? 's' : '' }}
                                 </div>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                 <div class="flex items-center justify-end space-x-2">
-                                    <a href="/tags/<?= $tag['id'] ?>" class="text-blue-600 hover:text-blue-800" title="View">
+                                    <a href="/tags/{{ tag.id }}" class="text-blue-600 hover:text-blue-800" title="View">
                                         <i class="fas fa-eye"></i>
                                     </a>
-                                    <?php if (\Core\Auth::isAdmin()): ?>
+                                    {% if auth.isAdmin %}
                                         <button type="button" class="tag-transfer-btn text-green-600 hover:text-green-800" title="Transfer Tag"
-                                                data-tag-id="<?= (int)$tag['id'] ?>" data-tag-name="<?= htmlspecialchars($tag['name'], ENT_QUOTES, 'UTF-8') ?>">
+                                                data-tag-id="{{ tag.id }}" data-tag-name="{{ tag.name }}">
                                             <i class="fas fa-exchange-alt"></i>
                                         </button>
-                                    <?php endif; ?>
-                                    <?php if ($tag['user_id'] === null && !\Core\Auth::isAdmin()): ?>
-                                        <!-- Global tag - only admins can edit/delete -->
-                                        <span class="text-xs text-gray-500 italic">Global tag</span>
-                                    <?php else: ?>
-                                        <button onclick="openEditModal(<?= htmlspecialchars(json_encode($tag)) ?>)" 
+                                    {% endif %}
+                                    {% if tag.user_id is null and not auth.isAdmin %}
+                                        <span class="text-xs text-gray-500 dark:text-slate-400 italic">Global tag</span>
+                                    {% else %}
+                                        <button onclick="openEditModal({{ tag|json_encode|e('html_attr') }})"
                                                 class="text-yellow-600 hover:text-yellow-800" title="Edit">
                                             <i class="fas fa-edit"></i>
                                         </button>
-                                        <button onclick="deleteTag(<?= $tag['id'] ?>, <?= htmlspecialchars(json_encode($tag['name'])) ?>)" 
+                                        <button onclick="deleteTag({{ tag.id }}, {{ tag.name|json_encode|e('html_attr') }})"
                                                 class="text-red-600 hover:text-red-800" title="Delete">
                                             <i class="fas fa-trash"></i>
                                         </button>
-                                    <?php endif; ?>
+                                    {% endif %}
                                 </div>
                             </td>
                         </tr>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </tbody>
             </table>
         </div>
 
-        <!-- Card View (Mobile) -->
-        <div class="lg:hidden divide-y divide-gray-200">
-            <?php foreach ($tags as $tag): ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
+        {# Card View (Mobile) #}
+        <div class="lg:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for tag in tags %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
                     <div class="flex items-center mb-3">
-                        <input type="checkbox" class="tag-checkbox-mobile rounded border-gray-300 text-primary focus:ring-primary mr-3" value="<?= $tag['id'] ?>" onchange="updateBulkActions()">
+                        <input type="checkbox" class="tag-checkbox-mobile rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary mr-3" value="{{ tag.id }}" onchange="updateBulkActions()">
                         <div class="flex-1">
                             <div class="flex items-center gap-2 mb-2">
-                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color']) ?>">
+                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border {{ tag.color }}">
                                     <i class="fas fa-tag mr-1" style="font-size: 9px;"></i>
-                                    <?= htmlspecialchars($tag['name']) ?>
+                                    {{ tag.name }}
                                 </span>
-                                <?php if ($tag['user_id'] === null): ?>
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                {% if tag.user_id is null %}
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-400">
                                         <i class="fas fa-globe mr-1" style="font-size: 8px;"></i>
                                         Global
                                     </span>
-                                <?php endif; ?>
+                                {% endif %}
                             </div>
-                            <?php if (!empty($tag['description'])): ?>
-                                <p class="text-sm text-gray-600 mb-2"><?= htmlspecialchars($tag['description']) ?></p>
-                            <?php endif; ?>
-                            <div class="flex items-center text-sm text-gray-500">
+                            {% if tag.description is not empty %}
+                                <p class="text-sm text-gray-600 dark:text-slate-400 mb-2">{{ tag.description }}</p>
+                            {% endif %}
+                            <div class="flex items-center text-sm text-gray-500 dark:text-slate-400">
                                 <i class="fas fa-link mr-1"></i>
-                                Used on <?= $tag['usage_count'] ?> domain<?= $tag['usage_count'] !== 1 ? 's' : '' ?>
+                                Used on {{ tag.usage_count }} domain{{ tag.usage_count != 1 ? 's' : '' }}
                             </div>
                         </div>
                         <div class="flex items-center space-x-2">
-                            <a href="/tags/<?= $tag['id'] ?>" 
+                            <a href="/tags/{{ tag.id }}"
                                class="text-blue-600 hover:text-blue-800" title="View">
                                 <i class="fas fa-eye"></i>
                             </a>
-                            <?php if (\Core\Auth::isAdmin()): ?>
+                            {% if auth.isAdmin %}
                                 <button type="button" class="tag-transfer-btn text-green-600 hover:text-green-800" title="Transfer Tag"
-                                        data-tag-id="<?= (int)$tag['id'] ?>" data-tag-name="<?= htmlspecialchars($tag['name'], ENT_QUOTES, 'UTF-8') ?>">
+                                        data-tag-id="{{ tag.id }}" data-tag-name="{{ tag.name }}">
                                     <i class="fas fa-exchange-alt"></i>
                                 </button>
-                            <?php endif; ?>
-                            <?php if ($tag['user_id'] === null && !\Core\Auth::isAdmin()): ?>
-                                <!-- Global tag - only admins can edit/delete -->
-                                <span class="text-xs text-gray-500 italic">Global tag</span>
-                            <?php else: ?>
-                                <button onclick="openEditModal(<?= htmlspecialchars(json_encode($tag)) ?>)" 
+                            {% endif %}
+                            {% if tag.user_id is null and not auth.isAdmin %}
+                                <span class="text-xs text-gray-500 dark:text-slate-400 italic">Global tag</span>
+                            {% else %}
+                                <button onclick="openEditModal({{ tag|json_encode|e('html_attr') }})"
                                         class="text-yellow-600 hover:text-yellow-800" title="Edit">
                                     <i class="fas fa-edit"></i>
                                 </button>
-                                <button onclick="deleteTag(<?= $tag['id'] ?>, <?= htmlspecialchars(json_encode($tag['name'])) ?>)" 
+                                <button onclick="deleteTag({{ tag.id }}, {{ tag.name|json_encode|e('html_attr') }})"
                                         class="text-red-600 hover:text-red-800" title="Delete">
                                     <i class="fas fa-trash"></i>
                                 </button>
-                            <?php endif; ?>
+                            {% endif %}
                         </div>
                     </div>
                 </div>
-            <?php endforeach; ?>
+            {% endfor %}
         </div>
-    <?php else: ?>
+    {% else %}
         <div class="text-center py-12 px-6">
             <div class="mb-4">
-                <i class="fas fa-tags text-gray-300 text-6xl"></i>
+                <i class="fas fa-tags text-gray-300 dark:text-slate-600 text-6xl"></i>
             </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Tags Yet</h3>
-            <p class="text-sm text-gray-500 mb-4">Start organizing your domains by creating your first tag</p>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Tags Yet</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Start organizing your domains by creating your first tag</p>
             <button onclick="openCreateModal()" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
                 <i class="fas fa-plus mr-2"></i>
                 <span>Create Your First Tag</span>
             </button>
         </div>
-    <?php endif; ?>
+    {% endif %}
 </div>
 
-<!-- Pagination Controls -->
-<?php if (($pagination['total_pages'] ?? 1) > 1): ?>
+{# Pagination Controls #}
+{% if (pagination.total_pages|default(1)) > 1 %}
+{% set currentPage = pagination.current_page|default(1) %}
+{% set totalPages = pagination.total_pages|default(1) %}
+{% set paginationRange = 2 %}
+{% set startPage = max(1, currentPage - paginationRange) %}
+{% set endPage = min(totalPages, currentPage + paginationRange) %}
 <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?? 1 ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?? 1 ?></span>
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ currentPage }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ totalPages }}</span>
     </div>
-    
-    <!-- Pagination Buttons -->
+
     <div class="flex items-center gap-1">
-        <?php
-        $currentPage = $pagination['current_page'] ?? 1;
-        $totalPages = $pagination['total_pages'] ?? 1;
-        
-        // Helper function to build pagination URL
-        function paginationUrl($page, $filters, $perPage) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/tags?' . http_build_query($params);
-        }
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters ?? [], $pagination['per_page'] ?? 25) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-double-left"></i>
             </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters ?? [], $pagination['per_page'] ?? 25) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+            <a href="{{ pagination_url(currentPage - 1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-left"></i> Previous
             </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2; // Show 2 pages on each side of current page
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        // Show first page + ellipsis if needed
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters ?? [], $pagination['per_page'] ?? 25) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        // Page numbers
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters ?? [], $pagination['per_page'] ?? 25) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        // Show last page + ellipsis if needed
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters ?? [], $pagination['per_page'] ?? 25) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters ?? [], $pagination['per_page'] ?? 25) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+        {% endif %}
+
+        {% if startPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if startPage > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+
+        {% for i in startPage..endPage %}
+            {% if i == currentPage %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if endPage < totalPages %}
+            {% if endPage < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(currentPage + 1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 Next <i class="fas fa-angle-right"></i>
             </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $currentFilters ?? [], $pagination['per_page'] ?? 25) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
                 <i class="fas fa-angle-double-right"></i>
             </a>
-        <?php endif; ?>
+        {% endif %}
     </div>
 </div>
-<?php endif; ?>
+{% endif %}
 
-<!-- Create Tag Modal -->
+{# Create Tag Modal #}
 <div id="createModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
             <form method="POST" action="/tags/create">
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h3 class="text-lg font-medium text-gray-900">Create New Tag</h3>
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Create New Tag</h3>
                 </div>
-                
+
                 <div class="px-6 py-4 space-y-4">
                     <div>
-                        <label for="create_name" class="block text-sm font-medium text-gray-700 mb-1">Tag Name</label>
+                        <label for="create_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Tag Name</label>
                         <input type="text" id="create_name" name="name" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                placeholder="e.g., production, staging">
-                        <p class="text-xs text-gray-500 mt-1">Use only letters, numbers, and hyphens</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Use only letters, numbers, and hyphens</p>
                     </div>
-                    
+
                     <div>
-                        <label for="create_color" class="block text-sm font-medium text-gray-700 mb-1">Color</label>
-                        <select id="create_color" name="color" 
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <?php foreach ($availableColors as $colorValue => $colorName): ?>
-                                <option value="<?= htmlspecialchars($colorValue) ?>"><?= htmlspecialchars($colorName) ?></option>
-                            <?php endforeach; ?>
+                        <label for="create_color" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Color</label>
+                        <select id="create_color" name="color"
+                                class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                            {% for colorValue, colorName in availableColors %}
+                                <option value="{{ colorValue }}">{{ colorName }}</option>
+                            {% endfor %}
                         </select>
                     </div>
-                    
+
                     <div>
-                        <label for="create_description" class="block text-sm font-medium text-gray-700 mb-1">Description (Optional)</label>
+                        <label for="create_description" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Description (Optional)</label>
                         <textarea id="create_description" name="description" rows="3"
-                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                  class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
                                   placeholder="Describe what this tag is used for"></textarea>
                     </div>
                 </div>
-                
-                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
-                    <button type="button" onclick="closeCreateModal()" 
-                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+
+                <div class="px-6 py-4 bg-gray-50 dark:bg-slate-900 flex justify-end space-x-3 rounded-b-lg">
+                    <button type="button" onclick="closeCreateModal()"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-md hover:bg-gray-50 dark:hover:bg-slate-600">
                         Cancel
                     </button>
-                    <button type="submit" 
+                    <button type="submit"
                             class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                         Create Tag
                     </button>
                 </div>
-                
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             </form>
         </div>
     </div>
 </div>
 
-<!-- Edit Tag Modal -->
+{# Edit Tag Modal #}
 <div id="editModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
             <form method="POST" action="/tags/update">
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h3 class="text-lg font-medium text-gray-900">Edit Tag</h3>
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Edit Tag</h3>
                 </div>
-                
+
                 <div class="px-6 py-4 space-y-4">
                     <div>
-                        <label for="edit_name" class="block text-sm font-medium text-gray-700 mb-1">Tag Name</label>
+                        <label for="edit_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Tag Name</label>
                         <input type="text" id="edit_name" name="name" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                     </div>
-                    
+
                     <div>
-                        <label for="edit_color" class="block text-sm font-medium text-gray-700 mb-1">Color</label>
-                        <select id="edit_color" name="color" 
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <?php foreach ($availableColors as $colorValue => $colorName): ?>
-                                <option value="<?= htmlspecialchars($colorValue) ?>"><?= htmlspecialchars($colorName) ?></option>
-                            <?php endforeach; ?>
+                        <label for="edit_color" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Color</label>
+                        <select id="edit_color" name="color"
+                                class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                            {% for colorValue, colorName in availableColors %}
+                                <option value="{{ colorValue }}">{{ colorName }}</option>
+                            {% endfor %}
                         </select>
                     </div>
-                    
+
                     <div>
-                        <label for="edit_description" class="block text-sm font-medium text-gray-700 mb-1">Description (Optional)</label>
+                        <label for="edit_description" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Description (Optional)</label>
                         <textarea id="edit_description" name="description" rows="3"
-                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                                  class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white"></textarea>
                     </div>
                 </div>
-                
-                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
-                    <button type="button" onclick="closeEditModal()" 
-                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+
+                <div class="px-6 py-4 bg-gray-50 dark:bg-slate-900 flex justify-end space-x-3 rounded-b-lg">
+                    <button type="button" onclick="closeEditModal()"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-md hover:bg-gray-50 dark:hover:bg-slate-600">
                         Cancel
                     </button>
-                    <button type="submit" 
+                    <button type="submit"
                             class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                         Update Tag
                     </button>
                 </div>
-                
+
                 <input type="hidden" name="id" id="edit_id">
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             </form>
         </div>
     </div>
 </div>
 
-<!-- Import Modal -->
+{# Import Modal #}
 <div id="importModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-    <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-900">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                 <i class="fas fa-upload text-primary mr-2"></i>Import Tags
             </h3>
-            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
+            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300">
                 <i class="fas fa-times"></i>
             </button>
         </div>
         <form method="POST" action="/tags/import" enctype="multipart/form-data" id="tagImportForm">
-            <?= csrf_field() ?>
+            {{ csrf_field() }}
             <div class="p-6 space-y-4">
-                <!-- Drag & Drop Zone -->
+                {# Drag & Drop Zone #}
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Select File</label>
-                    <div id="tagDropzone" class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">Select File</label>
+                    <div id="tagDropzone" class="relative border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50 dark:hover:bg-slate-700">
                         <input type="file" name="import_file" accept=".csv,.json" required id="tagFileInput"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                         <div id="tagDropzoneContent">
-                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                            <p class="text-sm text-gray-600 font-medium">Drag & drop your file here</p>
-                            <p class="text-xs text-gray-400 my-1">or</p>
+                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 dark:text-slate-500 mb-2"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 font-medium">Drag & drop your file here</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 my-1">or</p>
                             <span class="inline-flex items-center px-3 py-1.5 bg-primary text-white text-xs rounded-lg font-medium">
                                 <i class="fas fa-folder-open mr-1.5"></i>Browse Files
                             </span>
-                            <p class="mt-2.5 text-xs text-gray-400">CSV, JSON &middot; Max <?= \App\Helpers\ViewHelper::getMaxUploadSize() ?></p>
+                            <p class="mt-2.5 text-xs text-gray-400 dark:text-slate-500">CSV, JSON &middot; Max {{ max_upload_size() }}</p>
                         </div>
                         <div id="tagDropzoneFile" class="hidden">
                             <i class="fas fa-file-alt text-2xl text-primary mb-1.5"></i>
-                            <p class="text-sm font-medium text-gray-700" id="tagFileName"></p>
-                            <p class="text-xs text-gray-400" id="tagFileSize"></p>
+                            <p class="text-sm font-medium text-gray-700 dark:text-slate-300" id="tagFileName"></p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500" id="tagFileSize"></p>
                             <button type="button" id="tagFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
                                 <i class="fas fa-trash-alt mr-1"></i>Remove
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                    <p class="text-xs text-gray-700 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
-                    <p class="text-xs text-gray-600">CSV columns: <code class="bg-white px-1 rounded">name, color, description</code></p>
-                    <p class="text-xs text-gray-600 mt-0.5">JSON: array of objects with same fields</p>
-                    <p class="text-xs text-gray-500 mt-1">Tags that already exist will be skipped. Only your private tags are imported.</p>
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-3">
+                    <p class="text-xs text-gray-700 dark:text-slate-300 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400">CSV columns: <code class="bg-white dark:bg-slate-700 px-1 rounded">name, color, description</code></p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">JSON: array of objects with same fields</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Tags that already exist will be skipped. Only your private tags are imported.</p>
                 </div>
             </div>
-            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-2 rounded-b-lg">
-                <button type="button" onclick="document.getElementById('importModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 flex justify-end gap-2 rounded-b-lg">
+                <button type="button" onclick="document.getElementById('importModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                     Cancel
                 </button>
                 <button type="submit" id="tagImportBtn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors">
@@ -562,7 +514,6 @@ $currentFilters = $filters ?? ['search' => '', 'color' => '', 'type' => '', 'sor
 </div>
 
 <script>
-// Multi-select functionality
 function toggleSelectAll(checkbox) {
     const checkboxes = document.querySelectorAll('.tag-checkbox, .tag-checkbox-mobile');
     checkboxes.forEach(cb => {
@@ -576,20 +527,17 @@ function updateBulkActions() {
     const bulkActions = document.getElementById('bulk-actions');
     const selectedCount = document.getElementById('selected-count');
     const selectAllCheckbox = document.getElementById('select-all');
-    
-    // Get unique tag IDs (avoid counting both desktop and mobile checkboxes)
+
     const uniqueIds = new Set(Array.from(checkboxes).map(cb => cb.value));
     const count = uniqueIds.size;
-    
+
     if (count > 0) {
         bulkActions.classList.remove('hidden');
         selectedCount.textContent = count + ' tag(s) selected';
     } else {
         bulkActions.classList.add('hidden');
     }
-    
-    // Update select all checkbox state
-    // Only count desktop checkboxes to avoid double counting
+
     const allCheckboxes = document.querySelectorAll('.tag-checkbox');
     const checkedDesktopBoxes = document.querySelectorAll('.tag-checkbox:checked');
     if (selectAllCheckbox) {
@@ -609,7 +557,6 @@ function clearSelection() {
 
 function getSelectedIds() {
     const checkboxes = document.querySelectorAll('.tag-checkbox:checked, .tag-checkbox-mobile:checked');
-    // Return unique IDs only (avoid duplicates from desktop and mobile views)
     const ids = Array.from(checkboxes).map(cb => cb.value);
     return [...new Set(ids)];
 }
@@ -617,22 +564,21 @@ function getSelectedIds() {
 function bulkDeleteTags() {
     const ids = getSelectedIds();
     if (ids.length === 0) return;
-    
+
     if (!confirm(`Delete ${ids.length} tag(s)? This will remove them from all domains.`)) {
         return;
     }
-    
+
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = '/tags/bulk-delete';
-    
-    // Add CSRF token
+
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';
     csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
+    csrfInput.value = '{{ csrf_token() }}';
     form.appendChild(csrfInput);
-    
+
     ids.forEach(id => {
         const input = document.createElement('input');
         input.type = 'hidden';
@@ -640,13 +586,13 @@ function bulkDeleteTags() {
         input.value = id;
         form.appendChild(input);
     });
-    
+
     document.body.appendChild(form);
     form.submit();
 }
 
 function transferTag(tagId, tagName) {
-    const users = <?= json_encode($users ?? []) ?>;
+    const users = {{ users|default([])|json_encode|raw }};
     if (users.length === 0) {
         alert('No users available for transfer');
         return;
@@ -658,24 +604,24 @@ function transferTag(tagId, tagName) {
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
     modal.innerHTML = `
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
-            <h3 class="text-lg font-semibold text-gray-900 mb-1">Transfer Tag</h3>
-            <p class="text-sm text-gray-600 mb-4">Transfer tag "${escapeHtml(tagName)}" to another user.</p>
-            
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Transfer Tag</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Transfer tag "${escapeHtml(tagName)}" to another user.</p>
+
             <form method="POST" action="/tags/transfer">
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="tag_id" value="${tagId}">
-                
+
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Transfer to User</label>
-                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Transfer to User</label>
+                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                         <option value="">Select User</option>
                         ${userOptions}
                     </select>
                 </div>
-                
+
                 <div class="flex justify-end gap-3">
-                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm font-medium">
+                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm font-medium text-gray-700 dark:text-slate-300">
                         Cancel
                     </button>
                     <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
@@ -688,7 +634,6 @@ function transferTag(tagId, tagName) {
     document.body.appendChild(modal);
 }
 
-// Delegate click for table/card Transfer buttons (avoids onclick quote issues)
 document.addEventListener('click', function(e) {
     const btn = e.target.closest('.tag-transfer-btn');
     if (btn) {
@@ -703,38 +648,38 @@ function bulkTransferTags() {
         alert('Please select tags to transfer');
         return;
     }
-    
-    const users = <?= json_encode($users ?? []) ?>;
+
+    const users = {{ users|default([])|json_encode|raw }};
     if (users.length === 0) {
         alert('No users available for transfer');
         return;
     }
-    
+
     const userOptions = users.map(user =>
         `<option value="${user.id}">${user.username} (${user.full_name || 'No name'})</option>`
     ).join('');
-    
+
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
     modal.innerHTML = `
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
-            <h3 class="text-lg font-semibold text-gray-900 mb-1">Transfer Tags</h3>
-            <p class="text-sm text-gray-600 mb-4">Transfer ${ids.length} selected tag(s) to another user.</p>
-            
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Transfer Tags</h3>
+            <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Transfer ${ids.length} selected tag(s) to another user.</p>
+
             <form method="POST" action="/tags/bulk-transfer">
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 ${ids.map(id => `<input type="hidden" name="tag_ids[]" value="${id}">`).join('')}
-                
+
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Transfer to User</label>
-                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">Transfer to User</label>
+                    <select name="target_user_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
                         <option value="">Select User</option>
                         ${userOptions}
                     </select>
                 </div>
-                
+
                 <div class="flex justify-end gap-3">
-                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm font-medium">
+                    <button type="button" onclick="this.closest('.fixed').remove()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm font-medium text-gray-700 dark:text-slate-300">
                         Cancel
                     </button>
                     <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark text-sm font-medium">
@@ -744,7 +689,7 @@ function bulkTransferTags() {
             </form>
         </div>
     `;
-    
+
     document.body.appendChild(modal);
 }
 
@@ -776,25 +721,24 @@ function deleteTag(id, name) {
         const form = document.createElement('form');
         form.method = 'POST';
         form.action = '/tags/delete';
-        
+
         const idInput = document.createElement('input');
         idInput.type = 'hidden';
         idInput.name = 'id';
         idInput.value = id;
         form.appendChild(idInput);
-        
+
         const csrfInput = document.createElement('input');
         csrfInput.type = 'hidden';
         csrfInput.name = 'csrf_token';
-        csrfInput.value = '<?= csrf_token() ?>';
+        csrfInput.value = '{{ csrf_token() }}';
         form.appendChild(csrfInput);
-        
+
         document.body.appendChild(form);
         form.submit();
     }
 }
 
-// Close modals on escape key
 document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
         closeCreateModal();
@@ -802,7 +746,6 @@ document.addEventListener('keydown', function(e) {
     }
 });
 
-// Close modals on backdrop click
 document.getElementById('createModal').addEventListener('click', function(e) {
     if (e.target === this) {
         closeCreateModal();
@@ -821,7 +764,6 @@ document.getElementById('importModal').addEventListener('click', function(e) {
     }
 });
 
-// Close export dropdown when clicking outside
 document.addEventListener('click', function(e) {
     const wrapper = document.getElementById('exportDropdownWrapper');
     if (wrapper && !wrapper.contains(e.target)) {
@@ -829,7 +771,6 @@ document.addEventListener('click', function(e) {
     }
 });
 
-// --- Import drag-and-drop & loading ---
 (function() {
     const dropzone = document.getElementById('tagDropzone');
     const fileInput = document.getElementById('tagFileInput');
@@ -907,8 +848,4 @@ document.addEventListener('click', function(e) {
     });
 })();
 </script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/tags/view.php b/app/Views/tags/view.php
deleted file mode 100644
index 52aa899..0000000
--- a/app/Views/tags/view.php
+++ /dev/null
@@ -1,417 +0,0 @@
-<?php
-$title = 'Tag: ' . htmlspecialchars($tag['name']);
-$pageTitle = 'Tag: ' . htmlspecialchars($tag['name']);
-$pageDescription = 'View all domains that have this tag assigned';
-$pageIcon = 'fas fa-tag';
-ob_start();
-
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder, $tagId) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $_GET;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/tags/' . $tagId . '?' . http_build_query($params);
-}
-
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
-
-// Get current filters
-$currentFilters = $filters ?? ['search' => '', 'status' => '', 'registrar' => '', 'sort' => 'domain_name', 'order' => 'asc'];
-?>
-
-<!-- Back Navigation -->
-<div class="mb-4">
-    <a href="/tags" class="inline-flex items-center px-3 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
-        <i class="fas fa-arrow-left mr-2"></i>
-        Back to Tags
-    </a>
-</div>
-
-<!-- Tag Info Card -->
-<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
-    <div class="flex items-start">
-        <div class="flex-shrink-0">
-            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium border <?= htmlspecialchars($tag['color']) ?>">
-                <i class="fas fa-tag mr-1"></i>
-                <?= htmlspecialchars($tag['name']) ?>
-            </span>
-        </div>
-        <div class="ml-3">
-            <h3 class="text-sm font-semibold text-gray-900 mb-1">Tag Description</h3>
-            <p class="text-xs text-gray-600 leading-relaxed">
-                <?php if (!empty($tag['description'])): ?>
-                    <?= htmlspecialchars($tag['description']) ?>
-                <?php endif; ?>
-            </p>
-        </div>
-    </div>
-</div>
-
-<!-- Filters & Search -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
-    <form method="GET" action="/tags/<?= $tag['id'] ?>" id="filter-form">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
-                <div class="relative">
-                    <input type="text" name="search" id="domainSearch" value="<?= htmlspecialchars($currentFilters['search']) ?>" placeholder="Search domains..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
-                </div>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="status" id="statusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="">All Statuses</option>
-                    <option value="active" <?= $currentFilters['status'] === 'active' ? 'selected' : '' ?>>Active</option>
-                    <option value="expiring_soon" <?= $currentFilters['status'] === 'expiring_soon' ? 'selected' : '' ?>>Expiring Soon</option>
-                    <option value="expired" <?= $currentFilters['status'] === 'expired' ? 'selected' : '' ?>>Expired</option>
-                    <option value="available" <?= $currentFilters['status'] === 'available' ? 'selected' : '' ?>>Available</option>
-                    <option value="redemption_period" <?= $currentFilters['status'] === 'redemption_period' ? 'selected' : '' ?>>Redemption Period</option>
-                    <option value="pending_delete" <?= $currentFilters['status'] === 'pending_delete' ? 'selected' : '' ?>>Pending Delete</option>
-                    <option value="error" <?= $currentFilters['status'] === 'error' ? 'selected' : '' ?>>Error</option>
-                    <option value="inactive" <?= $currentFilters['status'] === 'inactive' ? 'selected' : '' ?>>Inactive</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Registrar</label>
-                <select name="registrar" id="registrarFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="">All Registrars</option>
-                    <?php 
-                    $registrars = array_unique(array_column($domains, 'registrar'));
-                    $registrars = array_filter($registrars);
-                    foreach ($registrars as $registrar): 
-                    ?>
-                        <option value="<?= htmlspecialchars($registrar) ?>" <?= ($currentFilters['registrar'] ?? '') === $registrar ? 'selected' : '' ?>><?= htmlspecialchars($registrar) ?></option>
-                    <?php endforeach; ?>
-                </select>
-            </div>
-            <div class="flex items-end space-x-2">
-                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                    <i class="fas fa-filter mr-2"></i>
-                    Apply
-                </button>
-                <a href="/tags/<?= $tag['id'] ?>" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
-                    <i class="fas fa-times"></i>
-                    Clear
-                </a>
-            </div>
-        </div>
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-    </form>
-</div>
-
-<!-- Pagination Info & Per Page Selector -->
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?? 1 ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?? count($domains) ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?? count($domains) ?></span> domain(s)
-    </div>
-    
-    <form method="GET" action="/tags/<?= $tag['id'] ?>" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="search" value="<?= htmlspecialchars($currentFilters['search']) ?>">
-        <input type="hidden" name="status" value="<?= htmlspecialchars($currentFilters['status']) ?>">
-        <input type="hidden" name="registrar" value="<?= htmlspecialchars($currentFilters['registrar']) ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= ($pagination['per_page'] ?? 25) == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= ($pagination['per_page'] ?? 25) == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= ($pagination['per_page'] ?? 25) == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= ($pagination['per_page'] ?? 25) == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-
-<!-- Domains List -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <?php if (!empty($domains)): ?>
-        <!-- Table View (Desktop) -->
-        <div class="hidden lg:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('domain_name', $currentFilters['sort'], $currentFilters['order'], $tag['id']) ?>" class="hover:text-primary flex items-center">
-                                Domain <?= sortIcon('domain_name', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('registrar', $currentFilters['sort'], $currentFilters['order'], $tag['id']) ?>" class="hover:text-primary flex items-center">
-                                Registrar <?= sortIcon('registrar', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('expiration_date', $currentFilters['sort'], $currentFilters['order'], $tag['id']) ?>" class="hover:text-primary flex items-center">
-                                Expiration <?= sortIcon('expiration_date', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('status', $currentFilters['sort'], $currentFilters['order'], $tag['id']) ?>" class="hover:text-primary flex items-center">
-                                Status <?= sortIcon('status', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('last_checked', $currentFilters['sort'], $currentFilters['order'], $tag['id']) ?>" class="hover:text-primary flex items-center">
-                                Last Checked <?= sortIcon('last_checked', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($domains as $domain): ?>
-                        <?php
-                        // Display data prepared by DomainHelper in controller
-                        $daysLeft = $domain['daysLeft'];
-                        $expiryClass = $domain['expiryClass'];
-                        $statusClass = $domain['statusClass'];
-                        $statusText = $domain['statusText'];
-                        $statusIcon = $domain['statusIcon'];
-                        ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150">
-                            <td class="px-6 py-4">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-globe text-primary"></i>
-                                    </div>
-                                    <div class="ml-4">
-                                        <a href="/domains/<?= $domain['id'] ?>" class="text-sm font-semibold text-gray-900 hover:text-primary"><?= htmlspecialchars($domain['domain_name']) ?></a>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if (!empty($domain['registrar'])): ?>
-                                    <div class="flex items-center">
-                                        <i class="fas fa-building text-gray-400 mr-2"></i>
-                                        <span class="text-sm text-gray-900"><?= htmlspecialchars($domain['registrar']) ?></span>
-                                    </div>
-                                <?php else: ?>
-                                    <span class="text-sm text-gray-400">Unknown</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if (!empty($domain['expiration_date'])): ?>
-                                    <div class="text-sm">
-                                        <div class="font-medium text-gray-900 flex items-center">
-                                            <?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?>
-                                        </div>
-                                        <div class="text-xs <?= $expiryClass ?>">
-                                            <?= $daysLeft ?> days
-                                        </div>
-                                    </div>
-                                <?php else: ?>
-                                    <span class="text-sm text-gray-400">Not set</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $statusClass ?>">
-                                    <i class="fas <?= $statusIcon ?> mr-1"></i>
-                                    <?= $statusText ?>
-                                </span>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <?php if (!empty($domain['last_checked'])): ?>
-                                    <div class="flex items-center">
-                                        <i class="far fa-clock mr-2"></i>
-                                        <?= date('M d, H:i', strtotime($domain['last_checked'])) ?>
-                                    </div>
-                                <?php else: ?>
-                                    <span class="text-gray-400">Never</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <div class="flex items-center justify-end space-x-2">
-                                    <a href="/domains/<?= $domain['id'] ?>" class="text-blue-600 hover:text-blue-800" title="View">
-                                        <i class="fas fa-eye"></i>
-                                    </a>
-                                    <form method="POST" action="/domains/<?= $domain['id'] ?>/refresh" class="inline">
-                                        <?= csrf_field() ?>
-                                        <button type="submit" class="text-green-600 hover:text-green-800" title="Refresh WHOIS">
-                                            <i class="fas fa-sync-alt"></i>
-                                        </button>
-                                    </form>
-                                    <a href="/domains/<?= $domain['id'] ?>/edit?from=/tags/<?= $tag['id'] ?>" class="text-yellow-600 hover:text-yellow-800" title="Edit">
-                                        <i class="fas fa-edit"></i>
-                                    </a>
-                                </div>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-
-        <!-- Card View (Mobile) -->
-        <div class="lg:hidden divide-y divide-gray-200">
-            <?php foreach ($domains as $domain): ?>
-                <?php
-                // Display data prepared by DomainHelper in controller
-                $daysLeft = $domain['daysLeft'];
-                $expiryClass = $domain['expiryClass'];
-                $statusClass = $domain['statusClass'];
-                $statusText = $domain['statusText'];
-                $statusIcon = $domain['statusIcon'];
-                ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
-                    <div class="flex items-center justify-between mb-3">
-                        <a href="/domains/<?= $domain['id'] ?>" class="text-lg font-semibold text-gray-900 hover:text-primary"><?= htmlspecialchars($domain['domain_name']) ?></a>
-                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $statusClass ?>">
-                            <i class="fas <?= $statusIcon ?> mr-1"></i>
-                            <?= $statusText ?>
-                        </span>
-                    </div>
-                    
-                    <div class="space-y-2 text-sm">
-                        <?php if (!empty($domain['registrar'])): ?>
-                        <div class="flex items-center">
-                            <i class="fas fa-building text-gray-400 mr-2 w-4"></i>
-                            <span><?= htmlspecialchars($domain['registrar']) ?></span>
-                        </div>
-                        <?php endif; ?>
-                        
-                        <?php if (!empty($domain['expiration_date'])): ?>
-                        <div class="flex items-center">
-                            <i class="fas fa-calendar-alt text-gray-400 mr-2 w-4"></i>
-                            <span>Expires: <?= $domain['expiration_date'] ? date('M d, Y', strtotime($domain['expiration_date'])) : 'Unknown' ?> (<?= $daysLeft ?> days)</span>
-                        </div>
-                        <?php endif; ?>
-                        
-                        <div class="flex items-center">
-                            <i class="far fa-clock text-gray-400 mr-2 w-4"></i>
-                            <span><?= $domain['last_checked'] ? date('M d, H:i', strtotime($domain['last_checked'])) : 'Never checked' ?></span>
-                        </div>
-                    </div>
-                    
-                    <div class="flex space-x-2 mt-3">
-                        <a href="/domains/<?= $domain['id'] ?>" class="flex-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded text-center text-sm hover:bg-blue-100 transition-colors">
-                            <i class="fas fa-eye mr-1"></i> View
-                        </a>
-                        <form method="POST" action="/domains/<?= $domain['id'] ?>/refresh" class="flex-1">
-                            <?= csrf_field() ?>
-                            <button type="submit" class="w-full px-3 py-1.5 bg-green-50 text-green-600 rounded text-center text-sm hover:bg-green-100 transition-colors">
-                                <i class="fas fa-sync-alt mr-1"></i> Refresh
-                            </button>
-                        </form>
-                    </div>
-                </div>
-            <?php endforeach; ?>
-        </div>
-    <?php else: ?>
-        <div class="text-center py-12 px-6">
-            <div class="mb-4">
-                <i class="fas fa-globe text-gray-300 text-6xl"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Domains Found</h3>
-            <p class="text-sm text-gray-500 mb-4">This tag is not currently assigned to any domains</p>
-            <a href="/domains" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-                <i class="fas fa-plus mr-2"></i>
-                <span>Add Domains</span>
-            </a>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Pagination Controls -->
-<?php if (($pagination['total_pages'] ?? 1) > 1): ?>
-<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?? 1 ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?? 1 ?></span>
-    </div>
-    
-    <!-- Pagination Buttons -->
-    <div class="flex items-center gap-1">
-        <?php
-        $currentPage = $pagination['current_page'] ?? 1;
-        $totalPages = $pagination['total_pages'] ?? 1;
-        
-        // Helper function to build pagination URL
-        function paginationUrl($page, $filters, $perPage, $tagId) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/tags/' . $tagId . '?' . http_build_query($params);
-        }
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-left"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-left"></i> Previous
-            </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2; // Show 2 pages on each side of current page
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        // Show first page + ellipsis if needed
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        // Page numbers
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        // Show last page + ellipsis if needed
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                Next <i class="fas fa-angle-right"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $currentFilters ?? [], $pagination['per_page'] ?? 25, $tag['id']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-right"></i>
-            </a>
-        <?php endif; ?>
-    </div>
-</div>
-<?php endif; ?>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
diff --git a/app/Views/tags/view.twig b/app/Views/tags/view.twig
new file mode 100644
index 0000000..73030f1
--- /dev/null
+++ b/app/Views/tags/view.twig
@@ -0,0 +1,351 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'Tag: ' ~ tag.name %}
+{% set pageTitle = 'Tag: ' ~ tag.name %}
+{% set pageDescription = 'View all domains that have this tag assigned' %}
+{% set pageIcon = 'fas fa-tag' %}
+
+{% set currentFilters = filters|default({ search: '', status: '', registrar: '', sort: 'domain_name', order: 'asc' }) %}
+
+{# Build unique registrar list for the filter dropdown #}
+{% set registrarList = [] %}
+{% for domain in domains %}
+    {% if domain.registrar is not empty and domain.registrar not in registrarList %}
+        {% set registrarList = registrarList|merge([domain.registrar]) %}
+    {% endif %}
+{% endfor %}
+
+{% block content %}
+{# Back Navigation #}
+<div class="mb-4">
+    <a href="/tags" class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
+        <i class="fas fa-arrow-left mr-2"></i>
+        Back to Tags
+    </a>
+</div>
+
+{# Tag Info Card #}
+<div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4 mb-4">
+    <div class="flex items-start">
+        <div class="flex-shrink-0">
+            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium border {{ tag.color }}">
+                <i class="fas fa-tag mr-1"></i>
+                {{ tag.name }}
+            </span>
+        </div>
+        <div class="ml-3">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Tag Description</h3>
+            <p class="text-xs text-gray-600 dark:text-slate-400 leading-relaxed">
+                {% if tag.description is not empty %}
+                    {{ tag.description }}
+                {% endif %}
+            </p>
+        </div>
+    </div>
+</div>
+
+{# Filters & Search #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
+    <form method="GET" action="/tags/{{ tag.id }}" id="filter-form">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search</label>
+                <div class="relative">
+                    <input type="text" name="search" id="domainSearch" value="{{ currentFilters.search }}" placeholder="Search domains..." class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
+                </div>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="status" id="statusFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <option value="">All Statuses</option>
+                    <option value="active" {{ currentFilters.status == 'active' ? 'selected' : '' }}>Active</option>
+                    <option value="expiring_soon" {{ currentFilters.status == 'expiring_soon' ? 'selected' : '' }}>Expiring Soon</option>
+                    <option value="expired" {{ currentFilters.status == 'expired' ? 'selected' : '' }}>Expired</option>
+                    <option value="available" {{ currentFilters.status == 'available' ? 'selected' : '' }}>Available</option>
+                    <option value="redemption_period" {{ currentFilters.status == 'redemption_period' ? 'selected' : '' }}>Redemption Period</option>
+                    <option value="pending_delete" {{ currentFilters.status == 'pending_delete' ? 'selected' : '' }}>Pending Delete</option>
+                    <option value="error" {{ currentFilters.status == 'error' ? 'selected' : '' }}>Error</option>
+                    <option value="inactive" {{ currentFilters.status == 'inactive' ? 'selected' : '' }}>Inactive</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Registrar</label>
+                <select name="registrar" id="registrarFilter" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    <option value="">All Registrars</option>
+                    {% for registrar in registrarList %}
+                        <option value="{{ registrar }}" {{ (currentFilters.registrar|default('')) == registrar ? 'selected' : '' }}>{{ registrar }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="flex items-end space-x-2">
+                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                    <i class="fas fa-filter mr-2"></i>
+                    Apply
+                </button>
+                <a href="/tags/{{ tag.id }}" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-times"></i>
+                    Clear
+                </a>
+            </div>
+        </div>
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+    </form>
+</div>
+
+{# Pagination Info & Per Page Selector #}
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from|default(1) }}</span> to
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to|default(domains|length) }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total|default(domains|length) }}</span> domain(s)
+    </div>
+
+    <form method="GET" action="/tags/{{ tag.id }}" class="flex items-center gap-2">
+        <input type="hidden" name="search" value="{{ currentFilters.search }}">
+        <input type="hidden" name="status" value="{{ currentFilters.status }}">
+        <input type="hidden" name="registrar" value="{{ currentFilters.registrar }}">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+            <option value="10" {{ (pagination.per_page|default(25)) == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ (pagination.per_page|default(25)) == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ (pagination.per_page|default(25)) == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ (pagination.per_page|default(25)) == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+
+{# Domains List #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {% if domains is not empty %}
+        {# Table View (Desktop) #}
+        <div class="hidden lg:block overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('domain_name', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Domain {{ sort_icon('domain_name', currentFilters.sort, currentFilters.order) }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('registrar', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Registrar {{ sort_icon('registrar', currentFilters.sort, currentFilters.order) }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('expiration_date', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Expiration {{ sort_icon('expiration_date', currentFilters.sort, currentFilters.order) }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('status', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Status {{ sort_icon('status', currentFilters.sort, currentFilters.order) }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('last_checked', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Last Checked {{ sort_icon('last_checked', currentFilters.sort, currentFilters.order) }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for domain in domains %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                            <td class="px-6 py-4">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
+                                        <i class="fas fa-globe text-primary"></i>
+                                    </div>
+                                    <div class="ml-4">
+                                        <a href="/domains/{{ domain.id }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-primary">{{ domain.domain_name }}</a>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if domain.registrar is not empty %}
+                                    <div class="flex items-center">
+                                        <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2"></i>
+                                        <span class="text-sm text-gray-900 dark:text-white">{{ domain.registrar }}</span>
+                                    </div>
+                                {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">Unknown</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if domain.expiration_date is not empty %}
+                                    <div class="text-sm">
+                                        <div class="font-medium text-gray-900 dark:text-white flex items-center">
+                                            {{ domain.expiration_date|date('M d, Y') }}
+                                        </div>
+                                        <div class="text-xs {{ domain.expiryClass }}">
+                                            {{ domain.daysLeft }} days
+                                        </div>
+                                    </div>
+                                {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">Not set</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ domain.statusClass }}">
+                                    <i class="fas {{ domain.statusIcon }} mr-1"></i>
+                                    {{ domain.statusText }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                {% if domain.last_checked is not empty %}
+                                    <div class="flex items-center">
+                                        <i class="far fa-clock mr-2"></i>
+                                        {{ domain.last_checked|date('M d, H:i') }}
+                                    </div>
+                                {% else %}
+                                    <span class="text-gray-400 dark:text-slate-500">Never</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <div class="flex items-center justify-end space-x-2">
+                                    <a href="/domains/{{ domain.id }}" class="text-blue-600 hover:text-blue-800" title="View">
+                                        <i class="fas fa-eye"></i>
+                                    </a>
+                                    <form method="POST" action="/domains/{{ domain.id }}/refresh" class="inline">
+                                        {{ csrf_field() }}
+                                        <button type="submit" class="text-green-600 hover:text-green-800" title="Refresh WHOIS">
+                                            <i class="fas fa-sync-alt"></i>
+                                        </button>
+                                    </form>
+                                    <a href="/domains/{{ domain.id }}/edit?from=/tags/{{ tag.id }}" class="text-yellow-600 hover:text-yellow-800" title="Edit">
+                                        <i class="fas fa-edit"></i>
+                                    </a>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        {# Card View (Mobile) #}
+        <div class="lg:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for domain in domains %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                    <div class="flex items-center justify-between mb-3">
+                        <a href="/domains/{{ domain.id }}" class="text-lg font-semibold text-gray-900 dark:text-white hover:text-primary">{{ domain.domain_name }}</a>
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ domain.statusClass }}">
+                            <i class="fas {{ domain.statusIcon }} mr-1"></i>
+                            {{ domain.statusText }}
+                        </span>
+                    </div>
+
+                    <div class="space-y-2 text-sm">
+                        {% if domain.registrar is not empty %}
+                        <div class="flex items-center">
+                            <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2 w-4"></i>
+                            <span class="text-gray-700 dark:text-slate-300">{{ domain.registrar }}</span>
+                        </div>
+                        {% endif %}
+
+                        {% if domain.expiration_date is not empty %}
+                        <div class="flex items-center">
+                            <i class="fas fa-calendar-alt text-gray-400 dark:text-slate-500 mr-2 w-4"></i>
+                            <span class="text-gray-700 dark:text-slate-300">Expires: {{ domain.expiration_date|date('M d, Y') }} ({{ domain.daysLeft }} days)</span>
+                        </div>
+                        {% endif %}
+
+                        <div class="flex items-center">
+                            <i class="far fa-clock text-gray-400 dark:text-slate-500 mr-2 w-4"></i>
+                            <span class="text-gray-700 dark:text-slate-300">{{ domain.last_checked ? domain.last_checked|date('M d, H:i') : 'Never checked' }}</span>
+                        </div>
+                    </div>
+
+                    <div class="flex space-x-2 mt-3">
+                        <a href="/domains/{{ domain.id }}" class="flex-1 px-3 py-1.5 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded text-center text-sm hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
+                            <i class="fas fa-eye mr-1"></i> View
+                        </a>
+                        <form method="POST" action="/domains/{{ domain.id }}/refresh" class="flex-1">
+                            {{ csrf_field() }}
+                            <button type="submit" class="w-full px-3 py-1.5 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded text-center text-sm hover:bg-green-100 dark:hover:bg-green-500/20 transition-colors">
+                                <i class="fas fa-sync-alt mr-1"></i> Refresh
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="text-center py-12 px-6">
+            <div class="mb-4">
+                <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-6xl"></i>
+            </div>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Domains Found</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">This tag is not currently assigned to any domains</p>
+            <a href="/domains" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+                <i class="fas fa-plus mr-2"></i>
+                <span>Add Domains</span>
+            </a>
+        </div>
+    {% endif %}
+</div>
+
+{# Pagination Controls #}
+{% if (pagination.total_pages|default(1)) > 1 %}
+{% set currentPage = pagination.current_page|default(1) %}
+{% set totalPages = pagination.total_pages|default(1) %}
+{% set paginationRange = 2 %}
+{% set startPage = max(1, currentPage - paginationRange) %}
+{% set endPage = min(totalPages, currentPage + paginationRange) %}
+<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ currentPage }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ totalPages }}</span>
+    </div>
+
+    <div class="flex items-center gap-1">
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-left"></i>
+            </a>
+            <a href="{{ pagination_url(currentPage - 1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-left"></i> Previous
+            </a>
+        {% endif %}
+
+        {% if startPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if startPage > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+
+        {% for i in startPage..endPage %}
+            {% if i == currentPage %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if endPage < totalPages %}
+            {% if endPage < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(currentPage + 1, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                Next <i class="fas fa-angle-right"></i>
+            </a>
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page|default(25)) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+{% endblock %}
diff --git a/app/Views/tld-registry/import-logs.php b/app/Views/tld-registry/import-logs.php
deleted file mode 100644
index 88f453e..0000000
--- a/app/Views/tld-registry/import-logs.php
+++ /dev/null
@@ -1,562 +0,0 @@
-<?php
-$title = 'TLD Import Logs';
-$pageTitle = 'TLD Import Logs';
-$pageDescription = 'History of TLD registry import operations';
-$pageIcon = 'fas fa-history';
-ob_start();
-?>
-
-<!-- Header with Actions -->
-<div class="mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-    <div>
-        <h1 class="text-2xl font-bold text-gray-900">Import Logs</h1>
-        <p class="text-gray-600 mt-1">History of TLD registry import operations</p>
-    </div>
-    <div class="flex gap-2">
-        <a href="/tld-registry" class="inline-flex items-center px-4 py-2.5 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
-            <i class="fas fa-arrow-left mr-2"></i>
-            Back to Registry
-        </a>
-    </div>
-</div>
-
-<!-- Statistics Cards -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-    <!-- Total Imports Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Imports</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $importStats['total_imports'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-download text-blue-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Successful Imports Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Successful</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $importStats['successful_imports'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-check-circle text-green-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Failed Imports Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Failed</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $importStats['failed_imports'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-times-circle text-red-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Last Import Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Last Import</p>
-                <p class="text-sm font-semibold text-gray-900 mt-1">
-                    <?php if (!empty($importStats['last_import'])): ?>
-                        <?= date('M j, H:i', strtotime($importStats['last_import'])) ?>
-                    <?php else: ?>
-                        Never
-                    <?php endif; ?>
-                </p>
-            </div>
-            <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-clock text-indigo-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Import Logs Table -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <?php if (!empty($imports)): ?>
-        <!-- Table View (Desktop) -->
-        <div class="hidden lg:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Import Type</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Results</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Publication Date</th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Started</th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($imports as $import): ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150" 
-                            data-import-id="<?= $import['id'] ?>" 
-                            data-import-data="<?= htmlspecialchars(json_encode($import)) ?>">
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <div class="flex items-center">
-                                    <?php
-                                    $typeIcons = [
-                                        'tld_list' => 'fa-list',
-                                        'rdap' => 'fa-database',
-                                        'whois' => 'fa-server',
-                                        'complete_workflow' => 'fa-tasks',
-                                        'check_updates' => 'fa-sync-alt',
-                                        'manual' => 'fa-hand-pointer'
-                                    ];
-                                    $typeLabels = [
-                                        'tld_list' => 'TLD List',
-                                        'rdap' => 'RDAP Servers',
-                                        'whois' => 'WHOIS Data',
-                                        'complete_workflow' => 'Complete Workflow',
-                                        'check_updates' => 'Update Check',
-                                        'manual' => 'Manual Import'
-                                    ];
-                                    $typeDescriptions = [
-                                        'tld_list' => 'IANA TLD list import',
-                                        'rdap' => 'RDAP server bootstrap data',
-                                        'whois' => 'WHOIS server & registry URLs',
-                                        'complete_workflow' => 'Full import (TLD List → RDAP → WHOIS)',
-                                        'check_updates' => 'IANA update verification',
-                                        'manual' => 'Manual data import'
-                                    ];
-                                    
-                                    $icon = $typeIcons[$import['import_type']] ?? 'fa-file-import';
-                                    $label = $typeLabels[$import['import_type']] ?? ucfirst($import['import_type']);
-                                    $description = $typeDescriptions[$import['import_type']] ?? 'Import operation';
-                                    ?>
-                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
-                                        <i class="fas <?= $icon ?> text-primary"></i>
-                                    </div>
-                                    <div class="ml-4">
-                                        <div class="text-sm font-semibold text-gray-900"><?= $label ?></div>
-                                        <div class="text-sm text-gray-500"><?= $description ?></div>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <?php
-                                $statusClass = '';
-                                $statusIcon = '';
-                                $statusText = '';
-                                
-                                if ($import['status'] === 'completed') {
-                                    $statusClass = 'bg-green-100 text-green-700 border-green-200';
-                                    $statusIcon = 'fa-check-circle';
-                                    $statusText = 'Completed';
-                                } elseif ($import['status'] === 'failed') {
-                                    $statusClass = 'bg-red-100 text-red-700 border-red-200';
-                                    $statusIcon = 'fa-times-circle';
-                                    $statusText = 'Failed';
-                                } else {
-                                    $statusClass = 'bg-yellow-100 text-yellow-700 border-yellow-200';
-                                    $statusIcon = 'fa-clock';
-                                    $statusText = 'In Progress';
-                                }
-                                ?>
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $statusClass ?>">
-                                    <i class="fas <?= $statusIcon ?> mr-1"></i>
-                                    <?= $statusText ?>
-                                </span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">
-                                    <div class="flex items-center space-x-4">
-                                        <span class="flex items-center">
-                                            <i class="fas fa-globe text-gray-400 mr-1"></i>
-                                            <?= $import['total_tlds'] ?> total
-                                        </span>
-                                        <span class="flex items-center text-green-600">
-                                            <i class="fas fa-plus mr-1"></i>
-                                            <?= $import['new_tlds'] ?> new
-                                        </span>
-                                        <span class="flex items-center text-blue-600">
-                                            <i class="fas fa-sync mr-1"></i>
-                                            <?= $import['updated_tlds'] ?> updated
-                                        </span>
-                                        <?php if ($import['failed_tlds'] > 0): ?>
-                                        <span class="flex items-center text-red-600">
-                                            <i class="fas fa-exclamation-triangle mr-1"></i>
-                                            <?= $import['failed_tlds'] ?> failed
-                                        </span>
-                                        <?php endif; ?>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <?php if ($import['iana_publication_date']): ?>
-                                <div class="flex items-center">
-                                    <i class="far fa-calendar mr-2"></i>
-                                    <?php 
-                                    $date = $import['iana_publication_date'];
-                                    // Try to parse the date, if it fails, display as-is
-                                    $parsedDate = strtotime($date);
-                                    if ($parsedDate && $parsedDate > 0) {
-                                        echo date('M j, Y', $parsedDate);
-                                    } else {
-                                        echo htmlspecialchars($date);
-                                    }
-                                    ?>
-                                </div>
-                                <?php else: ?>
-                                <span class="text-gray-400">N/A</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <div class="flex items-center">
-                                    <i class="far fa-clock mr-2"></i>
-                                    <?= date('M j, H:i', strtotime($import['started_at'])) ?>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <button onclick="showImportDetails(<?= $import['id'] ?>)" class="text-primary hover:text-primary-dark">
-                                    <i class="fas fa-eye"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-
-        <!-- Card View (Mobile) -->
-        <div class="lg:hidden divide-y divide-gray-200">
-            <?php foreach ($imports as $import): ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150" 
-                     data-import-id="<?= $import['id'] ?>" 
-                     data-import-data="<?= htmlspecialchars(json_encode($import)) ?>">
-                    <div class="flex items-center justify-between mb-3">
-                        <div class="flex items-center">
-                            <?php
-                            $typeIcons = [
-                                'tld_list' => 'fa-list',
-                                'rdap' => 'fa-database',
-                                'whois' => 'fa-server',
-                                'complete_workflow' => 'fa-tasks',
-                                'check_updates' => 'fa-sync-alt',
-                                'manual' => 'fa-hand-pointer'
-                            ];
-                            $typeLabels = [
-                                'tld_list' => 'TLD List',
-                                'rdap' => 'RDAP Servers',
-                                'whois' => 'WHOIS Data',
-                                'complete_workflow' => 'Complete Workflow',
-                                'check_updates' => 'Update Check',
-                                'manual' => 'Manual Import'
-                            ];
-                            
-                            $icon = $typeIcons[$import['import_type']] ?? 'fa-file-import';
-                            $label = $typeLabels[$import['import_type']] ?? ucfirst($import['import_type']);
-                            ?>
-                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-3">
-                                <i class="fas <?= $icon ?> text-primary"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-900"><?= $label ?></h3>
-                                <p class="text-sm text-gray-500"><?= date('M j, Y H:i', strtotime($import['started_at'])) ?></p>
-                            </div>
-                        </div>
-                        <?php
-                        $statusClass = '';
-                        $statusIcon = '';
-                        $statusText = '';
-                        
-                        if ($import['status'] === 'completed') {
-                            $statusClass = 'bg-green-100 text-green-700';
-                            $statusIcon = 'fa-check-circle';
-                            $statusText = 'Completed';
-                        } elseif ($import['status'] === 'failed') {
-                            $statusClass = 'bg-red-100 text-red-700';
-                            $statusIcon = 'fa-times-circle';
-                            $statusText = 'Failed';
-                        } else {
-                            $statusClass = 'bg-yellow-100 text-yellow-700';
-                            $statusIcon = 'fa-clock';
-                            $statusText = 'In Progress';
-                        }
-                        ?>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold <?= $statusClass ?>">
-                            <i class="fas <?= $statusIcon ?> mr-1"></i>
-                            <?= $statusText ?>
-                        </span>
-                    </div>
-                    
-                    <div class="space-y-2 text-sm">
-                        <div class="flex items-center justify-between">
-                            <span class="text-gray-600">Total TLDs:</span>
-                            <span class="font-semibold"><?= $import['total_tlds'] ?></span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <span class="text-gray-600">New:</span>
-                            <span class="font-semibold text-green-600"><?= $import['new_tlds'] ?></span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <span class="text-gray-600">Updated:</span>
-                            <span class="font-semibold text-blue-600"><?= $import['updated_tlds'] ?></span>
-                        </div>
-                        <?php if ($import['failed_tlds'] > 0): ?>
-                        <div class="flex items-center justify-between">
-                            <span class="text-gray-600">Failed:</span>
-                            <span class="font-semibold text-red-600"><?= $import['failed_tlds'] ?></span>
-                        </div>
-                        <?php endif; ?>
-                    </div>
-                    
-                    <div class="flex space-x-2 mt-3">
-                        <button onclick="showImportDetails(<?= $import['id'] ?>)" class="flex-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded text-center text-sm hover:bg-blue-100 transition-colors">
-                            <i class="fas fa-eye mr-1"></i> Details
-                        </button>
-                    </div>
-                </div>
-            <?php endforeach; ?>
-        </div>
-
-        <!-- Pagination -->
-        <?php if ($pagination['total_pages'] > 1): ?>
-        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-            <div class="flex-1 flex justify-between sm:hidden">
-                <?php if ($pagination['current_page'] > 1): ?>
-                <a href="?page=<?= $pagination['current_page'] - 1 ?>" 
-                   class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-                    Previous
-                </a>
-                <?php endif; ?>
-                
-                <?php if ($pagination['current_page'] < $pagination['total_pages']): ?>
-                <a href="?page=<?= $pagination['current_page'] + 1 ?>" 
-                   class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-                    Next
-                </a>
-                <?php endif; ?>
-            </div>
-            
-            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-                <div>
-                    <p class="text-sm text-gray-700">
-                        Showing <span class="font-medium"><?= $pagination['showing_from'] ?></span> to 
-                        <span class="font-medium"><?= $pagination['showing_to'] ?></span> of 
-                        <span class="font-medium"><?= $pagination['total'] ?></span> results
-                    </p>
-                </div>
-                <div>
-                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                        <?php for ($i = 1; $i <= $pagination['total_pages']; $i++): ?>
-                        <a href="?page=<?= $i ?>" 
-                           class="relative inline-flex items-center px-4 py-2 border text-sm font-medium <?= $i === $pagination['current_page'] ? 'z-10 bg-primary border-primary text-white' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50' ?> <?= $i === 1 ? 'rounded-l-md' : '' ?> <?= $i === $pagination['total_pages'] ? 'rounded-r-md' : '' ?>">
-                            <?= $i ?>
-                        </a>
-                        <?php endfor; ?>
-                    </nav>
-                </div>
-            </div>
-        </div>
-        <?php endif; ?>
-    <?php else: ?>
-        <div class="text-center py-12 px-6">
-            <div class="mb-4">
-                <i class="fas fa-history text-gray-300 text-6xl"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Import Logs</h3>
-            <p class="text-sm text-gray-500 mb-4">No TLD imports have been performed yet.</p>
-            <a href="/tld-registry" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-                <i class="fas fa-arrow-left mr-2"></i>
-                Back to Registry
-            </a>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Import Details Modal -->
-<div id="importDetailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
-    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
-        <div class="mt-3">
-            <div class="flex items-center justify-between mb-4">
-                <h3 class="text-lg font-semibold text-gray-900">Import Details</h3>
-                <button onclick="closeImportDetails()" class="text-gray-400 hover:text-gray-600">
-                    <i class="fas fa-times text-xl"></i>
-                </button>
-            </div>
-            <div id="importDetailsContent" class="text-sm text-gray-600">
-                <!-- Content will be loaded here -->
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-function showImportDetails(importId) {
-    // Find the import data from the current page
-    const importData = findImportData(importId);
-    
-    if (!importData) {
-        document.getElementById('importDetailsContent').innerHTML = `
-            <div class="text-center text-gray-500">
-                <p>Import details not found</p>
-            </div>
-        `;
-        document.getElementById('importDetailsModal').classList.remove('hidden');
-        return;
-    }
-    
-    // Type labels mapping
-    const typeLabels = {
-        'tld_list': 'TLD List',
-        'rdap': 'RDAP Servers',
-        'whois': 'WHOIS Data',
-        'complete_workflow': 'Complete Workflow',
-        'check_updates': 'Update Check',
-        'manual': 'Manual Import'
-    };
-    
-    const typeDescriptions = {
-        'tld_list': 'IANA TLD list import',
-        'rdap': 'RDAP server bootstrap data',
-        'whois': 'WHOIS server & registry URLs',
-        'complete_workflow': 'Full import (TLD List → RDAP → WHOIS)',
-        'check_updates': 'IANA update verification',
-        'manual': 'Manual data import'
-    };
-    
-    const typeLabel = typeLabels[importData.import_type] || importData.import_type;
-    const typeDescription = typeDescriptions[importData.import_type] || 'Import operation';
-    
-    // Calculate duration if we have both start and completion times
-    let duration = 'Unknown';
-    if (importData.started_at && importData.completed_at) {
-        const start = new Date(importData.started_at);
-        const end = new Date(importData.completed_at);
-        const diffMs = end - start;
-        const minutes = Math.floor(diffMs / 60000);
-        const seconds = Math.floor((diffMs % 60000) / 1000);
-        
-        // If duration is very short (< 5 seconds), it might be manually completed
-        // Try to estimate from the log if it's a complete workflow
-        if (diffMs < 5000 && importData.import_type === 'complete_workflow') {
-            // Estimate: ~1 second per TLD for complete workflow
-            const estimatedSeconds = Math.round((importData.total_tlds || 0) * 1.1);
-            const estMinutes = Math.floor(estimatedSeconds / 60);
-            const estSeconds = estimatedSeconds % 60;
-            duration = `~${estMinutes} minutes ${estSeconds} seconds (estimated)`;
-        } else if (minutes === 0 && seconds === 0) {
-            duration = 'Less than 1 second';
-        } else {
-            duration = `${minutes} minutes ${seconds} seconds`;
-        }
-    }
-    
-    // Determine status color
-    let statusClass = 'bg-gray-100 text-gray-800';
-    let statusText = 'Unknown';
-    if (importData.status === 'completed') {
-        statusClass = 'bg-green-100 text-green-800';
-        statusText = 'Completed';
-    } else if (importData.status === 'failed') {
-        statusClass = 'bg-red-100 text-red-800';
-        statusText = 'Failed';
-    } else if (importData.status === 'running') {
-        statusClass = 'bg-yellow-100 text-yellow-800';
-        statusText = 'Running';
-    }
-    
-    document.getElementById('importDetailsContent').innerHTML = `
-        <div class="space-y-3">
-            <div class="flex justify-between">
-                <span class="font-medium">Import ID:</span>
-                <span>${importData.id}</span>
-            </div>
-            <div class="flex justify-between">
-                <span class="font-medium">Type:</span>
-                <span>${typeLabel}</span>
-            </div>
-            <div class="flex justify-between">
-                <span class="font-medium">Description:</span>
-                <span class="text-gray-600">${typeDescription}</span>
-            </div>
-            <div class="flex justify-between">
-                <span class="font-medium">Status:</span>
-                <span class="px-2 py-1 rounded text-xs ${statusClass}">${statusText}</span>
-            </div>
-            <div class="flex justify-between">
-                <span class="font-medium">Duration:</span>
-                <span>${duration}</span>
-            </div>
-            <div class="flex justify-between">
-                <span class="font-medium">Started:</span>
-                <span>${new Date(importData.started_at).toLocaleString()}</span>
-            </div>
-            ${importData.completed_at ? `
-            <div class="flex justify-between">
-                <span class="font-medium">Completed:</span>
-                <span>${new Date(importData.completed_at).toLocaleString()}</span>
-            </div>
-            ` : ''}
-            ${importData.iana_publication_date ? `
-            <div class="flex justify-between">
-                <span class="font-medium">IANA Publication:</span>
-                <span>${importData.iana_publication_date}</span>
-            </div>
-            ` : ''}
-            <div class="mt-4">
-                <h4 class="font-medium mb-2">Import Results:</h4>
-                <div class="bg-gray-100 p-3 rounded text-xs font-mono space-y-1">
-                    <div>Total TLDs: ${importData.total_tlds || 0}</div>
-                    <div>New TLDs: ${importData.new_tlds || 0}</div>
-                    <div>Updated TLDs: ${importData.updated_tlds || 0}</div>
-                    <div>Failed TLDs: ${importData.failed_tlds || 0}</div>
-                    ${importData.error_message ? `
-                    <div class="text-red-600 mt-2">
-                        <strong>Error:</strong> ${importData.error_message}
-                    </div>
-                    ` : ''}
-                </div>
-            </div>
-        </div>
-    `;
-    document.getElementById('importDetailsModal').classList.remove('hidden');
-}
-
-function findImportData(importId) {
-    // Look for import data in the current page
-    const importRows = document.querySelectorAll('tr[data-import-id]');
-    for (let row of importRows) {
-        if (row.getAttribute('data-import-id') == importId) {
-            return JSON.parse(row.getAttribute('data-import-data'));
-        }
-    }
-    
-    // Fallback: look for data in mobile view
-    const importCards = document.querySelectorAll('[data-import-id]');
-    for (let card of importCards) {
-        if (card.getAttribute('data-import-id') == importId) {
-            return JSON.parse(card.getAttribute('data-import-data'));
-        }
-    }
-    
-    return null;
-}
-
-function closeImportDetails() {
-    document.getElementById('importDetailsModal').classList.add('hidden');
-}
-
-// Close modal when clicking outside
-document.getElementById('importDetailsModal').addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeImportDetails();
-    }
-});
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
\ No newline at end of file
diff --git a/app/Views/tld-registry/import-logs.twig b/app/Views/tld-registry/import-logs.twig
new file mode 100644
index 0000000..a2efe74
--- /dev/null
+++ b/app/Views/tld-registry/import-logs.twig
@@ -0,0 +1,506 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'TLD Import Logs' %}
+{% set pageTitle = 'TLD Import Logs' %}
+{% set pageDescription = 'History of TLD registry import operations' %}
+{% set pageIcon = 'fas fa-history' %}
+
+{% block content %}
+
+{# Header with Actions #}
+<div class="mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+    <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Import Logs</h1>
+        <p class="text-gray-600 dark:text-slate-400 mt-1">History of TLD registry import operations</p>
+    </div>
+    <div class="flex gap-2">
+        <a href="/tld-registry" class="inline-flex items-center px-4 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
+            <i class="fas fa-arrow-left mr-2"></i>
+            Back to Registry
+        </a>
+    </div>
+</div>
+
+{# Statistics Cards #}
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    {# Total Imports Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Total Imports</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ importStats.total_imports|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-download text-blue-600 dark:text-blue-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# Successful Imports Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Successful</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ importStats.successful_imports|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-green-50 dark:bg-green-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# Failed Imports Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Failed</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ importStats.failed_imports|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-red-50 dark:bg-red-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-times-circle text-red-600 dark:text-red-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# Last Import Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Last Import</p>
+                <p class="text-sm font-semibold text-gray-900 dark:text-white mt-1">
+                    {% if importStats.last_import is not empty %}
+                        {{ importStats.last_import|date('M j, H:i') }}
+                    {% else %}
+                        Never
+                    {% endif %}
+                </p>
+            </div>
+            <div class="w-12 h-12 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-clock text-indigo-600 dark:text-indigo-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# Import Logs Table #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {% if imports is not empty %}
+        {# Table View (Desktop) #}
+        <div class="hidden lg:block overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Import Type</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Status</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Results</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Publication Date</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Started</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% set typeIcons = {
+                        tld_list: 'fa-list',
+                        rdap: 'fa-database',
+                        whois: 'fa-server',
+                        complete_workflow: 'fa-tasks',
+                        check_updates: 'fa-sync-alt',
+                        manual: 'fa-hand-pointer'
+                    } %}
+                    {% set typeLabels = {
+                        tld_list: 'TLD List',
+                        rdap: 'RDAP Servers',
+                        whois: 'WHOIS Data',
+                        complete_workflow: 'Complete Workflow',
+                        check_updates: 'Update Check',
+                        manual: 'Manual Import'
+                    } %}
+                    {% set typeDescriptions = {
+                        tld_list: 'IANA TLD list import',
+                        rdap: 'RDAP server bootstrap data',
+                        whois: 'WHOIS server & registry URLs',
+                        complete_workflow: 'Full import (TLD List → RDAP → WHOIS)',
+                        check_updates: 'IANA update verification',
+                        manual: 'Manual data import'
+                    } %}
+                    {% for import in imports %}
+                        {% set icon = typeIcons[import.import_type]|default('fa-file-import') %}
+                        {% set label = typeLabels[import.import_type]|default(import.import_type|capitalize) %}
+                        {% set description = typeDescriptions[import.import_type]|default('Import operation') %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150"
+                            data-import-id="{{ import.id }}"
+                            data-import-data="{{ import|json_encode|e('html_attr') }}">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
+                                        <i class="fas {{ icon }} text-primary"></i>
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ label }}</div>
+                                        <div class="text-sm text-gray-500 dark:text-slate-400">{{ description }}</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if import.status == 'completed' %}
+                                    {% set statusClass = 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-500/30' %}
+                                    {% set statusIcon = 'fa-check-circle' %}
+                                    {% set statusText = 'Completed' %}
+                                {% elseif import.status == 'failed' %}
+                                    {% set statusClass = 'bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400 border-red-200 dark:border-red-500/30' %}
+                                    {% set statusIcon = 'fa-times-circle' %}
+                                    {% set statusText = 'Failed' %}
+                                {% else %}
+                                    {% set statusClass = 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-500/30' %}
+                                    {% set statusIcon = 'fa-clock' %}
+                                    {% set statusText = 'In Progress' %}
+                                {% endif %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ statusClass }}">
+                                    <i class="fas {{ statusIcon }} mr-1"></i>
+                                    {{ statusText }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4">
+                                <div class="text-sm text-gray-900 dark:text-white">
+                                    <div class="flex items-center space-x-4">
+                                        <span class="flex items-center">
+                                            <i class="fas fa-globe text-gray-400 dark:text-slate-500 mr-1"></i>
+                                            {{ import.total_tlds }} total
+                                        </span>
+                                        <span class="flex items-center text-green-600 dark:text-green-400">
+                                            <i class="fas fa-plus mr-1"></i>
+                                            {{ import.new_tlds }} new
+                                        </span>
+                                        <span class="flex items-center text-blue-600 dark:text-blue-400">
+                                            <i class="fas fa-sync mr-1"></i>
+                                            {{ import.updated_tlds }} updated
+                                        </span>
+                                        {% if import.failed_tlds > 0 %}
+                                        <span class="flex items-center text-red-600 dark:text-red-400">
+                                            <i class="fas fa-exclamation-triangle mr-1"></i>
+                                            {{ import.failed_tlds }} failed
+                                        </span>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                {% if import.iana_publication_date %}
+                                <div class="flex items-center">
+                                    <i class="far fa-calendar mr-2"></i>
+                                    {{ import.iana_publication_date|date('M j, Y') }}
+                                </div>
+                                {% else %}
+                                <span class="text-gray-400 dark:text-slate-500">N/A</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                <div class="flex items-center">
+                                    <i class="far fa-clock mr-2"></i>
+                                    {{ import.started_at|date('M j, H:i') }}
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <button onclick="showImportDetails({{ import.id }})" class="text-primary hover:text-primary-dark">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        {# Card View (Mobile) #}
+        <div class="lg:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for import in imports %}
+                {% set icon = typeIcons[import.import_type]|default('fa-file-import') %}
+                {% set label = typeLabels[import.import_type]|default(import.import_type|capitalize) %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150"
+                     data-import-id="{{ import.id }}"
+                     data-import-data="{{ import|json_encode|e('html_attr') }}">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-3">
+                                <i class="fas {{ icon }} text-primary"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold text-gray-900 dark:text-white">{{ label }}</h3>
+                                <p class="text-sm text-gray-500 dark:text-slate-400">{{ import.started_at|date('M j, Y H:i') }}</p>
+                            </div>
+                        </div>
+                        {% if import.status == 'completed' %}
+                            {% set mobileStatusClass = 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400' %}
+                            {% set mobileStatusIcon = 'fa-check-circle' %}
+                            {% set mobileStatusText = 'Completed' %}
+                        {% elseif import.status == 'failed' %}
+                            {% set mobileStatusClass = 'bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400' %}
+                            {% set mobileStatusIcon = 'fa-times-circle' %}
+                            {% set mobileStatusText = 'Failed' %}
+                        {% else %}
+                            {% set mobileStatusClass = 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400' %}
+                            {% set mobileStatusIcon = 'fa-clock' %}
+                            {% set mobileStatusText = 'In Progress' %}
+                        {% endif %}
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold {{ mobileStatusClass }}">
+                            <i class="fas {{ mobileStatusIcon }} mr-1"></i>
+                            {{ mobileStatusText }}
+                        </span>
+                    </div>
+
+                    <div class="space-y-2 text-sm">
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600 dark:text-slate-400">Total TLDs:</span>
+                            <span class="font-semibold text-gray-900 dark:text-white">{{ import.total_tlds }}</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600 dark:text-slate-400">New:</span>
+                            <span class="font-semibold text-green-600 dark:text-green-400">{{ import.new_tlds }}</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600 dark:text-slate-400">Updated:</span>
+                            <span class="font-semibold text-blue-600 dark:text-blue-400">{{ import.updated_tlds }}</span>
+                        </div>
+                        {% if import.failed_tlds > 0 %}
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600 dark:text-slate-400">Failed:</span>
+                            <span class="font-semibold text-red-600 dark:text-red-400">{{ import.failed_tlds }}</span>
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="flex space-x-2 mt-3">
+                        <button onclick="showImportDetails({{ import.id }})" class="flex-1 px-3 py-1.5 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded text-center text-sm hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
+                            <i class="fas fa-eye mr-1"></i> Details
+                        </button>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+
+        {# Pagination #}
+        {% if pagination.total_pages > 1 %}
+        <div class="bg-white dark:bg-slate-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-slate-700 sm:px-6">
+            <div class="flex-1 flex justify-between sm:hidden">
+                {% if pagination.current_page > 1 %}
+                <a href="?page={{ pagination.current_page - 1 }}"
+                   class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-sm font-medium rounded-md text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-gray-50 dark:hover:bg-slate-700">
+                    Previous
+                </a>
+                {% endif %}
+
+                {% if pagination.current_page < pagination.total_pages %}
+                <a href="?page={{ pagination.current_page + 1 }}"
+                   class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-sm font-medium rounded-md text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-gray-50 dark:hover:bg-slate-700">
+                    Next
+                </a>
+                {% endif %}
+            </div>
+
+            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                <div>
+                    <p class="text-sm text-gray-700 dark:text-slate-300">
+                        Showing <span class="font-medium">{{ pagination.showing_from }}</span> to
+                        <span class="font-medium">{{ pagination.showing_to }}</span> of
+                        <span class="font-medium">{{ pagination.total }}</span> results
+                    </p>
+                </div>
+                <div>
+                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                        {% for i in 1..pagination.total_pages %}
+                        <a href="?page={{ i }}"
+                           class="relative inline-flex items-center px-4 py-2 border text-sm font-medium {{ i == pagination.current_page ? 'z-10 bg-primary border-primary text-white' : 'bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 text-gray-500 dark:text-slate-400 hover:bg-gray-50 dark:hover:bg-slate-700' }} {{ i == 1 ? 'rounded-l-md' : '' }} {{ i == pagination.total_pages ? 'rounded-r-md' : '' }}">
+                            {{ i }}
+                        </a>
+                        {% endfor %}
+                    </nav>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    {% else %}
+        <div class="text-center py-12 px-6">
+            <div class="mb-4">
+                <i class="fas fa-history text-gray-300 dark:text-slate-600 text-6xl"></i>
+            </div>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Import Logs</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">No TLD imports have been performed yet.</p>
+            <a href="/tld-registry" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+                <i class="fas fa-arrow-left mr-2"></i>
+                Back to Registry
+            </a>
+        </div>
+    {% endif %}
+</div>
+
+{# Import Details Modal #}
+<div id="importDetailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
+    <div class="relative top-20 mx-auto p-5 border border-gray-200 dark:border-slate-700 w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-slate-800">
+        <div class="mt-3">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Import Details</h3>
+                <button onclick="closeImportDetails()" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div id="importDetailsContent" class="text-sm text-gray-600 dark:text-slate-400">
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function showImportDetails(importId) {
+    const importData = findImportData(importId);
+
+    if (!importData) {
+        document.getElementById('importDetailsContent').innerHTML = `
+            <div class="text-center text-gray-500 dark:text-slate-400">
+                <p>Import details not found</p>
+            </div>
+        `;
+        document.getElementById('importDetailsModal').classList.remove('hidden');
+        return;
+    }
+
+    const typeLabels = {
+        'tld_list': 'TLD List',
+        'rdap': 'RDAP Servers',
+        'whois': 'WHOIS Data',
+        'complete_workflow': 'Complete Workflow',
+        'check_updates': 'Update Check',
+        'manual': 'Manual Import'
+    };
+
+    const typeDescriptions = {
+        'tld_list': 'IANA TLD list import',
+        'rdap': 'RDAP server bootstrap data',
+        'whois': 'WHOIS server & registry URLs',
+        'complete_workflow': 'Full import (TLD List → RDAP → WHOIS)',
+        'check_updates': 'IANA update verification',
+        'manual': 'Manual data import'
+    };
+
+    const typeLabel = typeLabels[importData.import_type] || importData.import_type;
+    const typeDescription = typeDescriptions[importData.import_type] || 'Import operation';
+
+    let duration = 'Unknown';
+    if (importData.started_at && importData.completed_at) {
+        const start = new Date(importData.started_at);
+        const end = new Date(importData.completed_at);
+        const diffMs = end - start;
+        const minutes = Math.floor(diffMs / 60000);
+        const seconds = Math.floor((diffMs % 60000) / 1000);
+
+        if (diffMs < 5000 && importData.import_type === 'complete_workflow') {
+            const estimatedSeconds = Math.round((importData.total_tlds || 0) * 1.1);
+            const estMinutes = Math.floor(estimatedSeconds / 60);
+            const estSeconds = estimatedSeconds % 60;
+            duration = `~${estMinutes} minutes ${estSeconds} seconds (estimated)`;
+        } else if (minutes === 0 && seconds === 0) {
+            duration = 'Less than 1 second';
+        } else {
+            duration = `${minutes} minutes ${seconds} seconds`;
+        }
+    }
+
+    let statusClass = 'bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-200';
+    let statusText = 'Unknown';
+    if (importData.status === 'completed') {
+        statusClass = 'bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400';
+        statusText = 'Completed';
+    } else if (importData.status === 'failed') {
+        statusClass = 'bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400';
+        statusText = 'Failed';
+    } else if (importData.status === 'running') {
+        statusClass = 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400';
+        statusText = 'Running';
+    }
+
+    document.getElementById('importDetailsContent').innerHTML = `
+        <div class="space-y-3">
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Import ID:</span>
+                <span class="text-gray-700 dark:text-slate-300">${importData.id}</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Type:</span>
+                <span class="text-gray-700 dark:text-slate-300">${typeLabel}</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Description:</span>
+                <span class="text-gray-600 dark:text-slate-400">${typeDescription}</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Status:</span>
+                <span class="px-2 py-1 rounded text-xs ${statusClass}">${statusText}</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Duration:</span>
+                <span class="text-gray-700 dark:text-slate-300">${duration}</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Started:</span>
+                <span class="text-gray-700 dark:text-slate-300">${new Date(importData.started_at).toLocaleString()}</span>
+            </div>
+            ${importData.completed_at ? `
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">Completed:</span>
+                <span class="text-gray-700 dark:text-slate-300">${new Date(importData.completed_at).toLocaleString()}</span>
+            </div>
+            ` : ''}
+            ${importData.iana_publication_date ? `
+            <div class="flex justify-between">
+                <span class="font-medium text-gray-900 dark:text-white">IANA Publication:</span>
+                <span class="text-gray-700 dark:text-slate-300">${importData.iana_publication_date}</span>
+            </div>
+            ` : ''}
+            <div class="mt-4">
+                <h4 class="font-medium text-gray-900 dark:text-white mb-2">Import Results:</h4>
+                <div class="bg-gray-100 dark:bg-slate-900 p-3 rounded text-xs font-mono space-y-1 text-gray-800 dark:text-slate-300">
+                    <div>Total TLDs: ${importData.total_tlds || 0}</div>
+                    <div>New TLDs: ${importData.new_tlds || 0}</div>
+                    <div>Updated TLDs: ${importData.updated_tlds || 0}</div>
+                    <div>Failed TLDs: ${importData.failed_tlds || 0}</div>
+                    ${importData.error_message ? `
+                    <div class="text-red-600 dark:text-red-400 mt-2">
+                        <strong>Error:</strong> ${importData.error_message}
+                    </div>
+                    ` : ''}
+                </div>
+            </div>
+        </div>
+    `;
+    document.getElementById('importDetailsModal').classList.remove('hidden');
+}
+
+function findImportData(importId) {
+    const importRows = document.querySelectorAll('tr[data-import-id]');
+    for (let row of importRows) {
+        if (row.getAttribute('data-import-id') == importId) {
+            return JSON.parse(row.getAttribute('data-import-data'));
+        }
+    }
+
+    const importCards = document.querySelectorAll('[data-import-id]');
+    for (let card of importCards) {
+        if (card.getAttribute('data-import-id') == importId) {
+            return JSON.parse(card.getAttribute('data-import-data'));
+        }
+    }
+
+    return null;
+}
+
+function closeImportDetails() {
+    document.getElementById('importDetailsModal').classList.add('hidden');
+}
+
+document.getElementById('importDetailsModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeImportDetails();
+    }
+});
+</script>
+
+{% endblock %}
diff --git a/app/Views/tld-registry/import-progress.php b/app/Views/tld-registry/import-progress.twig
similarity index 60%
rename from app/Views/tld-registry/import-progress.php
rename to app/Views/tld-registry/import-progress.twig
index d2b47fb..7d9ca4f 100644
--- a/app/Views/tld-registry/import-progress.php
+++ b/app/Views/tld-registry/import-progress.twig
@@ -1,135 +1,134 @@
-<?php
-$title = $title ?? 'Import Progress';
-$pageTitle = $title;
-$pageDescription = 'Progressive data import with real-time progress';
-$pageIcon = 'fas fa-tasks';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
+
+{% set title = title|default('Import Progress') %}
+{% set pageTitle = title %}
+{% set pageDescription = 'Progressive data import with real-time progress' %}
+{% set pageIcon = 'fas fa-tasks' %}
+
+{% block content %}
 
 <div class="max-w-4xl mx-auto">
-    <!-- Header -->
+    {# Header #}
     <div class="mb-6">
         <div class="flex items-center justify-between">
             <div>
-                <h1 class="text-2xl font-bold text-gray-900"><?= htmlspecialchars($title) ?></h1>
-                <p class="text-gray-600 mt-1">
-                    <?php
-                    $descriptions = [
-                        'tld_list' => 'Importing complete TLD list from IANA',
-                        'rdap' => 'Importing RDAP servers for existing TLDs',
-                        'whois' => 'Importing WHOIS & Registry data via RDAP API (with HTML fallback)',
-                        'check_updates' => 'Checking for IANA updates',
-                        'complete_workflow' => 'Complete TLD import workflow (TLD List → RDAP → WHOIS & Registry Data)'
-                    ];
-                    echo htmlspecialchars($descriptions[$import_type] ?? 'Processing import');
-                    ?>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ title }}</h1>
+                <p class="text-gray-600 dark:text-slate-400 mt-1">
+                    {% set descriptions = {
+                        tld_list: 'Importing complete TLD list from IANA',
+                        rdap: 'Importing RDAP servers for existing TLDs',
+                        whois: 'Importing WHOIS & Registry data via RDAP API (with HTML fallback)',
+                        check_updates: 'Checking for IANA updates',
+                        complete_workflow: 'Complete TLD import workflow (TLD List → RDAP → WHOIS & Registry Data)'
+                    } %}
+                    {{ descriptions[import_type]|default('Processing import') }}
                 </p>
             </div>
-            <a href="/tld-registry" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
+            <a href="/tld-registry" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
                 <i class="fas fa-arrow-left mr-2"></i>
                 Back to TLD Registry
             </a>
         </div>
     </div>
 
-    <!-- Progress Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+    {# Progress Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6 mb-6">
         <div class="flex items-center justify-between mb-4">
-            <h2 class="text-lg font-semibold text-gray-900">Import Status</h2>
-            <div id="status-badge" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Import Status</h2>
+            <div id="status-badge" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">
                 <i class="fas fa-clock mr-2"></i>
                 <span id="status-text">Starting...</span>
             </div>
         </div>
 
-        <!-- Progress Bar -->
+        {# Progress Bar #}
         <div class="mb-4">
-            <div class="flex justify-between text-sm text-gray-600 mb-2">
+            <div class="flex justify-between text-sm text-gray-600 dark:text-slate-400 mb-2">
                 <span id="progress-text">0 of 0 items processed</span>
                 <span id="percentage-text">0%</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-3">
+            <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-3">
                 <div id="progress-bar" class="bg-blue-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
             </div>
         </div>
 
-        <!-- Step Progress (for complete workflow) -->
+        {# Step Progress (for complete workflow) #}
         <div id="step-progress" class="mb-4" style="display: none;">
-            <div class="text-sm text-gray-600 mb-2">Workflow Steps:</div>
+            <div class="text-sm text-gray-600 dark:text-slate-400 mb-2">Workflow Steps:</div>
             <div class="grid grid-cols-3 gap-2">
-                <div class="step-item bg-gray-100 rounded-lg p-2 text-center">
-                    <div class="text-xs font-medium text-gray-600">Step 1</div>
-                    <div class="text-xs text-gray-500">TLD List</div>
-                    <div id="step-1-status" class="text-xs text-gray-400">Pending</div>
+                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
+                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 1</div>
+                    <div class="text-xs text-gray-500 dark:text-slate-400">TLD List</div>
+                    <div id="step-1-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                 </div>
-                <div class="step-item bg-gray-100 rounded-lg p-2 text-center">
-                    <div class="text-xs font-medium text-gray-600">Step 2</div>
-                    <div class="text-xs text-gray-500">RDAP</div>
-                    <div id="step-2-status" class="text-xs text-gray-400">Pending</div>
+                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
+                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 2</div>
+                    <div class="text-xs text-gray-500 dark:text-slate-400">RDAP</div>
+                    <div id="step-2-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                 </div>
-                <div class="step-item bg-gray-100 rounded-lg p-2 text-center">
-                    <div class="text-xs font-medium text-gray-600">Step 3</div>
-                    <div class="text-xs text-gray-500">WHOIS & Registry</div>
-                    <div id="step-3-status" class="text-xs text-gray-400">Pending</div>
+                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
+                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 3</div>
+                    <div class="text-xs text-gray-500 dark:text-slate-400">WHOIS & Registry</div>
+                    <div id="step-3-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                 </div>
             </div>
         </div>
 
-        <!-- Statistics -->
+        {# Statistics #}
         <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <div class="bg-gray-50 rounded-lg p-4">
+            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                 <div class="flex items-center">
-                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
-                        <i class="fas fa-list text-blue-600"></i>
+                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/10 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-list text-blue-600 dark:text-blue-400"></i>
                     </div>
                     <div>
-                        <p class="text-sm text-gray-500">Total</p>
-                        <p id="total-count" class="text-xl font-semibold text-gray-900">0</p>
+                        <p class="text-sm text-gray-500 dark:text-slate-400">Total</p>
+                        <p id="total-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-gray-50 rounded-lg p-4">
+            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                 <div class="flex items-center">
-                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
-                        <i class="fas fa-check text-green-600"></i>
+                    <div class="w-10 h-10 bg-green-100 dark:bg-green-500/10 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-check text-green-600 dark:text-green-400"></i>
                     </div>
                     <div>
-                        <p class="text-sm text-gray-500">Processed</p>
-                        <p id="processed-count" class="text-xl font-semibold text-gray-900">0</p>
+                        <p class="text-sm text-gray-500 dark:text-slate-400">Processed</p>
+                        <p id="processed-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-gray-50 rounded-lg p-4">
+            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                 <div class="flex items-center">
-                    <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
-                        <i class="fas fa-times text-red-600"></i>
+                    <div class="w-10 h-10 bg-red-100 dark:bg-red-500/10 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-times text-red-600 dark:text-red-400"></i>
                     </div>
                     <div>
-                        <p class="text-sm text-gray-500">Failed</p>
-                        <p id="failed-count" class="text-xl font-semibold text-gray-900">0</p>
+                        <p class="text-sm text-gray-500 dark:text-slate-400">Failed</p>
+                        <p id="failed-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-gray-50 rounded-lg p-4">
+            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                 <div class="flex items-center">
-                    <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
-                        <i class="fas fa-hourglass-half text-orange-600"></i>
+                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-500/10 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-hourglass-half text-orange-600 dark:text-orange-400"></i>
                     </div>
                     <div>
-                        <p class="text-sm text-gray-500">Remaining</p>
-                        <p id="remaining-count" class="text-xl font-semibold text-gray-900">0</p>
+                        <p class="text-sm text-gray-500 dark:text-slate-400">Remaining</p>
+                        <p id="remaining-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Log Output -->
-    <div class="bg-white rounded-lg border border-gray-200 p-6">
-        <h3 class="text-lg font-semibold text-gray-900 mb-4">Import Log</h3>
+    {# Log Output #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Import Log</h3>
         <div id="log-output" class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm h-64 overflow-y-auto">
             <div class="text-gray-500">Initializing import process...</div>
         </div>
@@ -137,13 +136,12 @@ ob_start();
 </div>
 
 <script>
-let logId = <?= json_encode($log_id) ?>;
-let importType = <?= json_encode($import_type) ?>;
+let logId = {{ log_id|json_encode|raw }};
+let importType = {{ import_type|json_encode|raw }};
 let isComplete = false;
 let totalProcessed = 0;
 let totalFailed = 0;
 
-// Show step progress for complete workflow
 if (importType === 'complete_workflow') {
     document.getElementById('step-progress').style.display = 'block';
 }
@@ -152,11 +150,11 @@ function addLogMessage(message, type = 'info') {
     const logOutput = document.getElementById('log-output');
     const timestamp = new Date().toLocaleTimeString();
     const colorClass = type === 'error' ? 'text-red-400' : type === 'success' ? 'text-green-400' : 'text-blue-400';
-    
+
     const logEntry = document.createElement('div');
     logEntry.className = colorClass;
     logEntry.innerHTML = `[${timestamp}] ${message}`;
-    
+
     logOutput.appendChild(logEntry);
     logOutput.scrollTop = logOutput.scrollHeight;
 }
@@ -166,51 +164,45 @@ function updateProgress(data) {
     const processed = data.processed || 0;
     const failed = data.failed || 0;
     const remaining = data.remaining || 0;
-    
-    // Update counts (use absolute values, not cumulative)
+
     document.getElementById('total-count').textContent = total;
     document.getElementById('processed-count').textContent = processed;
     document.getElementById('failed-count').textContent = failed;
     document.getElementById('remaining-count').textContent = remaining;
-    
-    // Update progress bar
+
     const totalToProcess = processed + remaining;
     const percentage = totalToProcess > 0 ? Math.round((processed / totalToProcess) * 100) : 0;
-    
+
     document.getElementById('progress-bar').style.width = percentage + '%';
     document.getElementById('progress-text').textContent = `${processed} of ${totalToProcess} items processed`;
     document.getElementById('percentage-text').textContent = percentage + '%';
-    
-    // Update step progress for complete workflow
+
     if (importType === 'complete_workflow' && data.message) {
         updateStepProgress(data.message, processed, total);
     }
 
-    // Update status
     const statusBadge = document.getElementById('status-badge');
     const statusText = document.getElementById('status-text');
-    
+
     if (data.status === 'complete') {
-        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
+        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400';
         statusText.innerHTML = '<i class="fas fa-check mr-2"></i>Complete';
         isComplete = true;
-        
-        // Show the actual completion message from API
+
         const completionMessage = data.message || 'Import completed successfully!';
         addLogMessage(completionMessage, 'success');
-        
-        // Mark all steps as completed for complete workflow
+
         if (importType === 'complete_workflow') {
             for (let i = 1; i <= 3; i++) {
                 updateStepStatus(i, 'completed');
             }
         }
     } else if (data.status === 'in_progress') {
-        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800';
+        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400';
         statusText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>In Progress';
         addLogMessage(data.message || 'Processing batch...', 'info');
     } else if (data.status === 'error') {
-        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
+        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400';
         statusText.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>Error';
         addLogMessage(data.message || 'An error occurred', 'error');
         isComplete = true;
@@ -221,10 +213,9 @@ function checkProgress() {
     if (isComplete) {
         return;
     }
-    
+
     fetch(`/tld-registry/api/import-progress?log_id=${logId}`)
         .then(response => {
-            // Check if response is actually JSON
             const contentType = response.headers.get('content-type');
             if (!contentType || !contentType.includes('application/json')) {
                 return response.text().then(text => {
@@ -242,17 +233,17 @@ function checkProgress() {
                 isComplete = true;
                 return;
             }
-            
+
             updateProgress(data);
-            
+
             if (data.status !== 'complete' && data.status !== 'error') {
-                setTimeout(checkProgress, 2000); // Check again in 2 seconds
+                setTimeout(checkProgress, 2000);
             }
         })
         .catch(error => {
             if (error.message.includes('Gateway Timeout') || error.message.includes('timeout')) {
                 addLogMessage('Gateway timeout detected. Retrying in 5 seconds...', 'warning');
-                setTimeout(checkProgress, 5000); // Retry after 5 seconds
+                setTimeout(checkProgress, 5000);
             } else {
                 addLogMessage('Network error: ' + error.message, 'error');
                 isComplete = true;
@@ -261,33 +252,26 @@ function checkProgress() {
 }
 
 function updateStepProgress(message, currentStep, totalSteps) {
-    // Extract step number from message (handle both /3 and /4 formats)
     const stepMatch = message.match(/Step (\d+)\/(\d+)/);
     if (stepMatch) {
         const stepNumber = parseInt(stepMatch[1]);
         const totalSteps = parseInt(stepMatch[2]);
-        
-        // Check if this step is completed
+
         const isCompleted = message.toLowerCase().includes('completed');
-        
+
         if (isCompleted) {
-            // Mark all steps up to and including this one as completed
             for (let i = 1; i <= stepNumber; i++) {
                 updateStepStatus(i, 'completed');
             }
-            
-            // Mark next step as in progress if not the last step
+
             if (stepNumber < totalSteps) {
                 updateStepStatus(stepNumber + 1, 'in_progress');
             }
         } else {
-            // Step is in progress
-            // Mark previous steps as completed
             for (let i = 1; i < stepNumber; i++) {
                 updateStepStatus(i, 'completed');
             }
-            
-            // Mark current step as in progress
+
             updateStepStatus(stepNumber, 'in_progress');
         }
     }
@@ -296,27 +280,23 @@ function updateStepProgress(message, currentStep, totalSteps) {
 function updateStepStatus(stepNumber, status) {
     const stepElement = document.getElementById(`step-${stepNumber}-status`);
     const stepItem = stepElement.closest('.step-item');
-    
+
     if (status === 'completed') {
         stepElement.textContent = 'Completed';
-        stepElement.className = 'text-xs text-green-600';
-        stepItem.className = 'step-item bg-green-100 rounded-lg p-2 text-center';
+        stepElement.className = 'text-xs text-green-600 dark:text-green-400';
+        stepItem.className = 'step-item bg-green-100 dark:bg-green-500/10 rounded-lg p-2 text-center';
     } else if (status === 'in_progress') {
         stepElement.textContent = 'In Progress';
-        stepElement.className = 'text-xs text-blue-600';
-        stepItem.className = 'step-item bg-blue-100 rounded-lg p-2 text-center';
+        stepElement.className = 'text-xs text-blue-600 dark:text-blue-400';
+        stepItem.className = 'step-item bg-blue-100 dark:bg-blue-500/10 rounded-lg p-2 text-center';
     } else if (status === 'failed') {
         stepElement.textContent = 'Failed';
-        stepElement.className = 'text-xs text-red-600';
-        stepItem.className = 'step-item bg-red-100 rounded-lg p-2 text-center';
+        stepElement.className = 'text-xs text-red-600 dark:text-red-400';
+        stepItem.className = 'step-item bg-red-100 dark:bg-red-500/10 rounded-lg p-2 text-center';
     }
 }
 
-// Start checking progress
 checkProgress();
 </script>
 
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/tld-registry/index.php b/app/Views/tld-registry/index.php
deleted file mode 100644
index ae361f2..0000000
--- a/app/Views/tld-registry/index.php
+++ /dev/null
@@ -1,894 +0,0 @@
-<?php
-$title = 'TLD Registry';
-$pageTitle = 'TLD Registry';
-$pageDescription = 'Manage Top-Level Domain registry information';
-$pageIcon = 'fas fa-database';
-ob_start();
-
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $_GET;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/tld-registry?' . http_build_query($params);
-}
-
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
-
-// Get current filters
-$currentFilters = $filters ?? ['search' => '', 'sort' => 'tld', 'order' => 'asc'];
-?>
-
-<!-- Action Buttons -->
-<?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-<div class="mb-4 flex flex-wrap gap-2 justify-end">
-    <!-- IANA Dropdown -->
-    <div class="relative" id="ianaDropdownWrapper">
-        <button onclick="document.getElementById('ianaDropdownMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition-colors font-medium">
-            <i class="fas fa-globe mr-2"></i>
-            IANA
-            <i class="fas fa-chevron-down ml-2 text-xs"></i>
-        </button>
-        <div id="ianaDropdownMenu" class="hidden absolute right-0 mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-30 overflow-hidden">
-            <form method="POST" action="/tld-registry/start-progressive-import">
-                <?= csrf_field() ?>
-                <input type="hidden" name="import_type" value="complete_workflow">
-                <button type="submit" class="w-full flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors" title="Complete TLD import workflow: TLD List → RDAP → WHOIS → Registry URLs">
-                    <i class="fas fa-rocket text-indigo-600 mr-2.5"></i>
-                    Import TLDs from IANA
-                </button>
-            </form>
-            <form method="POST" action="/tld-registry/start-progressive-import">
-                <?= csrf_field() ?>
-                <input type="hidden" name="import_type" value="check_updates">
-                <button type="submit" <?= $tldStats['total'] == 0 ? 'disabled' : '' ?> class="w-full flex items-center px-4 py-2.5 text-sm <?= $tldStats['total'] == 0 ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-gray-50' ?> transition-colors border-t border-gray-100" title="<?= $tldStats['total'] == 0 ? 'Import TLDs first' : 'Check for IANA updates' ?>">
-                    <i class="fas fa-sync-alt text-blue-600 mr-2.5"></i>
-                    Check for Updates
-                </button>
-            </form>
-            <a href="/tld-registry/import-logs" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100">
-                <i class="fas fa-history text-gray-500 mr-2.5"></i>
-                IANA Import Logs
-            </a>
-        </div>
-    </div>
-    <!-- Export Dropdown -->
-    <div class="relative" id="tldExportDropdownWrapper">
-        <button onclick="document.getElementById('tldExportDropdownMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors font-medium">
-            <i class="fas fa-download mr-2"></i>
-            Export
-            <i class="fas fa-chevron-down ml-2 text-xs"></i>
-        </button>
-        <div id="tldExportDropdownMenu" class="hidden absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 z-30 overflow-hidden">
-            <a href="/tld-registry/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
-                <i class="fas fa-file-csv text-green-600 mr-2.5"></i>
-                Export as CSV
-            </a>
-            <a href="/tld-registry/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100">
-                <i class="fas fa-file-code text-blue-600 mr-2.5"></i>
-                Export as JSON
-            </a>
-        </div>
-    </div>
-    <!-- Import Button -->
-    <button onclick="document.getElementById('tldImportModal').classList.remove('hidden')" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-        <i class="fas fa-upload mr-2"></i>
-        Import
-    </button>
-    <!-- Create Button -->
-    <button onclick="openCreateTldModal()" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-        <i class="fas fa-plus mr-2"></i>
-        Create TLD
-    </button>
-</div>
-<?php else: ?>
-<div class="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-    <div class="flex items-center">
-        <i class="fas fa-info-circle text-yellow-600 mr-2"></i>
-        <p class="text-sm text-yellow-800">
-            View-only mode. Contact admin to import or modify TLD data.
-        </p>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Statistics Cards -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-    <!-- Total TLDs Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total TLDs</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $tldStats['total'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-globe text-blue-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- Active TLDs Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Active</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $tldStats['active'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-check-circle text-green-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- With RDAP Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">With RDAP</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $tldStats['with_rdap'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-database text-indigo-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- With WHOIS Card -->
-    <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">With WHOIS</p>
-                <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $tldStats['with_whois'] ?? 0 ?></p>
-            </div>
-            <div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center">
-                <i class="fas fa-server text-orange-600 text-lg"></i>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<!-- Search and Filters -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
-    <form method="GET" action="/tld-registry" id="filter-form">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <!-- Search -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search TLDs</label>
-                <div class="relative">
-                    <input type="text" name="search" id="tldSearch" value="<?= htmlspecialchars($currentFilters['search']) ?>" placeholder="Search TLDs..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
-                </div>
-            </div>
-            
-            <!-- Status Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="">All Status</option>
-                    <option value="active" <?= ($_GET['status'] ?? '') === 'active' ? 'selected' : '' ?>>Active</option>
-                    <option value="inactive" <?= ($_GET['status'] ?? '') === 'inactive' ? 'selected' : '' ?>>Inactive</option>
-                </select>
-            </div>
-            
-            <!-- Data Type Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Data Type</label>
-                <select name="data_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <option value="">All Types</option>
-                    <option value="with_rdap" <?= ($_GET['data_type'] ?? '') === 'with_rdap' ? 'selected' : '' ?>>With RDAP</option>
-                    <option value="with_whois" <?= ($_GET['data_type'] ?? '') === 'with_whois' ? 'selected' : '' ?>>With WHOIS</option>
-                    <option value="with_registry" <?= ($_GET['data_type'] ?? '') === 'with_registry' ? 'selected' : '' ?>>With Registry URL</option>
-                    <option value="missing_data" <?= ($_GET['data_type'] ?? '') === 'missing_data' ? 'selected' : '' ?>>Missing Data</option>
-                </select>
-            </div>
-            
-            <!-- Actions -->
-            <div class="flex items-end space-x-2">
-                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                    <i class="fas fa-filter mr-2"></i>
-                    Apply
-                </button>
-                <a href="/tld-registry" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
-                    <i class="fas fa-times mr-2"></i>
-                    Clear
-                </a>
-            </div>
-        </div>
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-    </form>
-</div>
-
-<!-- Pagination Info & Per Page Selector -->
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?></span> TLD(s)
-    </div>
-    
-    <form method="GET" action="/tld-registry" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="search" value="<?= htmlspecialchars($currentFilters['search']) ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= $pagination['per_page'] == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $pagination['per_page'] == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $pagination['per_page'] == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $pagination['per_page'] == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-
-<!-- TLD Registry Table -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-    <!-- Bulk Actions Bar (shown when TLDs are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
-        <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
-            <div class="flex items-center gap-3 flex-wrap">
-                <div class="flex items-center gap-2">
-                    <form method="POST" action="/tld-registry/bulk-delete" id="bulk-delete-form" class="inline">
-                        <?= csrf_field() ?>
-                        <button type="button" onclick="confirmBulkDelete()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
-                            <i class="fas fa-trash mr-1"></i> Delete Selected
-                        </button>
-                    </form>
-                </div>
-            </div>
-        </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
-            <i class="fas fa-times mr-1.5"></i> Clear Selection
-        </button>
-    </div>
-    <?php endif; ?>
-    <?php if (!empty($tlds)): ?>
-        <!-- Table View (Desktop) -->
-        <div class="hidden lg:block overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary" onchange="toggleAllCheckboxes(this)">
-                        </th>
-                        <?php endif; ?>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('tld', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                TLD <?= sortIcon('tld', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('rdap_servers', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                RDAP Servers <?= sortIcon('rdap_servers', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('whois_server', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                WHOIS Server <?= sortIcon('whois_server', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('updated_at', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Last Updated <?= sortIcon('updated_at', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            <a href="<?= sortUrl('is_active', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                                Status <?= sortIcon('is_active', $currentFilters['sort'], $currentFilters['order']) ?>
-                            </a>
-                        </th>
-                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <?php foreach ($tlds as $tld): ?>
-                        <tr class="hover:bg-gray-50 transition-colors duration-150">
-                            <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <input type="checkbox" name="tld_ids[]" value="<?= $tld['id'] ?>" class="tld-checkbox rounded border-gray-300 text-primary focus:ring-primary">
-                            </td>
-                            <?php endif; ?>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-globe text-primary"></i>
-                                    </div>
-                                    <div class="ml-4">
-                                        <div class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($tld['tld']) ?></div>
-                                        <?php if ($tld['registry_url']): ?>
-                                        <div class="text-sm text-gray-500">
-                                            <a href="<?= htmlspecialchars($tld['registry_url']) ?>" target="_blank" class="text-primary hover:text-primary-dark">
-                                                <i class="fas fa-external-link-alt mr-1"></i>
-                                                Registry
-                                            </a>
-                                        </div>
-                                        <?php endif; ?>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <?php if ($tld['rdap_servers']): ?>
-                                    <?php 
-                                    $rdapServers = json_decode($tld['rdap_servers'], true);
-                                    if (is_array($rdapServers) && !empty($rdapServers)):
-                                    ?>
-                                    <div class="text-sm text-gray-900">
-                                        <?php foreach (array_slice($rdapServers, 0, 2) as $server): ?>
-                                        <div class="font-mono text-xs bg-gray-50 px-2 py-1 rounded mb-1"><?= htmlspecialchars($server) ?></div>
-                                        <?php endforeach; ?>
-                                        <?php if (count($rdapServers) > 2): ?>
-                                        <div class="text-xs text-gray-500">+<?= count($rdapServers) - 2 ?> more</div>
-                                        <?php endif; ?>
-                                    </div>
-                                    <?php else: ?>
-                                    <span class="text-sm text-gray-400">None</span>
-                                    <?php endif; ?>
-                                <?php else: ?>
-                                <span class="text-sm text-gray-400">None</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <?php if ($tld['whois_server']): ?>
-                                <div class="text-sm font-mono text-gray-900 bg-gray-50 px-2 py-1 rounded"><?= htmlspecialchars($tld['whois_server']) ?></div>
-                                <?php else: ?>
-                                <span class="text-sm text-gray-400">None</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                <?php if ($tld['updated_at']): ?>
-                                <div class="flex items-center">
-                                    <i class="far fa-clock mr-2"></i>
-                                    <?= date('M d, H:i', strtotime($tld['updated_at'])) ?>
-                                </div>
-                                <?php else: ?>
-                                <span class="text-gray-400">Never</span>
-                                <?php endif; ?>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $tld['is_active'] ? 'bg-green-100 text-green-700 border-green-200' : 'bg-gray-100 text-gray-700 border-gray-200' ?>">
-                                    <i class="fas <?= $tld['is_active'] ? 'fa-check-circle' : 'fa-pause-circle' ?> mr-1"></i>
-                                    <?= $tld['is_active'] ? 'Active' : 'Inactive' ?>
-                                </span>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <div class="flex items-center justify-end space-x-2">
-                                    <a href="/tld-registry/<?= $tld['id'] ?>" class="text-blue-600 hover:text-blue-800" title="View">
-                                        <i class="fas fa-eye"></i>
-                                    </a>
-                                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                                    <a href="/tld-registry/<?= $tld['id'] ?>/refresh" class="text-green-600 hover:text-green-800" title="Refresh" onclick="return confirm('Refresh TLD data from IANA?')">
-                                        <i class="fas fa-sync-alt"></i>
-                                    </a>
-                                    <a href="/tld-registry/<?= $tld['id'] ?>/toggle-active" class="text-orange-600 hover:text-orange-800" title="Toggle Status" onclick="return confirm('Toggle TLD status?')">
-                                        <i class="fas fa-power-off"></i>
-                                    </a>
-                                    <?php endif; ?>
-                                </div>
-                            </td>
-                        </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
-        </div>
-
-        <!-- Card View (Mobile) -->
-        <div class="lg:hidden divide-y divide-gray-200">
-            <?php foreach ($tlds as $tld): ?>
-                <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
-                    <div class="flex items-center justify-between mb-3">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-3">
-                                <i class="fas fa-globe text-primary"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-900"><?= htmlspecialchars($tld['tld']) ?></h3>
-                                <?php if ($tld['registry_url']): ?>
-                                <a href="<?= htmlspecialchars($tld['registry_url']) ?>" target="_blank" class="text-xs text-primary hover:text-primary-dark">
-                                    <i class="fas fa-external-link-alt mr-1"></i>
-                                    Registry
-                                </a>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold <?= $tld['is_active'] ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' ?>">
-                            <?= $tld['is_active'] ? 'Active' : 'Inactive' ?>
-                        </span>
-                    </div>
-                    
-                    <div class="space-y-2 text-sm">
-                        <?php if ($tld['rdap_servers']): ?>
-                            <?php 
-                            $rdapServers = json_decode($tld['rdap_servers'], true);
-                            if (is_array($rdapServers) && !empty($rdapServers)):
-                            ?>
-                            <div class="flex items-start">
-                                <i class="fas fa-database text-gray-400 mr-2 w-4 mt-0.5"></i>
-                                <div class="flex-1">
-                                    <div class="font-mono text-xs bg-gray-50 px-2 py-1 rounded mb-1"><?= htmlspecialchars($rdapServers[0]) ?></div>
-                                    <?php if (count($rdapServers) > 1): ?>
-                                    <div class="text-xs text-gray-500">+<?= count($rdapServers) - 1 ?> more RDAP server(s)</div>
-                                    <?php endif; ?>
-                                </div>
-                            </div>
-                            <?php endif; ?>
-                        <?php endif; ?>
-                        
-                        <?php if ($tld['whois_server']): ?>
-                        <div class="flex items-center">
-                            <i class="fas fa-server text-gray-400 mr-2 w-4"></i>
-                            <span class="font-mono text-xs bg-gray-50 px-2 py-1 rounded"><?= htmlspecialchars($tld['whois_server']) ?></span>
-                        </div>
-                        <?php endif; ?>
-                        
-                        <div class="flex items-center">
-                            <i class="far fa-clock text-gray-400 mr-2 w-4"></i>
-                            <span class="text-gray-500"><?= $tld['updated_at'] ? date('M d, H:i', strtotime($tld['updated_at'])) : 'Never updated' ?></span>
-                        </div>
-                    </div>
-                    
-                    <div class="flex space-x-2 mt-3">
-                        <a href="/tld-registry/<?= $tld['id'] ?>" class="<?= (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') ? 'flex-1' : 'w-full' ?> px-3 py-1.5 bg-blue-50 text-blue-600 rounded text-center text-sm hover:bg-blue-100 transition-colors">
-                            <i class="fas fa-eye mr-1"></i> View
-                        </a>
-                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                        <a href="/tld-registry/<?= $tld['id'] ?>/refresh" class="flex-1 px-3 py-1.5 bg-green-50 text-green-600 rounded text-center text-sm hover:bg-green-100 transition-colors" onclick="return confirm('Refresh TLD data?')">
-                            <i class="fas fa-sync-alt mr-1"></i> Refresh
-                        </a>
-                        <?php endif; ?>
-                    </div>
-                </div>
-            <?php endforeach; ?>
-        </div>
-    <?php else: ?>
-        <div class="text-center py-12 px-6">
-            <div class="mb-4">
-                <i class="fas fa-globe text-gray-300 text-6xl"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No TLDs Found</h3>
-            <p class="text-sm text-gray-500 mb-4">
-                <?php if (!empty($currentFilters['search'])): ?>
-                    No TLDs match your search criteria.
-                <?php else: ?>
-                    Start by importing the TLD list from IANA.
-                <?php endif; ?>
-            </p>
-            <?php if (empty($currentFilters['search'])): ?>
-            <form method="POST" action="/tld-registry/start-progressive-import" class="inline">
-                <?= csrf_field() ?>
-                <input type="hidden" name="import_type" value="complete_workflow">
-                <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors font-medium">
-                    <i class="fas fa-rocket mr-2"></i>
-                    Import TLDs
-                </button>
-            </form>
-            <?php endif; ?>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Pagination Controls -->
-<?php if ($pagination['total_pages'] > 1): ?>
-<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?></span>
-    </div>
-    
-    <!-- Pagination Buttons -->
-    <div class="flex items-center gap-1">
-        <?php
-        $currentPage = $pagination['current_page'];
-        $totalPages = $pagination['total_pages'];
-        
-        // Helper function to build pagination URL
-        function paginationUrl($page, $filters, $perPage) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/tld-registry?' . http_build_query($params);
-        }
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-left"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-left"></i> Previous
-            </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2; // Show 2 pages on each side of current page
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        // Show first page + ellipsis if needed
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        // Page numbers
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        // Show last page + ellipsis if needed
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                Next <i class="fas fa-angle-right"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-right"></i>
-            </a>
-        <?php endif; ?>
-    </div>
-</div>
-<?php endif; ?>
-
-<!-- Create TLD Modal -->
-<div id="createTldModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
-    <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
-            <form method="POST" action="/tld-registry/create">
-                <div class="px-6 py-4 border-b border-gray-200">
-                    <h3 class="text-lg font-medium text-gray-900">Create New TLD</h3>
-                </div>
-                
-                <div class="px-6 py-4 space-y-4">
-                    <div>
-                        <label for="create_tld" class="block text-sm font-medium text-gray-700 mb-1">TLD Name</label>
-                        <input type="text" id="create_tld" name="tld" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                               placeholder="e.g., .com, .xyz, .co.uk">
-                        <p class="text-xs text-gray-500 mt-1">The dot prefix will be added automatically. Multi-level TLDs supported (e.g., co.uk, com.au)</p>
-                    </div>
-                    
-                    <div>
-                        <label for="create_whois_server" class="block text-sm font-medium text-gray-700 mb-1">WHOIS Server (Optional)</label>
-                        <input type="text" id="create_whois_server" name="whois_server"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                               placeholder="e.g., whois.verisign-grs.com">
-                    </div>
-                    
-                    <div>
-                        <label for="create_rdap_servers" class="block text-sm font-medium text-gray-700 mb-1">RDAP Servers (Optional)</label>
-                        <textarea id="create_rdap_servers" name="rdap_servers" rows="2"
-                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                  placeholder="e.g., https://rdap.verisign.com/com/v1/"></textarea>
-                        <p class="text-xs text-gray-500 mt-1">One URL per line or comma-separated</p>
-                    </div>
-                    
-                    <div>
-                        <label for="create_registry_url" class="block text-sm font-medium text-gray-700 mb-1">Registry URL (Optional)</label>
-                        <input type="url" id="create_registry_url" name="registry_url"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                               placeholder="e.g., https://www.verisign.com">
-                    </div>
-                </div>
-                
-                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
-                    <button type="button" onclick="closeCreateTldModal()" 
-                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
-                        Cancel
-                    </button>
-                    <button type="submit" 
-                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
-                        Create TLD
-                    </button>
-                </div>
-                
-                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Import TLD Modal -->
-<div id="tldImportModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-    <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-900">
-                <i class="fas fa-upload text-primary mr-2"></i>Import TLDs
-            </h3>
-            <button onclick="document.getElementById('tldImportModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <form method="POST" action="/tld-registry/import" enctype="multipart/form-data" id="tldImportForm">
-            <?= csrf_field() ?>
-            <div class="p-6 space-y-4">
-                <!-- Drag & Drop Zone -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Select File</label>
-                    <div id="tldDropzone" class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50">
-                        <input type="file" name="import_file" accept=".csv,.json" required id="tldFileInput"
-                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
-                        <div id="tldDropzoneContent">
-                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                            <p class="text-sm text-gray-600 font-medium">Drag & drop your file here</p>
-                            <p class="text-xs text-gray-400 my-1">or</p>
-                            <span class="inline-flex items-center px-3 py-1.5 bg-primary text-white text-xs rounded-lg font-medium">
-                                <i class="fas fa-folder-open mr-1.5"></i>Browse Files
-                            </span>
-                            <p class="mt-2.5 text-xs text-gray-400">CSV, JSON &middot; Max <?= \App\Helpers\ViewHelper::getMaxUploadSize() ?></p>
-                        </div>
-                        <div id="tldDropzoneFile" class="hidden">
-                            <i class="fas fa-file-alt text-2xl text-primary mb-1.5"></i>
-                            <p class="text-sm font-medium text-gray-700" id="tldFileName"></p>
-                            <p class="text-xs text-gray-400" id="tldFileSize"></p>
-                            <button type="button" id="tldFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
-                                <i class="fas fa-trash-alt mr-1"></i>Remove
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                    <p class="text-xs text-gray-700 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
-                    <p class="text-xs text-gray-600">CSV columns: <code class="bg-white px-1 rounded">tld, whois_server, rdap_servers, registry_url, is_active</code></p>
-                    <p class="text-xs text-gray-600 mt-0.5">JSON: array of objects with same fields</p>
-                    <p class="text-xs text-gray-500 mt-1">Existing TLDs will be updated. New TLDs will be created as active.</p>
-                </div>
-            </div>
-            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-2 rounded-b-lg">
-                <button type="button" onclick="document.getElementById('tldImportModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
-                    Cancel
-                </button>
-                <button type="submit" id="tldImportBtn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors">
-                    <i class="fas fa-upload mr-1.5"></i>Import TLDs
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
-
-<script>
-function toggleAllCheckboxes(selectAllCheckbox) {
-    const checkboxes = document.querySelectorAll('.tld-checkbox');
-    checkboxes.forEach(checkbox => {
-        checkbox.checked = selectAllCheckbox.checked;
-    });
-    updateSelectedCount();
-}
-
-function updateSelectedCount() {
-    const checkboxes = document.querySelectorAll('.tld-checkbox:checked');
-    const count = checkboxes.length;
-    const bulkActions = document.getElementById('bulk-actions');
-    const selectedCount = document.getElementById('selected-count');
-    const selectAllCheckbox = document.getElementById('select-all');
-    
-    if (count > 0) {
-        bulkActions.classList.remove('hidden');
-        selectedCount.textContent = count + ' TLD(s) selected';
-    } else {
-        bulkActions.classList.add('hidden');
-    }
-    
-    // Update select all checkbox state
-    const allCheckboxes = document.querySelectorAll('.tld-checkbox');
-    if (selectAllCheckbox) {
-        if (count === 0) {
-            selectAllCheckbox.indeterminate = false;
-            selectAllCheckbox.checked = false;
-        } else if (count === allCheckboxes.length) {
-            selectAllCheckbox.indeterminate = false;
-            selectAllCheckbox.checked = true;
-        } else {
-            selectAllCheckbox.indeterminate = true;
-        }
-    }
-}
-
-function clearSelection() {
-    const checkboxes = document.querySelectorAll('.tld-checkbox');
-    checkboxes.forEach(cb => {
-        cb.checked = false;
-    });
-    const selectAllCheckbox = document.getElementById('select-all');
-    if (selectAllCheckbox) {
-        selectAllCheckbox.checked = false;
-    }
-    updateSelectedCount();
-}
-
-function confirmBulkDelete() {
-    const checkboxes = document.querySelectorAll('.tld-checkbox:checked');
-    if (checkboxes.length === 0) {
-        alert('Please select TLDs to delete');
-        return;
-    }
-    
-    if (confirm(`Are you sure you want to delete ${checkboxes.length} selected TLD(s)? This action cannot be undone.`)) {
-        // Add selected checkboxes to form
-        const form = document.getElementById('bulk-delete-form');
-        checkboxes.forEach(checkbox => {
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = 'tld_ids[]';
-            input.value = checkbox.value;
-            form.appendChild(input);
-        });
-        form.submit();
-    }
-}
-
-// Add event listeners to checkboxes
-document.addEventListener('DOMContentLoaded', function() {
-    const checkboxes = document.querySelectorAll('.tld-checkbox');
-    checkboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', updateSelectedCount);
-    });
-    updateSelectedCount();
-});
-
-// Create TLD Modal
-function openCreateTldModal() {
-    document.getElementById('createTldModal').classList.remove('hidden');
-    document.getElementById('create_tld').focus();
-}
-
-function closeCreateTldModal() {
-    document.getElementById('createTldModal').classList.add('hidden');
-    document.querySelector('#createTldModal form').reset();
-}
-
-document.getElementById('createTldModal').addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeCreateTldModal();
-    }
-});
-
-// Import Modal
-document.getElementById('tldImportModal').addEventListener('click', function(e) {
-    if (e.target === this) {
-        document.getElementById('tldImportModal').classList.add('hidden');
-    }
-});
-
-// Close dropdowns when clicking outside
-document.addEventListener('click', function(e) {
-    const exportWrapper = document.getElementById('tldExportDropdownWrapper');
-    if (exportWrapper && !exportWrapper.contains(e.target)) {
-        document.getElementById('tldExportDropdownMenu').classList.add('hidden');
-    }
-    const ianaWrapper = document.getElementById('ianaDropdownWrapper');
-    if (ianaWrapper && !ianaWrapper.contains(e.target)) {
-        document.getElementById('ianaDropdownMenu').classList.add('hidden');
-    }
-});
-
-// Close modals on escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        closeCreateTldModal();
-        document.getElementById('tldImportModal').classList.add('hidden');
-    }
-});
-
-// Import drag-and-drop & loading
-(function() {
-    const dropzone = document.getElementById('tldDropzone');
-    const fileInput = document.getElementById('tldFileInput');
-    const content = document.getElementById('tldDropzoneContent');
-    const fileInfo = document.getElementById('tldDropzoneFile');
-    const fileName = document.getElementById('tldFileName');
-    const fileSize = document.getElementById('tldFileSize');
-    const removeBtn = document.getElementById('tldFileRemove');
-    const form = document.getElementById('tldImportForm');
-    const submitBtn = document.getElementById('tldImportBtn');
-
-    if (!dropzone) return;
-
-    function formatSize(bytes) {
-        if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
-        if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
-        return bytes + ' B';
-    }
-
-    function showFile(file) {
-        fileName.textContent = file.name;
-        fileSize.textContent = formatSize(file.size);
-        content.classList.add('hidden');
-        fileInfo.classList.remove('hidden');
-        dropzone.classList.remove('border-gray-300');
-        dropzone.classList.add('border-primary', 'bg-primary/5');
-    }
-
-    function resetDropzone() {
-        fileInput.value = '';
-        content.classList.remove('hidden');
-        fileInfo.classList.add('hidden');
-        dropzone.classList.add('border-gray-300');
-        dropzone.classList.remove('border-primary', 'bg-primary/5');
-    }
-
-    fileInput.addEventListener('change', function() {
-        if (this.files.length) showFile(this.files[0]);
-    });
-
-    removeBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        resetDropzone();
-    });
-
-    ['dragenter', 'dragover'].forEach(evt => {
-        dropzone.addEventListener(evt, function(e) {
-            e.preventDefault();
-            dropzone.classList.add('border-primary', 'bg-primary/5');
-            dropzone.classList.remove('border-gray-300');
-        });
-    });
-
-    ['dragleave', 'drop'].forEach(evt => {
-        dropzone.addEventListener(evt, function(e) {
-            e.preventDefault();
-            if (!fileInput.files.length) {
-                dropzone.classList.remove('border-primary', 'bg-primary/5');
-                dropzone.classList.add('border-gray-300');
-            }
-        });
-    });
-
-    dropzone.addEventListener('drop', function(e) {
-        e.preventDefault();
-        const files = e.dataTransfer.files;
-        if (files.length) {
-            fileInput.files = files;
-            showFile(files[0]);
-        }
-    });
-
-    form.addEventListener('submit', function() {
-        submitBtn.disabled = true;
-        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1.5"></i>Importing...';
-    });
-})();
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
\ No newline at end of file
diff --git a/app/Views/tld-registry/index.twig b/app/Views/tld-registry/index.twig
new file mode 100644
index 0000000..064daea
--- /dev/null
+++ b/app/Views/tld-registry/index.twig
@@ -0,0 +1,842 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'TLD Registry' %}
+{% set pageTitle = 'TLD Registry' %}
+{% set pageDescription = 'Manage Top-Level Domain registry information' %}
+{% set pageIcon = 'fas fa-database' %}
+
+{% set currentFilters = filters|default({search: '', sort: 'tld', order: 'asc'}) %}
+
+{% block content %}
+
+{# Action Buttons #}
+{% if session.role is defined and session.role == 'admin' %}
+<div class="mb-4 flex flex-wrap gap-2 justify-end">
+    {# IANA Dropdown #}
+    <div class="relative" id="ianaDropdownWrapper">
+        <button onclick="document.getElementById('ianaDropdownMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition-colors font-medium">
+            <i class="fas fa-globe mr-2"></i>
+            IANA
+            <i class="fas fa-chevron-down ml-2 text-xs"></i>
+        </button>
+        <div id="ianaDropdownMenu" class="hidden absolute right-0 mt-1 w-56 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-30 overflow-hidden">
+            <form method="POST" action="/tld-registry/start-progressive-import">
+                {{ csrf_field() }}
+                <input type="hidden" name="import_type" value="complete_workflow">
+                <button type="submit" class="w-full flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors" title="Complete TLD import workflow: TLD List → RDAP → WHOIS → Registry URLs">
+                    <i class="fas fa-rocket text-indigo-600 mr-2.5"></i>
+                    Import TLDs from IANA
+                </button>
+            </form>
+            <form method="POST" action="/tld-registry/start-progressive-import">
+                {{ csrf_field() }}
+                <input type="hidden" name="import_type" value="check_updates">
+                <button type="submit" {{ tldStats.total == 0 ? 'disabled' : '' }} class="w-full flex items-center px-4 py-2.5 text-sm {{ tldStats.total == 0 ? 'text-gray-400 dark:text-slate-500 cursor-not-allowed' : 'text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700' }} transition-colors border-t border-gray-100 dark:border-slate-700" title="{{ tldStats.total == 0 ? 'Import TLDs first' : 'Check for IANA updates' }}">
+                    <i class="fas fa-sync-alt text-blue-600 mr-2.5"></i>
+                    Check for Updates
+                </button>
+            </form>
+            <a href="/tld-registry/import-logs" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors border-t border-gray-100 dark:border-slate-700">
+                <i class="fas fa-history text-gray-500 dark:text-slate-400 mr-2.5"></i>
+                IANA Import Logs
+            </a>
+        </div>
+    </div>
+    {# Export Dropdown #}
+    <div class="relative" id="tldExportDropdownWrapper">
+        <button onclick="document.getElementById('tldExportDropdownMenu').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors font-medium">
+            <i class="fas fa-download mr-2"></i>
+            Export
+            <i class="fas fa-chevron-down ml-2 text-xs"></i>
+        </button>
+        <div id="tldExportDropdownMenu" class="hidden absolute right-0 mt-1 w-44 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-30 overflow-hidden">
+            <a href="/tld-registry/export?format=csv" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
+                <i class="fas fa-file-csv text-green-600 mr-2.5"></i>
+                Export as CSV
+            </a>
+            <a href="/tld-registry/export?format=json" class="flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors border-t border-gray-100 dark:border-slate-700">
+                <i class="fas fa-file-code text-blue-600 mr-2.5"></i>
+                Export as JSON
+            </a>
+        </div>
+    </div>
+    {# Import Button #}
+    <button onclick="document.getElementById('tldImportModal').classList.remove('hidden')" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+        <i class="fas fa-upload mr-2"></i>
+        Import
+    </button>
+    {# Create Button #}
+    <button onclick="openCreateTldModal()" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+        <i class="fas fa-plus mr-2"></i>
+        Create TLD
+    </button>
+</div>
+{% else %}
+<div class="mb-4 bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/30 rounded-lg p-4">
+    <div class="flex items-center">
+        <i class="fas fa-info-circle text-yellow-600 mr-2"></i>
+        <p class="text-sm text-yellow-800 dark:text-yellow-400">
+            View-only mode. Contact admin to import or modify TLD data.
+        </p>
+    </div>
+</div>
+{% endif %}
+
+{# Statistics Cards #}
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    {# Total TLDs Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Total TLDs</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ tldStats.total|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# Active TLDs Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Active</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ tldStats.active|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-green-50 dark:bg-green-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# With RDAP Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">With RDAP</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ tldStats.with_rdap|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-database text-indigo-600 dark:text-indigo-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+
+    {# With WHOIS Card #}
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">With WHOIS</p>
+                <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ tldStats.with_whois|default(0) }}</p>
+            </div>
+            <div class="w-12 h-12 bg-orange-50 dark:bg-orange-500/10 rounded-lg flex items-center justify-center">
+                <i class="fas fa-server text-orange-600 dark:text-orange-400 text-lg"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# Search and Filters #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
+    <form method="GET" action="/tld-registry" id="filter-form">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {# Search #}
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search TLDs</label>
+                <div class="relative">
+                    <input type="text" name="search" id="tldSearch" value="{{ currentFilters.search }}" placeholder="Search TLDs..." class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
+                </div>
+            </div>
+
+            {# Status Filter #}
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="status" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="">All Status</option>
+                    <option value="active" {{ currentFilters.status|default('') == 'active' ? 'selected' : '' }}>Active</option>
+                    <option value="inactive" {{ currentFilters.status|default('') == 'inactive' ? 'selected' : '' }}>Inactive</option>
+                </select>
+            </div>
+
+            {# Data Type Filter #}
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Data Type</label>
+                <select name="data_type" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="">All Types</option>
+                    <option value="with_rdap" {{ currentFilters.data_type|default('') == 'with_rdap' ? 'selected' : '' }}>With RDAP</option>
+                    <option value="with_whois" {{ currentFilters.data_type|default('') == 'with_whois' ? 'selected' : '' }}>With WHOIS</option>
+                    <option value="with_registry" {{ currentFilters.data_type|default('') == 'with_registry' ? 'selected' : '' }}>With Registry URL</option>
+                    <option value="missing_data" {{ currentFilters.data_type|default('') == 'missing_data' ? 'selected' : '' }}>Missing Data</option>
+                </select>
+            </div>
+
+            {# Actions #}
+            <div class="flex items-end space-x-2">
+                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                    <i class="fas fa-filter mr-2"></i>
+                    Apply
+                </button>
+                <a href="/tld-registry" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-times mr-2"></i>
+                    Clear
+                </a>
+            </div>
+        </div>
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+    </form>
+</div>
+
+{# Pagination Info & Per Page Selector #}
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from }}</span> to
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total }}</span> TLD(s)
+    </div>
+
+    <form method="GET" action="/tld-registry" class="flex items-center gap-2">
+        <input type="hidden" name="search" value="{{ currentFilters.search }}">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+            <option value="10" {{ pagination.per_page == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ pagination.per_page == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ pagination.per_page == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ pagination.per_page == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+
+{# TLD Registry Table #}
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    {% if session.role is defined and session.role == 'admin' %}
+    {# Bulk Actions Bar #}
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/30 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
+            <div class="flex items-center gap-3 flex-wrap">
+                <div class="flex items-center gap-2">
+                    <form method="POST" action="/tld-registry/bulk-delete" id="bulk-delete-form" class="inline">
+                        {{ csrf_field() }}
+                        <button type="button" onclick="confirmBulkDelete()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
+                            <i class="fas fa-trash mr-1"></i> Delete Selected
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
+            <i class="fas fa-times mr-1.5"></i> Clear Selection
+        </button>
+    </div>
+    {% endif %}
+    {% if tlds is not empty %}
+        {# Table View (Desktop) #}
+        <div class="hidden lg:block overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+                <thead class="bg-gray-50 dark:bg-slate-900">
+                    <tr>
+                        {% if session.role is defined and session.role == 'admin' %}
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <input type="checkbox" id="select-all" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" onchange="toggleAllCheckboxes(this)">
+                        </th>
+                        {% endif %}
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('tld', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                TLD {{ sort_icon('tld', currentFilters.sort, currentFilters.order)|raw }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('rdap_servers', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                RDAP Servers {{ sort_icon('rdap_servers', currentFilters.sort, currentFilters.order)|raw }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('whois_server', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                WHOIS Server {{ sort_icon('whois_server', currentFilters.sort, currentFilters.order)|raw }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('updated_at', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Last Updated {{ sort_icon('updated_at', currentFilters.sort, currentFilters.order)|raw }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                            <a href="{{ sort_url('is_active', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                                Status {{ sort_icon('is_active', currentFilters.sort, currentFilters.order)|raw }}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                    {% for tld in tlds %}
+                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                            {% if session.role is defined and session.role == 'admin' %}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <input type="checkbox" name="tld_ids[]" value="{{ tld.id }}" class="tld-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
+                            </td>
+                            {% endif %}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
+                                        <i class="fas fa-globe text-primary"></i>
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ tld.tld }}</div>
+                                        {% if tld.registry_url %}
+                                        <div class="text-sm text-gray-500 dark:text-slate-400">
+                                            <a href="{{ tld.registry_url }}" target="_blank" class="text-primary hover:text-primary-dark">
+                                                <i class="fas fa-external-link-alt mr-1"></i>
+                                                Registry
+                                            </a>
+                                        </div>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                {% if tld.rdap_servers %}
+                                    {% set rdapServers = tld.rdap_servers|from_json %}
+                                    {% if rdapServers is iterable and rdapServers is not empty %}
+                                    <div class="text-sm text-gray-900 dark:text-white">
+                                        {% for server in rdapServers|slice(0, 2) %}
+                                        <div class="font-mono text-xs bg-gray-50 dark:bg-slate-700 px-2 py-1 rounded mb-1 text-gray-900 dark:text-white">{{ server }}</div>
+                                        {% endfor %}
+                                        {% if rdapServers|length > 2 %}
+                                        <div class="text-xs text-gray-500 dark:text-slate-400">+{{ rdapServers|length - 2 }} more</div>
+                                        {% endif %}
+                                    </div>
+                                    {% else %}
+                                    <span class="text-sm text-gray-400 dark:text-slate-500">None</span>
+                                    {% endif %}
+                                {% else %}
+                                <span class="text-sm text-gray-400 dark:text-slate-500">None</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if tld.whois_server %}
+                                <div class="text-sm font-mono text-gray-900 dark:text-white bg-gray-50 dark:bg-slate-700 px-2 py-1 rounded">{{ tld.whois_server }}</div>
+                                {% else %}
+                                <span class="text-sm text-gray-400 dark:text-slate-500">None</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                                {% if tld.updated_at %}
+                                <div class="flex items-center">
+                                    <i class="far fa-clock mr-2"></i>
+                                    {{ tld.updated_at|date('M d, H:i') }}
+                                </div>
+                                {% else %}
+                                <span class="text-gray-400 dark:text-slate-500">Never</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ tld.is_active ? 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-500/30' : 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 border-gray-200 dark:border-slate-600' }}">
+                                    <i class="fas {{ tld.is_active ? 'fa-check-circle' : 'fa-pause-circle' }} mr-1"></i>
+                                    {{ tld.is_active ? 'Active' : 'Inactive' }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <div class="flex items-center justify-end space-x-2">
+                                    <a href="/tld-registry/{{ tld.id }}" class="text-blue-600 hover:text-blue-800" title="View">
+                                        <i class="fas fa-eye"></i>
+                                    </a>
+                                    {% if session.role is defined and session.role == 'admin' %}
+                                    <a href="/tld-registry/{{ tld.id }}/refresh" class="text-green-600 hover:text-green-800" title="Refresh" onclick="return confirm('Refresh TLD data from IANA?')">
+                                        <i class="fas fa-sync-alt"></i>
+                                    </a>
+                                    <a href="/tld-registry/{{ tld.id }}/toggle-active" class="text-orange-600 hover:text-orange-800" title="Toggle Status" onclick="return confirm('Toggle TLD status?')">
+                                        <i class="fas fa-power-off"></i>
+                                    </a>
+                                    {% endif %}
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        {# Card View (Mobile) #}
+        <div class="lg:hidden divide-y divide-gray-200 dark:divide-slate-700">
+            {% for tld in tlds %}
+                <div class="p-6 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-3">
+                                <i class="fas fa-globe text-primary"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold text-gray-900 dark:text-white">{{ tld.tld }}</h3>
+                                {% if tld.registry_url %}
+                                <a href="{{ tld.registry_url }}" target="_blank" class="text-xs text-primary hover:text-primary-dark">
+                                    <i class="fas fa-external-link-alt mr-1"></i>
+                                    Registry
+                                </a>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold {{ tld.is_active ? 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400' : 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300' }}">
+                            {{ tld.is_active ? 'Active' : 'Inactive' }}
+                        </span>
+                    </div>
+
+                    <div class="space-y-2 text-sm">
+                        {% if tld.rdap_servers %}
+                            {% set rdapServers = tld.rdap_servers|from_json %}
+                            {% if rdapServers is iterable and rdapServers is not empty %}
+                            <div class="flex items-start">
+                                <i class="fas fa-database text-gray-400 dark:text-slate-500 mr-2 w-4 mt-0.5"></i>
+                                <div class="flex-1">
+                                    <div class="font-mono text-xs bg-gray-50 dark:bg-slate-700 px-2 py-1 rounded mb-1 text-gray-900 dark:text-white">{{ rdapServers[0] }}</div>
+                                    {% if rdapServers|length > 1 %}
+                                    <div class="text-xs text-gray-500 dark:text-slate-400">+{{ rdapServers|length - 1 }} more RDAP server(s)</div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+
+                        {% if tld.whois_server %}
+                        <div class="flex items-center">
+                            <i class="fas fa-server text-gray-400 dark:text-slate-500 mr-2 w-4"></i>
+                            <span class="font-mono text-xs bg-gray-50 dark:bg-slate-700 px-2 py-1 rounded text-gray-900 dark:text-white">{{ tld.whois_server }}</span>
+                        </div>
+                        {% endif %}
+
+                        <div class="flex items-center">
+                            <i class="far fa-clock text-gray-400 dark:text-slate-500 mr-2 w-4"></i>
+                            <span class="text-gray-500 dark:text-slate-400">{{ tld.updated_at ? tld.updated_at|date('M d, H:i') : 'Never updated' }}</span>
+                        </div>
+                    </div>
+
+                    <div class="flex space-x-2 mt-3">
+                        <a href="/tld-registry/{{ tld.id }}" class="{{ (session.role is defined and session.role == 'admin') ? 'flex-1' : 'w-full' }} px-3 py-1.5 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded text-center text-sm hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
+                            <i class="fas fa-eye mr-1"></i> View
+                        </a>
+                        {% if session.role is defined and session.role == 'admin' %}
+                        <a href="/tld-registry/{{ tld.id }}/refresh" class="flex-1 px-3 py-1.5 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded text-center text-sm hover:bg-green-100 dark:hover:bg-green-500/20 transition-colors" onclick="return confirm('Refresh TLD data?')">
+                            <i class="fas fa-sync-alt mr-1"></i> Refresh
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="text-center py-12 px-6">
+            <div class="mb-4">
+                <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-6xl"></i>
+            </div>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No TLDs Found</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">
+                {% if currentFilters.search is not empty %}
+                    No TLDs match your search criteria.
+                {% else %}
+                    Start by importing the TLD list from IANA.
+                {% endif %}
+            </p>
+            {% if currentFilters.search is empty %}
+            <form method="POST" action="/tld-registry/start-progressive-import" class="inline">
+                {{ csrf_field() }}
+                <input type="hidden" name="import_type" value="complete_workflow">
+                <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors font-medium">
+                    <i class="fas fa-rocket mr-2"></i>
+                    Import TLDs
+                </button>
+            </form>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>
+
+{# Pagination Controls #}
+{% if pagination.total_pages > 1 %}
+<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.current_page }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total_pages }}</span>
+    </div>
+
+    <div class="flex items-center gap-1">
+        {% set currentPage = pagination.current_page %}
+        {% set totalPages = pagination.total_pages %}
+
+        {# First Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-left"></i>
+            </a>
+        {% endif %}
+
+        {# Previous Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(currentPage - 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-left"></i> Previous
+            </a>
+        {% endif %}
+
+        {# Page Numbers #}
+        {% set range = 2 %}
+        {% set start = max(1, currentPage - range) %}
+        {% set end = min(totalPages, currentPage + range) %}
+
+        {% if start > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if start > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+
+        {% for i in start..end %}
+            {% if i == currentPage %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if end < totalPages %}
+            {% if end < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+
+        {# Next Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(currentPage + 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                Next <i class="fas fa-angle-right"></i>
+            </a>
+        {% endif %}
+
+        {# Last Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+{# Create TLD Modal #}
+<div id="createTldModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
+            <form method="POST" action="/tld-registry/create">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Create New TLD</h3>
+                </div>
+
+                <div class="px-6 py-4 space-y-4">
+                    <div>
+                        <label for="create_tld" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">TLD Name</label>
+                        <input type="text" id="create_tld" name="tld" required
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
+                               placeholder="e.g., .com, .xyz, .co.uk">
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">The dot prefix will be added automatically. Multi-level TLDs supported (e.g., co.uk, com.au)</p>
+                    </div>
+
+                    <div>
+                        <label for="create_whois_server" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">WHOIS Server (Optional)</label>
+                        <input type="text" id="create_whois_server" name="whois_server"
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
+                               placeholder="e.g., whois.verisign-grs.com">
+                    </div>
+
+                    <div>
+                        <label for="create_rdap_servers" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">RDAP Servers (Optional)</label>
+                        <textarea id="create_rdap_servers" name="rdap_servers" rows="2"
+                                  class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
+                                  placeholder="e.g., https://rdap.verisign.com/com/v1/"></textarea>
+                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">One URL per line or comma-separated</p>
+                    </div>
+
+                    <div>
+                        <label for="create_registry_url" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">Registry URL (Optional)</label>
+                        <input type="url" id="create_registry_url" name="registry_url"
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
+                               placeholder="e.g., https://www.verisign.com">
+                    </div>
+                </div>
+
+                <div class="px-6 py-4 bg-gray-50 dark:bg-slate-900 flex justify-end space-x-3 rounded-b-lg">
+                    <button type="button" onclick="closeCreateTldModal()"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-md hover:bg-gray-50 dark:hover:bg-slate-700">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
+                        Create TLD
+                    </button>
+                </div>
+
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            </form>
+        </div>
+    </div>
+</div>
+
+{# Import TLD Modal #}
+<div id="tldImportModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                <i class="fas fa-upload text-primary mr-2"></i>Import TLDs
+            </h3>
+            <button onclick="document.getElementById('tldImportModal').classList.add('hidden')" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <form method="POST" action="/tld-registry/import" enctype="multipart/form-data" id="tldImportForm">
+            {{ csrf_field() }}
+            <div class="p-6 space-y-4">
+                {# Drag & Drop Zone #}
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">Select File</label>
+                    <div id="tldDropzone" class="relative border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-6 text-center cursor-pointer transition-all hover:border-primary hover:bg-gray-50 dark:hover:bg-slate-700">
+                        <input type="file" name="import_file" accept=".csv,.json" required id="tldFileInput"
+                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                        <div id="tldDropzoneContent">
+                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 dark:text-slate-500 mb-2"></i>
+                            <p class="text-sm text-gray-600 dark:text-slate-400 font-medium">Drag & drop your file here</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 my-1">or</p>
+                            <span class="inline-flex items-center px-3 py-1.5 bg-primary text-white text-xs rounded-lg font-medium">
+                                <i class="fas fa-folder-open mr-1.5"></i>Browse Files
+                            </span>
+                            <p class="mt-2.5 text-xs text-gray-400 dark:text-slate-500">CSV, JSON &middot; Max {{ max_upload_size() }}</p>
+                        </div>
+                        <div id="tldDropzoneFile" class="hidden">
+                            <i class="fas fa-file-alt text-2xl text-primary mb-1.5"></i>
+                            <p class="text-sm font-medium text-gray-700 dark:text-slate-300" id="tldFileName"></p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500" id="tldFileSize"></p>
+                            <button type="button" id="tldFileRemove" class="mt-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
+                                <i class="fas fa-trash-alt mr-1"></i>Remove
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-3">
+                    <p class="text-xs text-gray-700 dark:text-slate-300 font-medium mb-1"><i class="fas fa-info-circle text-blue-500 mr-1"></i> Expected Format</p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400">CSV columns: <code class="bg-white dark:bg-slate-800 px-1 rounded">tld, whois_server, rdap_servers, registry_url, is_active</code></p>
+                    <p class="text-xs text-gray-600 dark:text-slate-400 mt-0.5">JSON: array of objects with same fields</p>
+                    <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Existing TLDs will be updated. New TLDs will be created as active.</p>
+                </div>
+            </div>
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 flex justify-end gap-2 rounded-b-lg">
+                <button type="button" onclick="document.getElementById('tldImportModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
+                    Cancel
+                </button>
+                <button type="submit" id="tldImportBtn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors">
+                    <i class="fas fa-upload mr-1.5"></i>Import TLDs
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+function toggleAllCheckboxes(selectAllCheckbox) {
+    const checkboxes = document.querySelectorAll('.tld-checkbox');
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = selectAllCheckbox.checked;
+    });
+    updateSelectedCount();
+}
+
+function updateSelectedCount() {
+    const checkboxes = document.querySelectorAll('.tld-checkbox:checked');
+    const count = checkboxes.length;
+    const bulkActions = document.getElementById('bulk-actions');
+    const selectedCount = document.getElementById('selected-count');
+    const selectAllCheckbox = document.getElementById('select-all');
+
+    if (count > 0) {
+        bulkActions.classList.remove('hidden');
+        selectedCount.textContent = count + ' TLD(s) selected';
+    } else {
+        bulkActions.classList.add('hidden');
+    }
+
+    const allCheckboxes = document.querySelectorAll('.tld-checkbox');
+    if (selectAllCheckbox) {
+        if (count === 0) {
+            selectAllCheckbox.indeterminate = false;
+            selectAllCheckbox.checked = false;
+        } else if (count === allCheckboxes.length) {
+            selectAllCheckbox.indeterminate = false;
+            selectAllCheckbox.checked = true;
+        } else {
+            selectAllCheckbox.indeterminate = true;
+        }
+    }
+}
+
+function clearSelection() {
+    const checkboxes = document.querySelectorAll('.tld-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = false;
+    });
+    const selectAllCheckbox = document.getElementById('select-all');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.checked = false;
+    }
+    updateSelectedCount();
+}
+
+function confirmBulkDelete() {
+    const checkboxes = document.querySelectorAll('.tld-checkbox:checked');
+    if (checkboxes.length === 0) {
+        alert('Please select TLDs to delete');
+        return;
+    }
+
+    if (confirm(`Are you sure you want to delete ${checkboxes.length} selected TLD(s)? This action cannot be undone.`)) {
+        const form = document.getElementById('bulk-delete-form');
+        checkboxes.forEach(checkbox => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = 'tld_ids[]';
+            input.value = checkbox.value;
+            form.appendChild(input);
+        });
+        form.submit();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const checkboxes = document.querySelectorAll('.tld-checkbox');
+    checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', updateSelectedCount);
+    });
+    updateSelectedCount();
+});
+
+function openCreateTldModal() {
+    document.getElementById('createTldModal').classList.remove('hidden');
+    document.getElementById('create_tld').focus();
+}
+
+function closeCreateTldModal() {
+    document.getElementById('createTldModal').classList.add('hidden');
+    document.querySelector('#createTldModal form').reset();
+}
+
+document.getElementById('createTldModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeCreateTldModal();
+    }
+});
+
+document.getElementById('tldImportModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        document.getElementById('tldImportModal').classList.add('hidden');
+    }
+});
+
+document.addEventListener('click', function(e) {
+    const exportWrapper = document.getElementById('tldExportDropdownWrapper');
+    if (exportWrapper && !exportWrapper.contains(e.target)) {
+        document.getElementById('tldExportDropdownMenu').classList.add('hidden');
+    }
+    const ianaWrapper = document.getElementById('ianaDropdownWrapper');
+    if (ianaWrapper && !ianaWrapper.contains(e.target)) {
+        document.getElementById('ianaDropdownMenu').classList.add('hidden');
+    }
+});
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeCreateTldModal();
+        document.getElementById('tldImportModal').classList.add('hidden');
+    }
+});
+
+(function() {
+    const dropzone = document.getElementById('tldDropzone');
+    const fileInput = document.getElementById('tldFileInput');
+    const content = document.getElementById('tldDropzoneContent');
+    const fileInfo = document.getElementById('tldDropzoneFile');
+    const fileName = document.getElementById('tldFileName');
+    const fileSize = document.getElementById('tldFileSize');
+    const removeBtn = document.getElementById('tldFileRemove');
+    const form = document.getElementById('tldImportForm');
+    const submitBtn = document.getElementById('tldImportBtn');
+
+    if (!dropzone) return;
+
+    function formatSize(bytes) {
+        if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+        if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        return bytes + ' B';
+    }
+
+    function showFile(file) {
+        fileName.textContent = file.name;
+        fileSize.textContent = formatSize(file.size);
+        content.classList.add('hidden');
+        fileInfo.classList.remove('hidden');
+        dropzone.classList.remove('border-gray-300');
+        dropzone.classList.add('border-primary', 'bg-primary/5');
+    }
+
+    function resetDropzone() {
+        fileInput.value = '';
+        content.classList.remove('hidden');
+        fileInfo.classList.add('hidden');
+        dropzone.classList.add('border-gray-300');
+        dropzone.classList.remove('border-primary', 'bg-primary/5');
+    }
+
+    fileInput.addEventListener('change', function() {
+        if (this.files.length) showFile(this.files[0]);
+    });
+
+    removeBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        resetDropzone();
+    });
+
+    ['dragenter', 'dragover'].forEach(evt => {
+        dropzone.addEventListener(evt, function(e) {
+            e.preventDefault();
+            dropzone.classList.add('border-primary', 'bg-primary/5');
+            dropzone.classList.remove('border-gray-300');
+        });
+    });
+
+    ['dragleave', 'drop'].forEach(evt => {
+        dropzone.addEventListener(evt, function(e) {
+            e.preventDefault();
+            if (!fileInput.files.length) {
+                dropzone.classList.remove('border-primary', 'bg-primary/5');
+                dropzone.classList.add('border-gray-300');
+            }
+        });
+    });
+
+    dropzone.addEventListener('drop', function(e) {
+        e.preventDefault();
+        const files = e.dataTransfer.files;
+        if (files.length) {
+            fileInput.files = files;
+            showFile(files[0]);
+        }
+    });
+
+    form.addEventListener('submit', function() {
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1.5"></i>Importing...';
+    });
+})();
+</script>
+
+{% endblock %}
diff --git a/app/Views/tld-registry/view.php b/app/Views/tld-registry/view.php
deleted file mode 100644
index c276dad..0000000
--- a/app/Views/tld-registry/view.php
+++ /dev/null
@@ -1,427 +0,0 @@
-<?php
-$title = 'TLD Details';
-$pageTitle = htmlspecialchars($tld['tld']);
-$pageDescription = 'TLD registry information and server details';
-$pageIcon = 'fas fa-globe';
-ob_start();
-?>
-
-<!-- Top Action Bar -->
-<div class="mb-3 flex flex-wrap gap-2 justify-between items-center">
-    <div class="flex gap-2">
-        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-primary text-white">
-            <i class="fas fa-globe mr-1.5"></i>
-            TLD Registry
-        </span>
-        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold <?= $tld['is_active'] ? 'bg-green-100 text-green-700 border border-green-200' : 'bg-gray-100 text-gray-700 border border-gray-200' ?>">
-            <i class="fas <?= $tld['is_active'] ? 'fa-check-circle' : 'fa-pause-circle' ?> mr-1.5"></i>
-            <?= $tld['is_active'] ? 'Active' : 'Inactive' ?>
-        </span>
-    </div>
-    <div class="flex gap-2 items-center">
-        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-        <a href="/tld-registry/<?= $tld['id'] ?>/refresh" class="inline-flex items-center justify-center px-3 py-2 bg-green-600 text-white text-xs rounded-lg hover:bg-green-700 transition-colors font-medium min-w-[80px] h-[32px]" onclick="return confirm('Refresh TLD data from IANA?')">
-            <i class="fas fa-sync-alt mr-1.5"></i>
-            Refresh
-        </a>
-        <a href="/tld-registry/<?= $tld['id'] ?>/toggle-active" class="inline-flex items-center justify-center px-3 py-2 bg-orange-600 text-white text-xs rounded-lg hover:bg-orange-700 transition-colors font-medium min-w-[80px] h-[32px]" onclick="return confirm('Toggle TLD status?')">
-            <i class="fas fa-power-off mr-1.5"></i>
-            Toggle
-        </a>
-        <?php endif; ?>
-        <a href="/tld-registry" class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 text-gray-700 text-xs rounded-lg hover:bg-gray-50 transition-colors font-medium min-w-[80px] h-[32px]">
-            <i class="fas fa-arrow-left mr-1.5"></i>
-            Back
-        </a>
-    </div>
-</div>
-
-<!-- Main 2-Column Layout -->
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
-    
-    <!-- LEFT COLUMN -->
-    <div class="space-y-3">
-        
-        <!-- TLD Information -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-info-circle text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    TLD Information
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">TLD</label>
-                        <p class="text-gray-900 font-semibold"><?= htmlspecialchars($tld['tld']) ?></p>
-                    </div>
-                    <?php if ($tld['registry_url']): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Registry URL</label>
-                        <a href="<?= htmlspecialchars($tld['registry_url']) ?>" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
-                            <i class="fas fa-external-link-alt mr-1" style="font-size: 9px;"></i>
-                            Visit Registry
-                        </a>
-                    </div>
-                    <?php endif; ?>
-                    <?php if ($tld['registration_date']): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Registration Date</label>
-                        <p class="text-gray-900"><?= date('M j, Y', strtotime($tld['registration_date'])) ?></p>
-                    </div>
-                    <?php endif; ?>
-                    <?php if ($tld['record_last_updated']): ?>
-                    <div>
-                        <label class="text-gray-500 font-medium block mb-0.5">Record Last Updated</label>
-                        <p class="text-gray-900"><?= date('M j, Y', strtotime($tld['record_last_updated'])) ?></p>
-                    </div>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <!-- RDAP Servers -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-database text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    RDAP Servers
-                    <?php if ($tld['rdap_servers']): ?>
-                        <?php 
-                        $rdapServers = json_decode($tld['rdap_servers'], true);
-                        if (is_array($rdapServers) && !empty($rdapServers)):
-                        ?>
-                        (<?= count($rdapServers) ?>)
-                        <?php endif; ?>
-                    <?php endif; ?>
-                </h3>
-                <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                <button onclick="openEditRdapModal()" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors font-medium">
-                    <i class="fas fa-edit mr-1" style="font-size: 9px;"></i>
-                    Edit
-                </button>
-                <?php endif; ?>
-            </div>
-            <div class="p-4">
-                <?php if ($tld['rdap_servers']): ?>
-                    <?php 
-                    $rdapServers = json_decode($tld['rdap_servers'], true);
-                    if (is_array($rdapServers) && !empty($rdapServers)):
-                    ?>
-                    <div class="space-y-1.5">
-                        <?php foreach ($rdapServers as $index => $server): ?>
-                        <div class="flex items-center p-2 bg-gray-50 rounded hover:bg-gray-100 transition-colors">
-                            <div class="w-6 h-6 bg-indigo-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
-                                <?= $index + 1 ?>
-                            </div>
-                            <p class="font-mono text-xs text-gray-800"><?= htmlspecialchars($server) ?></p>
-                        </div>
-                        <?php endforeach; ?>
-                    </div>
-                    <?php else: ?>
-                    <p class="text-xs text-gray-400 italic">No RDAP servers configured</p>
-                    <?php endif; ?>
-                <?php else: ?>
-                <p class="text-xs text-gray-400 italic">No RDAP servers configured</p>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <!-- WHOIS Server -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-server text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    WHOIS Server
-                </h3>
-                <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                <button onclick="openEditWhoisModal()" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors font-medium">
-                    <i class="fas fa-edit mr-1" style="font-size: 9px;"></i>
-                    Edit
-                </button>
-                <?php endif; ?>
-            </div>
-            <div class="p-4">
-                <?php if ($tld['whois_server']): ?>
-                <div class="flex items-center p-2 bg-gray-50 rounded">
-                    <div class="w-6 h-6 bg-orange-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
-                        <i class="fas fa-server"></i>
-                    </div>
-                    <p class="font-mono text-xs text-gray-800"><?= htmlspecialchars($tld['whois_server']) ?></p>
-                </div>
-                <?php else: ?>
-                <p class="text-xs text-gray-400 italic">No WHOIS server configured</p>
-                <?php endif; ?>
-            </div>
-        </div>
-
-    </div>
-
-    <!-- RIGHT COLUMN -->
-    <div class="space-y-3">
-        
-        <!-- Import History -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-history text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Import History
-                </h3>
-            </div>
-            <div class="p-4">
-                <div class="space-y-2">
-                    <div class="flex items-center p-2 bg-blue-50 rounded border border-blue-200">
-                        <div class="w-7 h-7 bg-blue-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-plus text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">Created</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y H:i', strtotime($tld['created_at'])) ?></p>
-                        </div>
-                    </div>
-
-                    <?php if ($tld['updated_at']): ?>
-                    <div class="flex items-center p-2 bg-green-50 rounded border border-green-200">
-                        <div class="w-7 h-7 bg-green-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-sync text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">Last Updated</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y H:i', strtotime($tld['updated_at'])) ?></p>
-                        </div>
-                    </div>
-                    <?php endif; ?>
-
-                    <?php if ($tld['iana_publication_date']): ?>
-                    <div class="flex items-center p-2 bg-indigo-50 rounded border border-indigo-200">
-                        <div class="w-7 h-7 bg-indigo-500 rounded flex items-center justify-center mr-2">
-                            <i class="fas fa-calendar text-white text-xs"></i>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 font-medium">IANA Publication</p>
-                            <p class="text-xs font-semibold text-gray-900"><?= date('M j, Y H:i', strtotime($tld['iana_publication_date'])) ?></p>
-                        </div>
-                    </div>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <!-- Quick Actions -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <div class="px-4 py-2 border-b border-gray-200 bg-gray-50">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
-                    <i class="fas fa-bolt text-gray-400 mr-2" style="font-size: 10px;"></i>
-                    Quick Actions
-                </h3>
-            </div>
-            <div class="p-4 space-y-2">
-                <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-                <a href="/tld-registry/<?= $tld['id'] ?>/refresh" class="flex items-center p-3 border border-gray-200 hover:border-green-500 hover:bg-green-50 rounded-lg transition-all duration-200 group" onclick="return confirm('Refresh TLD data from IANA?')">
-                    <div class="w-9 h-9 bg-green-50 group-hover:bg-green-500 rounded-lg flex items-center justify-center group-hover:text-white text-green-600 transition-colors duration-200">
-                        <i class="fas fa-sync-alt text-sm"></i>
-                    </div>
-                    <span class="ml-3 text-sm font-medium text-gray-700 group-hover:text-green-700">Refresh from IANA</span>
-                </a>
-                <a href="/tld-registry/<?= $tld['id'] ?>/toggle-active" class="flex items-center p-3 border border-gray-200 hover:border-orange-500 hover:bg-orange-50 rounded-lg transition-all duration-200 group" onclick="return confirm('Toggle TLD status?')">
-                    <div class="w-9 h-9 bg-orange-50 group-hover:bg-orange-500 rounded-lg flex items-center justify-center group-hover:text-white text-orange-600 transition-colors duration-200">
-                        <i class="fas fa-power-off text-sm"></i>
-                    </div>
-                    <span class="ml-3 text-sm font-medium text-gray-700 group-hover:text-orange-700">Toggle Status</span>
-                </a>
-                <?php endif; ?>
-                <?php if ($tld['registry_url']): ?>
-                <a href="<?= htmlspecialchars($tld['registry_url']) ?>" target="_blank" class="flex items-center p-3 border border-gray-200 hover:border-blue-500 hover:bg-blue-50 rounded-lg transition-all duration-200 group">
-                    <div class="w-9 h-9 bg-blue-50 group-hover:bg-blue-500 rounded-lg flex items-center justify-center group-hover:text-white text-blue-600 transition-colors duration-200">
-                        <i class="fas fa-external-link-alt text-sm"></i>
-                    </div>
-                    <span class="ml-3 text-sm font-medium text-gray-700 group-hover:text-blue-700">Visit Registry</span>
-                </a>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <!-- Raw Data (Collapsible) -->
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <button onclick="toggleRawData()" class="w-full px-4 py-2 border-b border-gray-200 bg-gray-50 text-left hover:bg-gray-100 transition-colors">
-                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center justify-between">
-                    <span class="flex items-center">
-                        <i class="fas fa-code text-gray-400 mr-2" style="font-size: 10px;"></i>
-                        Raw TLD Data
-                    </span>
-                    <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="raw-data-chevron"></i>
-                </h3>
-            </button>
-            <div id="raw-data" class="hidden p-4 bg-gray-900 max-h-64 overflow-y-auto">
-                <pre class="text-xs text-green-400 font-mono"><?= htmlspecialchars(json_encode([
-                    'tld' => $tld['tld'],
-                    'rdap_servers' => $tld['rdap_servers'] ? json_decode($tld['rdap_servers'], true) : null,
-                    'whois_server' => $tld['whois_server'],
-                    'registry_url' => $tld['registry_url'],
-                    'registration_date' => $tld['registration_date'],
-                    'record_last_updated' => $tld['record_last_updated'],
-                    'iana_publication_date' => $tld['iana_publication_date'],
-                    'is_active' => $tld['is_active'],
-                    'created_at' => $tld['created_at'],
-                    'updated_at' => $tld['updated_at']
-                ], JSON_PRETTY_PRINT)) ?></pre>
-            </div>
-        </div>
-
-    </div>
-
-</div>
-
-<!-- Edit WHOIS Server Modal -->
-<?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-<div id="editWhoisModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-    <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-server text-orange-600 mr-2"></i>
-                Edit WHOIS Server
-            </h3>
-            <button onclick="closeEditWhoisModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <form method="POST" action="/tld-registry/<?= $tld['id'] ?>/update-whois-server" class="p-6">
-            <?= csrf_field() ?>
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-2">
-                    WHOIS Server
-                </label>
-                <input type="text" 
-                       name="whois_server" 
-                       id="whois_server_input"
-                       value="<?= htmlspecialchars($tld['whois_server'] ?? '') ?>"
-                       placeholder="whois.example.com"
-                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
-                <p class="mt-1.5 text-xs text-gray-500">
-                    Enter the WHOIS server hostname (e.g., whois.example.com). Leave empty to remove.
-                </p>
-            </div>
-            <div class="flex gap-3">
-                <button type="submit" 
-                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors text-sm">
-                    <i class="fas fa-save mr-2"></i>
-                    Save Changes
-                </button>
-                <button type="button" 
-                        onclick="closeEditWhoisModal()"
-                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
-                    <i class="fas fa-times mr-2"></i>
-                    Cancel
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
-
-<!-- Edit RDAP Servers Modal -->
-<div id="editRdapModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-    <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-database text-indigo-600 mr-2"></i>
-                Edit RDAP Servers
-            </h3>
-            <button onclick="closeEditRdapModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <form method="POST" action="/tld-registry/<?= $tld['id'] ?>/update-rdap-servers" class="p-6">
-            <?= csrf_field() ?>
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-2">
-                    RDAP Servers
-                </label>
-                <textarea name="rdap_servers" 
-                          id="rdap_servers_input"
-                          rows="6"
-                          placeholder="https://rdap.example.com/&#10;https://rdap2.example.com/"
-                          class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm font-mono"><?php
-                    if ($tld['rdap_servers']):
-                        $rdapServers = json_decode($tld['rdap_servers'], true);
-                        if (is_array($rdapServers) && !empty($rdapServers)):
-                            echo htmlspecialchars(implode("\n", $rdapServers));
-                        endif;
-                    endif;
-                ?></textarea>
-                <p class="mt-1.5 text-xs text-gray-500">
-                    Enter RDAP server URLs (one per line or comma-separated). Must start with http:// or https://. Leave empty to remove all servers.
-                </p>
-            </div>
-            <div class="flex gap-3">
-                <button type="submit" 
-                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
-                    <i class="fas fa-save mr-2"></i>
-                    Save Changes
-                </button>
-                <button type="button" 
-                        onclick="closeEditRdapModal()"
-                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
-                    <i class="fas fa-times mr-2"></i>
-                    Cancel
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
-<?php endif; ?>
-
-<script>
-function toggleRawData() {
-    const dataDiv = document.getElementById('raw-data');
-    const chevron = document.getElementById('raw-data-chevron');
-    dataDiv.classList.toggle('hidden');
-    chevron.classList.toggle('rotate-180');
-}
-
-<?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
-function openEditWhoisModal() {
-    document.getElementById('editWhoisModal').classList.remove('hidden');
-    document.getElementById('whois_server_input').focus();
-}
-
-function closeEditWhoisModal() {
-    document.getElementById('editWhoisModal').classList.add('hidden');
-}
-
-function openEditRdapModal() {
-    document.getElementById('editRdapModal').classList.remove('hidden');
-    document.getElementById('rdap_servers_input').focus();
-}
-
-function closeEditRdapModal() {
-    document.getElementById('editRdapModal').classList.add('hidden');
-}
-
-// Close modals on Escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        closeEditWhoisModal();
-        closeEditRdapModal();
-    }
-});
-
-// Close modals when clicking outside
-document.getElementById('editWhoisModal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeEditWhoisModal();
-    }
-});
-
-document.getElementById('editRdapModal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeEditRdapModal();
-    }
-});
-<?php endif; ?>
-</script>
-
-<?php
-$content = ob_get_clean();
-include __DIR__ . '/../layout/base.php';
-?>
\ No newline at end of file
diff --git a/app/Views/tld-registry/view.twig b/app/Views/tld-registry/view.twig
new file mode 100644
index 0000000..52ee184
--- /dev/null
+++ b/app/Views/tld-registry/view.twig
@@ -0,0 +1,420 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'TLD Details' %}
+{% set pageTitle = tld.tld %}
+{% set pageDescription = 'TLD registry information and server details' %}
+{% set pageIcon = 'fas fa-globe' %}
+
+{% block content %}
+
+{# Top Action Bar #}
+<div class="mb-3 flex flex-wrap gap-2 justify-between items-center">
+    <div class="flex gap-2">
+        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold bg-primary text-white">
+            <i class="fas fa-globe mr-1.5"></i>
+            TLD Registry
+        </span>
+        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold {{ tld.is_active ? 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-500/30' : 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 border border-gray-200 dark:border-slate-600' }}">
+            <i class="fas {{ tld.is_active ? 'fa-check-circle' : 'fa-pause-circle' }} mr-1.5"></i>
+            {{ tld.is_active ? 'Active' : 'Inactive' }}
+        </span>
+    </div>
+    <div class="flex gap-2 items-center">
+        {% if session.role is defined and session.role == 'admin' %}
+        <a href="/tld-registry/{{ tld.id }}/refresh" class="inline-flex items-center justify-center px-3 py-2 bg-green-600 text-white text-xs rounded-lg hover:bg-green-700 transition-colors font-medium min-w-[80px] h-[32px]" onclick="return confirm('Refresh TLD data from IANA?')">
+            <i class="fas fa-sync-alt mr-1.5"></i>
+            Refresh
+        </a>
+        <a href="/tld-registry/{{ tld.id }}/toggle-active" class="inline-flex items-center justify-center px-3 py-2 bg-orange-600 text-white text-xs rounded-lg hover:bg-orange-700 transition-colors font-medium min-w-[80px] h-[32px]" onclick="return confirm('Toggle TLD status?')">
+            <i class="fas fa-power-off mr-1.5"></i>
+            Toggle
+        </a>
+        {% endif %}
+        <a href="/tld-registry" class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-xs rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium min-w-[80px] h-[32px]">
+            <i class="fas fa-arrow-left mr-1.5"></i>
+            Back
+        </a>
+    </div>
+</div>
+
+{# Main 2-Column Layout #}
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+
+    {# LEFT COLUMN #}
+    <div class="space-y-3">
+
+        {# TLD Information #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-info-circle text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    TLD Information
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">TLD</label>
+                        <p class="text-gray-900 dark:text-white font-semibold">{{ tld.tld }}</p>
+                    </div>
+                    {% if tld.registry_url %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Registry URL</label>
+                        <a href="{{ tld.registry_url }}" target="_blank" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center">
+                            <i class="fas fa-external-link-alt mr-1" style="font-size: 9px;"></i>
+                            Visit Registry
+                        </a>
+                    </div>
+                    {% endif %}
+                    {% if tld.registration_date %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Registration Date</label>
+                        <p class="text-gray-900 dark:text-white">{{ tld.registration_date|date('M j, Y') }}</p>
+                    </div>
+                    {% endif %}
+                    {% if tld.record_last_updated %}
+                    <div>
+                        <label class="text-gray-500 dark:text-slate-400 font-medium block mb-0.5">Record Last Updated</label>
+                        <p class="text-gray-900 dark:text-white">{{ tld.record_last_updated|date('M j, Y') }}</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        {# RDAP Servers #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 flex items-center justify-between">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-database text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    RDAP Servers
+                    {% if tld.rdap_servers %}
+                        {% set rdapServers = tld.rdap_servers|from_json %}
+                        {% if rdapServers is iterable and rdapServers is not empty %}
+                        ({{ rdapServers|length }})
+                        {% endif %}
+                    {% endif %}
+                </h3>
+                {% if session.role is defined and session.role == 'admin' %}
+                <button onclick="openEditRdapModal()" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors font-medium">
+                    <i class="fas fa-edit mr-1" style="font-size: 9px;"></i>
+                    Edit
+                </button>
+                {% endif %}
+            </div>
+            <div class="p-4">
+                {% if tld.rdap_servers %}
+                    {% set rdapServers = tld.rdap_servers|from_json %}
+                    {% if rdapServers is iterable and rdapServers is not empty %}
+                    <div class="space-y-1.5">
+                        {% for server in rdapServers %}
+                        <div class="flex items-center p-2 bg-gray-50 dark:bg-slate-700 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors">
+                            <div class="w-6 h-6 bg-indigo-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
+                                {{ loop.index }}
+                            </div>
+                            <p class="font-mono text-xs text-gray-800 dark:text-slate-200">{{ server }}</p>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    {% else %}
+                    <p class="text-xs text-gray-400 dark:text-slate-500 italic">No RDAP servers configured</p>
+                    {% endif %}
+                {% else %}
+                <p class="text-xs text-gray-400 dark:text-slate-500 italic">No RDAP servers configured</p>
+                {% endif %}
+            </div>
+        </div>
+
+        {# WHOIS Server #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 flex items-center justify-between">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-server text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    WHOIS Server
+                </h3>
+                {% if session.role is defined and session.role == 'admin' %}
+                <button onclick="openEditWhoisModal()" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors font-medium">
+                    <i class="fas fa-edit mr-1" style="font-size: 9px;"></i>
+                    Edit
+                </button>
+                {% endif %}
+            </div>
+            <div class="p-4">
+                {% if tld.whois_server %}
+                <div class="flex items-center p-2 bg-gray-50 dark:bg-slate-700 rounded">
+                    <div class="w-6 h-6 bg-orange-500 rounded flex items-center justify-center text-white font-bold text-xs mr-2">
+                        <i class="fas fa-server"></i>
+                    </div>
+                    <p class="font-mono text-xs text-gray-800 dark:text-slate-200">{{ tld.whois_server }}</p>
+                </div>
+                {% else %}
+                <p class="text-xs text-gray-400 dark:text-slate-500 italic">No WHOIS server configured</p>
+                {% endif %}
+            </div>
+        </div>
+
+    </div>
+
+    {# RIGHT COLUMN #}
+    <div class="space-y-3">
+
+        {# Import History #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-history text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Import History
+                </h3>
+            </div>
+            <div class="p-4">
+                <div class="space-y-2">
+                    <div class="flex items-center p-2 bg-blue-50 dark:bg-blue-500/10 rounded border border-blue-200 dark:border-blue-500/30">
+                        <div class="w-7 h-7 bg-blue-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-plus text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">Created</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ tld.created_at|date('M j, Y H:i') }}</p>
+                        </div>
+                    </div>
+
+                    {% if tld.updated_at %}
+                    <div class="flex items-center p-2 bg-green-50 dark:bg-green-500/10 rounded border border-green-200 dark:border-green-500/30">
+                        <div class="w-7 h-7 bg-green-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-sync text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">Last Updated</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ tld.updated_at|date('M j, Y H:i') }}</p>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    {% if tld.iana_publication_date %}
+                    <div class="flex items-center p-2 bg-indigo-50 dark:bg-indigo-500/10 rounded border border-indigo-200 dark:border-indigo-500/30">
+                        <div class="w-7 h-7 bg-indigo-500 rounded flex items-center justify-center mr-2">
+                            <i class="fas fa-calendar text-white text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="text-xs text-gray-600 dark:text-slate-400 font-medium">IANA Publication</p>
+                            <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ tld.iana_publication_date|date('M j, Y H:i') }}</p>
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        {# Quick Actions #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center">
+                    <i class="fas fa-bolt text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                    Quick Actions
+                </h3>
+            </div>
+            <div class="p-4 space-y-2">
+                {% if session.role is defined and session.role == 'admin' %}
+                <a href="/tld-registry/{{ tld.id }}/refresh" class="flex items-center p-3 border border-gray-200 dark:border-slate-700 hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-500/10 rounded-lg transition-all duration-200 group" onclick="return confirm('Refresh TLD data from IANA?')">
+                    <div class="w-9 h-9 bg-green-50 dark:bg-green-500/10 group-hover:bg-green-500 rounded-lg flex items-center justify-center group-hover:text-white text-green-600 dark:text-green-400 transition-colors duration-200">
+                        <i class="fas fa-sync-alt text-sm"></i>
+                    </div>
+                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-slate-300 group-hover:text-green-700 dark:group-hover:text-green-400">Refresh from IANA</span>
+                </a>
+                <a href="/tld-registry/{{ tld.id }}/toggle-active" class="flex items-center p-3 border border-gray-200 dark:border-slate-700 hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-500/10 rounded-lg transition-all duration-200 group" onclick="return confirm('Toggle TLD status?')">
+                    <div class="w-9 h-9 bg-orange-50 dark:bg-orange-500/10 group-hover:bg-orange-500 rounded-lg flex items-center justify-center group-hover:text-white text-orange-600 dark:text-orange-400 transition-colors duration-200">
+                        <i class="fas fa-power-off text-sm"></i>
+                    </div>
+                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-slate-300 group-hover:text-orange-700 dark:group-hover:text-orange-400">Toggle Status</span>
+                </a>
+                {% endif %}
+                {% if tld.registry_url %}
+                <a href="{{ tld.registry_url }}" target="_blank" class="flex items-center p-3 border border-gray-200 dark:border-slate-700 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-500/10 rounded-lg transition-all duration-200 group">
+                    <div class="w-9 h-9 bg-blue-50 dark:bg-blue-500/10 group-hover:bg-blue-500 rounded-lg flex items-center justify-center group-hover:text-white text-blue-600 dark:text-blue-400 transition-colors duration-200">
+                        <i class="fas fa-external-link-alt text-sm"></i>
+                    </div>
+                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-slate-300 group-hover:text-blue-700 dark:group-hover:text-blue-400">Visit Registry</span>
+                </a>
+                {% endif %}
+            </div>
+        </div>
+
+        {# Raw Data (Collapsible) #}
+        <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+            <button onclick="toggleRawData()" class="w-full px-4 py-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 text-left hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
+                <h3 class="text-xs font-semibold text-gray-700 dark:text-slate-300 uppercase tracking-wider flex items-center justify-between">
+                    <span class="flex items-center">
+                        <i class="fas fa-code text-gray-400 dark:text-slate-500 mr-2" style="font-size: 10px;"></i>
+                        Raw TLD Data
+                    </span>
+                    <i class="fas fa-chevron-down text-gray-400 dark:text-slate-500 text-xs transition-transform" id="raw-data-chevron"></i>
+                </h3>
+            </button>
+            <div id="raw-data" class="hidden p-4 bg-gray-900 max-h-64 overflow-y-auto">
+                {% set rawData = {
+                    tld: tld.tld,
+                    rdap_servers: tld.rdap_servers ? tld.rdap_servers|from_json : null,
+                    whois_server: tld.whois_server,
+                    registry_url: tld.registry_url,
+                    registration_date: tld.registration_date,
+                    record_last_updated: tld.record_last_updated,
+                    iana_publication_date: tld.iana_publication_date,
+                    is_active: tld.is_active,
+                    created_at: tld.created_at,
+                    updated_at: tld.updated_at
+                } %}
+                <pre class="text-xs text-green-400 font-mono">{{ rawData|json_encode(constant('JSON_PRETTY_PRINT'))|e }}</pre>
+            </div>
+        </div>
+
+    </div>
+
+</div>
+
+{# Edit WHOIS Server Modal #}
+{% if session.role is defined and session.role == 'admin' %}
+<div id="editWhoisModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-server text-orange-600 mr-2"></i>
+                Edit WHOIS Server
+            </h3>
+            <button onclick="closeEditWhoisModal()" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <form method="POST" action="/tld-registry/{{ tld.id }}/update-whois-server" class="p-6">
+            {{ csrf_field() }}
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
+                    WHOIS Server
+                </label>
+                <input type="text"
+                       name="whois_server"
+                       id="whois_server_input"
+                       value="{{ tld.whois_server|default('') }}"
+                       placeholder="whois.example.com"
+                       class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
+                    Enter the WHOIS server hostname (e.g., whois.example.com). Leave empty to remove.
+                </p>
+            </div>
+            <div class="flex gap-3">
+                <button type="submit"
+                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors text-sm">
+                    <i class="fas fa-save mr-2"></i>
+                    Save Changes
+                </button>
+                <button type="button"
+                        onclick="closeEditWhoisModal()"
+                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
+                    <i class="fas fa-times mr-2"></i>
+                    Cancel
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+{# Edit RDAP Servers Modal #}
+<div id="editRdapModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-database text-indigo-600 mr-2"></i>
+                Edit RDAP Servers
+            </h3>
+            <button onclick="closeEditRdapModal()" class="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition-colors">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <form method="POST" action="/tld-registry/{{ tld.id }}/update-rdap-servers" class="p-6">
+            {{ csrf_field() }}
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-2">
+                    RDAP Servers
+                </label>
+                {% set rdapTextarea = '' %}
+                {% if tld.rdap_servers %}
+                    {% set rdapServers = tld.rdap_servers|from_json %}
+                    {% if rdapServers is iterable and rdapServers is not empty %}
+                        {% set rdapTextarea = rdapServers|join("\n") %}
+                    {% endif %}
+                {% endif %}
+                <textarea name="rdap_servers"
+                          id="rdap_servers_input"
+                          rows="6"
+                          placeholder="https://rdap.example.com/&#10;https://rdap2.example.com/"
+                          class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm font-mono bg-white dark:bg-slate-900 text-gray-900 dark:text-white">{{ rdapTextarea }}</textarea>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
+                    Enter RDAP server URLs (one per line or comma-separated). Must start with http:// or https://. Leave empty to remove all servers.
+                </p>
+            </div>
+            <div class="flex gap-3">
+                <button type="submit"
+                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
+                    <i class="fas fa-save mr-2"></i>
+                    Save Changes
+                </button>
+                <button type="button"
+                        onclick="closeEditRdapModal()"
+                        class="flex-1 inline-flex items-center justify-center px-4 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
+                    <i class="fas fa-times mr-2"></i>
+                    Cancel
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endif %}
+
+<script>
+function toggleRawData() {
+    const dataDiv = document.getElementById('raw-data');
+    const chevron = document.getElementById('raw-data-chevron');
+    dataDiv.classList.toggle('hidden');
+    chevron.classList.toggle('rotate-180');
+}
+
+{% if session.role is defined and session.role == 'admin' %}
+function openEditWhoisModal() {
+    document.getElementById('editWhoisModal').classList.remove('hidden');
+    document.getElementById('whois_server_input').focus();
+}
+
+function closeEditWhoisModal() {
+    document.getElementById('editWhoisModal').classList.add('hidden');
+}
+
+function openEditRdapModal() {
+    document.getElementById('editRdapModal').classList.remove('hidden');
+    document.getElementById('rdap_servers_input').focus();
+}
+
+function closeEditRdapModal() {
+    document.getElementById('editRdapModal').classList.add('hidden');
+}
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeEditWhoisModal();
+        closeEditRdapModal();
+    }
+});
+
+document.getElementById('editWhoisModal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeEditWhoisModal();
+    }
+});
+
+document.getElementById('editRdapModal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeEditRdapModal();
+    }
+});
+{% endif %}
+</script>
+
+{% endblock %}
diff --git a/app/Views/users/create.php b/app/Views/users/create.twig
similarity index 64%
rename from app/Views/users/create.php
rename to app/Views/users/create.twig
index c9553d3..a54db77 100644
--- a/app/Views/users/create.php
+++ b/app/Views/users/create.twig
@@ -1,61 +1,61 @@
-<?php
-$title = 'Create User';
-$pageTitle = 'Create User';
-$pageDescription = 'Add a new user to the system';
-$pageIcon = 'fas fa-user-plus';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
 
+{% set title = 'Create User' %}
+{% set pageTitle = 'Create User' %}
+{% set pageDescription = 'Add a new user to the system' %}
+{% set pageIcon = 'fas fa-user-plus' %}
+
+{% block content %}
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-user text-gray-400 mr-2 text-sm"></i>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-user text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 User Information
             </h2>
         </div>
 
         <div class="p-6">
             <form method="POST" action="/users/store" class="space-y-5">
-                <?= csrf_field() ?>
+                {{ csrf_field() }}
 
                 <!-- Name & Username Row -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                     <!-- Full Name -->
                     <div>
-                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Full Name <span class="text-red-500">*</span>
                         </label>
-                        <input type="text" 
-                               id="full_name" 
-                               name="full_name" 
+                        <input type="text"
+                               id="full_name"
+                               name="full_name"
                                required
                                autofocus
-                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                               class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                placeholder="John Doe">
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             The user's display name
                         </p>
                     </div>
 
                     <!-- Username -->
                     <div>
-                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Username <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-at text-sm"></i>
                             </span>
-                            <input type="text" 
-                                   id="username" 
-                                   name="username" 
-                                   required 
+                            <input type="text"
+                                   id="username"
+                                   name="username"
+                                   required
                                    pattern="[a-zA-Z0-9_]+"
-                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                    placeholder="johndoe">
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Letters, numbers, and underscores only
                         </p>
                     </div>
@@ -65,103 +65,103 @@ ob_start();
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                     <!-- Email -->
                     <div>
-                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Email Address <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-envelope text-sm"></i>
                             </span>
-                            <input type="email" 
-                                   id="email" 
-                                   name="email" 
+                            <input type="email"
+                                   id="email"
+                                   name="email"
                                    required
-                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                    placeholder="john@example.com">
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Used for login and notifications
                         </p>
                     </div>
 
                     <!-- Role -->
                     <div>
-                        <label for="role" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="role" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Role <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-shield-alt text-sm"></i>
                             </span>
-                            <select id="role" 
-                                    name="role" 
+                            <select id="role"
+                                    name="role"
                                     required
-                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white">
+                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                 <option value="user">User</option>
                                 <option value="admin">Admin</option>
                             </select>
-                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
+                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-chevron-down text-xs"></i>
                             </span>
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Admins have full system access
                         </p>
                     </div>
                 </div>
 
                 <!-- Password Section -->
-                <div class="border-t border-gray-200 pt-5 mt-5">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
-                        <i class="fas fa-lock text-gray-400 mr-2"></i>
+                <div class="border-t border-gray-200 dark:border-slate-700 pt-5 mt-5">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                        <i class="fas fa-lock text-gray-400 dark:text-slate-500 mr-2"></i>
                         Password
                     </h3>
-                    
+
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                         <!-- Password -->
                         <div>
-                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Password <span class="text-red-500">*</span>
                             </label>
                             <div class="relative">
-                                <input type="password" 
-                                       id="password" 
-                                       name="password" 
-                                       required 
+                                <input type="password"
+                                       id="password"
+                                       name="password"
+                                       required
                                        minlength="8"
-                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                        placeholder="••••••••">
-                                <button type="button" 
+                                <button type="button"
                                         onclick="togglePassword('password')"
-                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                     <i class="fas fa-eye text-sm" id="password-toggle-icon"></i>
                                 </button>
                             </div>
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Minimum 8 characters
                             </p>
                         </div>
 
                         <!-- Confirm Password -->
                         <div>
-                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Confirm Password <span class="text-red-500">*</span>
                             </label>
                             <div class="relative">
-                                <input type="password" 
-                                       id="password_confirm" 
-                                       name="password_confirm" 
-                                       required 
+                                <input type="password"
+                                       id="password_confirm"
+                                       name="password_confirm"
+                                       required
                                        minlength="8"
-                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                        placeholder="••••••••">
-                                <button type="button" 
+                                <button type="button"
                                         onclick="togglePassword('password_confirm')"
-                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                     <i class="fas fa-eye text-sm" id="password_confirm-toggle-icon"></i>
                                 </button>
                             </div>
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Re-enter the password to confirm
                             </p>
                         </div>
@@ -170,13 +170,13 @@ ob_start();
 
                 <!-- Action Buttons -->
                 <div class="flex flex-col sm:flex-row gap-3 pt-3">
-                    <button type="submit" 
+                    <button type="submit"
                             class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                         <i class="fas fa-user-plus mr-2"></i>
                         Create User
                     </button>
-                    <a href="/users" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                    <a href="/users"
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -186,7 +186,7 @@ ob_start();
     </div>
 
     <!-- Info Section -->
-    <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
+    <div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
         <div class="flex items-start">
             <div class="flex-shrink-0">
                 <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
@@ -194,8 +194,8 @@ ob_start();
                 </div>
             </div>
             <div class="ml-3">
-                <h3 class="text-sm font-semibold text-gray-900 mb-1">What happens next?</h3>
-                <ul class="text-xs text-gray-600 space-y-1">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">What happens next?</h3>
+                <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                     <li class="flex items-center">
                         <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
                         <span class="ml-2">Admin-created users are automatically verified and can log in immediately</span>
@@ -218,7 +218,7 @@ ob_start();
 function togglePassword(fieldId) {
     const field = document.getElementById(fieldId);
     const icon = document.getElementById(fieldId + '-toggle-icon');
-    
+
     if (field.type === 'password') {
         field.type = 'text';
         icon.classList.remove('fa-eye');
@@ -230,11 +230,10 @@ function togglePassword(fieldId) {
     }
 }
 
-// Password confirmation validation
 document.getElementById('password_confirm').addEventListener('input', function() {
     const password = document.getElementById('password').value;
     const confirm = this.value;
-    
+
     if (confirm && password !== confirm) {
         this.setCustomValidity('Passwords do not match');
         this.classList.add('border-red-300');
@@ -246,8 +245,4 @@ document.getElementById('password_confirm').addEventListener('input', function()
     }
 });
 </script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/users/edit.php b/app/Views/users/edit.twig
similarity index 59%
rename from app/Views/users/edit.php
rename to app/Views/users/edit.twig
index 1deffd7..df084f9 100644
--- a/app/Views/users/edit.php
+++ b/app/Views/users/edit.twig
@@ -1,61 +1,61 @@
-<?php
-$title = 'Edit User';
-$pageTitle = 'Edit User';
-$pageDescription = 'Update user information and permissions';
-$pageIcon = 'fas fa-user-edit';
-ob_start();
-?>
+{% extends 'layout/base.twig' %}
 
+{% set title = 'Edit User' %}
+{% set pageTitle = 'Edit User' %}
+{% set pageDescription = 'Update user information and permissions' %}
+{% set pageIcon = 'fas fa-user-edit' %}
+
+{% block content %}
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-                <i class="fas fa-user-edit text-gray-400 mr-2 text-sm"></i>
+    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                <i class="fas fa-user-edit text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                 User Information
             </h2>
         </div>
 
         <div class="p-6">
-            <form method="POST" action="/users/<?= $user['id'] ?>/update" class="space-y-5">
-                <?= csrf_field() ?>
-                <input type="hidden" name="id" value="<?= $user['id'] ?>">
+            <form method="POST" action="/users/{{ user.id }}/update" class="space-y-5">
+                {{ csrf_field() }}
+                <input type="hidden" name="id" value="{{ user.id }}">
 
                 <!-- Name & Username Row -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                     <!-- Full Name -->
                     <div>
-                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Full Name <span class="text-red-500">*</span>
                         </label>
-                        <input type="text" 
-                               id="full_name" 
-                               name="full_name" 
+                        <input type="text"
+                               id="full_name"
+                               name="full_name"
                                required
                                autofocus
-                               value="<?= htmlspecialchars($user['full_name'] ?? '') ?>"
-                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                               value="{{ user.full_name|default('') }}"
+                               class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                placeholder="John Doe">
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             The user's display name
                         </p>
                     </div>
 
                     <!-- Username (Read-only) -->
                     <div>
-                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Username
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-at text-sm"></i>
                             </span>
-                            <input type="text" 
-                                   id="username" 
-                                   value="<?= htmlspecialchars($user['username']) ?>" 
+                            <input type="text"
+                                   id="username"
+                                   value="{{ user.username }}"
                                    readonly
-                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed text-sm">
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-900 text-gray-500 dark:text-slate-400 cursor-not-allowed text-sm">
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Username cannot be changed
                         </p>
                     </div>
@@ -65,115 +65,115 @@ ob_start();
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                     <!-- Email -->
                     <div>
-                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Email Address <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-envelope text-sm"></i>
                             </span>
-                            <input type="email" 
-                                   id="email" 
-                                   name="email" 
+                            <input type="email"
+                                   id="email"
+                                   name="email"
                                    required
-                                   value="<?= htmlspecialchars($user['email']) ?>"
-                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                   value="{{ user.email }}"
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                    placeholder="john@example.com">
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Used for login and notifications
                         </p>
                     </div>
 
                     <!-- Role -->
                     <div>
-                        <label for="role" class="block text-sm font-medium text-gray-700 mb-1.5">
+                        <label for="role" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                             Role <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-shield-alt text-sm"></i>
                             </span>
-                            <select id="role" 
-                                    name="role" 
+                            <select id="role"
+                                    name="role"
                                     required
-                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white">
-                                <option value="user" <?= $user['role'] === 'user' ? 'selected' : '' ?>>User</option>
-                                <option value="admin" <?= $user['role'] === 'admin' ? 'selected' : '' ?>>Admin</option>
+                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                                <option value="user" {{ user.role == 'user' ? 'selected' : '' }}>User</option>
+                                <option value="admin" {{ user.role == 'admin' ? 'selected' : '' }}>Admin</option>
                             </select>
-                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
+                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 dark:text-slate-500">
                                 <i class="fas fa-chevron-down text-xs"></i>
                             </span>
                         </div>
-                        <p class="mt-1.5 text-xs text-gray-500">
+                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                             Admins have full system access
                         </p>
                     </div>
                 </div>
 
                 <!-- Status -->
-                <div class="flex items-center gap-3 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
+                <div class="flex items-center gap-3 bg-gray-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg px-4 py-3">
                     <input type="checkbox" id="is_active" name="is_active" value="1"
-                           <?= $user['is_active'] ? 'checked' : '' ?>
-                           class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
+                           {{ user.is_active ? 'checked' : '' }}
+                           class="w-4 h-4 text-primary border-gray-300 dark:border-slate-600 rounded focus:ring-primary">
                     <div>
-                        <label for="is_active" class="text-sm font-medium text-gray-700">
+                        <label for="is_active" class="text-sm font-medium text-gray-700 dark:text-slate-300">
                             Active Account
                         </label>
-                        <p class="text-xs text-gray-500">Inactive users cannot log in to the system</p>
+                        <p class="text-xs text-gray-500 dark:text-slate-400">Inactive users cannot log in to the system</p>
                     </div>
                 </div>
 
                 <!-- Password Section -->
-                <div class="border-t border-gray-200 pt-5 mt-5">
-                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
-                        <i class="fas fa-lock text-gray-400 mr-2"></i>
+                <div class="border-t border-gray-200 dark:border-slate-700 pt-5 mt-5">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                        <i class="fas fa-lock text-gray-400 dark:text-slate-500 mr-2"></i>
                         Change Password
                     </h3>
-                    
+
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                         <!-- New Password -->
                         <div>
-                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 New Password
                             </label>
                             <div class="relative">
-                                <input type="password" 
-                                       id="password" 
-                                       name="password" 
+                                <input type="password"
+                                       id="password"
+                                       name="password"
                                        minlength="8"
-                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                        placeholder="••••••••">
-                                <button type="button" 
+                                <button type="button"
                                         onclick="togglePassword('password')"
-                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                     <i class="fas fa-eye text-sm" id="password-toggle-icon"></i>
                                 </button>
                             </div>
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Leave blank to keep current password
                             </p>
                         </div>
 
                         <!-- Confirm Password -->
                         <div>
-                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                 Confirm Password
                             </label>
                             <div class="relative">
-                                <input type="password" 
-                                       id="password_confirm" 
-                                       name="password_confirm" 
+                                <input type="password"
+                                       id="password_confirm"
+                                       name="password_confirm"
                                        minlength="8"
-                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                        placeholder="••••••••">
-                                <button type="button" 
+                                <button type="button"
                                         onclick="togglePassword('password_confirm')"
-                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                     <i class="fas fa-eye text-sm" id="password_confirm-toggle-icon"></i>
                                 </button>
                             </div>
-                            <p class="mt-1.5 text-xs text-gray-500">
+                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                 Re-enter the new password to confirm
                             </p>
                         </div>
@@ -182,13 +182,13 @@ ob_start();
 
                 <!-- Action Buttons -->
                 <div class="flex flex-col sm:flex-row gap-3 pt-3">
-                    <button type="submit" 
+                    <button type="submit"
                             class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                         <i class="fas fa-save mr-2"></i>
                         Update User
                     </button>
-                    <a href="/users" 
-                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                    <a href="/users"
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                         <i class="fas fa-times mr-2"></i>
                         Cancel
                     </a>
@@ -198,7 +198,7 @@ ob_start();
     </div>
 
     <!-- Account Info Section -->
-    <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
+    <div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
         <div class="flex items-start">
             <div class="flex-shrink-0">
                 <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
@@ -206,26 +206,26 @@ ob_start();
                 </div>
             </div>
             <div class="ml-3">
-                <h3 class="text-sm font-semibold text-gray-900 mb-1">Account Details</h3>
-                <ul class="text-xs text-gray-600 space-y-1">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Account Details</h3>
+                <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                     <li class="flex items-center">
                         <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
-                        <span class="ml-2">Email Verified: 
-                            <span class="font-semibold <?= $user['email_verified'] ? 'text-green-600' : 'text-red-600' ?>">
-                                <?= $user['email_verified'] ? 'Yes' : 'No' ?>
+                        <span class="ml-2">Email Verified:
+                            <span class="font-semibold {{ user.email_verified ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
+                                {{ user.email_verified ? 'Yes' : 'No' }}
                             </span>
                         </span>
                     </li>
                     <li class="flex items-center">
                         <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
-                        <span class="ml-2">Member Since: 
-                            <span class="font-semibold text-gray-900"><?= date('M d, Y', strtotime($user['created_at'])) ?></span>
+                        <span class="ml-2">Member Since:
+                            <span class="font-semibold text-gray-900 dark:text-white">{{ user.created_at|date('M d, Y') }}</span>
                         </span>
                     </li>
                     <li class="flex items-center">
                         <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
-                        <span class="ml-2">Last Login: 
-                            <span class="font-semibold text-gray-900"><?= $user['last_login'] ? date('M d, Y H:i', strtotime($user['last_login'])) : 'Never' ?></span>
+                        <span class="ml-2">Last Login:
+                            <span class="font-semibold text-gray-900 dark:text-white">{{ user.last_login ? user.last_login|date('M d, Y H:i') : 'Never' }}</span>
                         </span>
                     </li>
                 </ul>
@@ -238,7 +238,7 @@ ob_start();
 function togglePassword(fieldId) {
     const field = document.getElementById(fieldId);
     const icon = document.getElementById(fieldId + '-toggle-icon');
-    
+
     if (field.type === 'password') {
         field.type = 'text';
         icon.classList.remove('fa-eye');
@@ -250,11 +250,10 @@ function togglePassword(fieldId) {
     }
 }
 
-// Password confirmation validation
 document.getElementById('password_confirm').addEventListener('input', function() {
     const password = document.getElementById('password').value;
     const confirm = this.value;
-    
+
     if (confirm && password !== confirm) {
         this.setCustomValidity('Passwords do not match');
         this.classList.add('border-red-300');
@@ -266,8 +265,4 @@ document.getElementById('password_confirm').addEventListener('input', function()
     }
 });
 </script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/app/Views/users/index.php b/app/Views/users/index.php
deleted file mode 100644
index 8078f97..0000000
--- a/app/Views/users/index.php
+++ /dev/null
@@ -1,559 +0,0 @@
-<?php
-$title = 'User Management';
-$pageTitle = 'User Management';
-$pageDescription = 'Manage system users and permissions';
-$pageIcon = 'fas fa-users';
-ob_start();
-
-// Helper function to generate sort URL
-function sortUrl($column, $currentSort, $currentOrder) {
-    $newOrder = ($currentSort === $column && $currentOrder === 'asc') ? 'desc' : 'asc';
-    $params = $_GET;
-    $params['sort'] = $column;
-    $params['order'] = $newOrder;
-    return '/users?' . http_build_query($params);
-}
-
-// Helper function for sort icon
-function sortIcon($column, $currentSort, $currentOrder) {
-    if ($currentSort !== $column) {
-        return '<i class="fas fa-sort text-gray-400 ml-1 text-xs"></i>';
-    }
-    $icon = $currentOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
-    return '<i class="fas ' . $icon . ' text-primary ml-1 text-xs"></i>';
-}
-
-// Get current filters
-$currentFilters = $filters ?? ['search' => '', 'role' => '', 'status' => '', 'sort' => 'username', 'order' => 'asc'];
-
-// Mock pagination for now (will need to be implemented in controller)
-$pagination = $pagination ?? [
-    'current_page' => 1,
-    'total_pages' => 1,
-    'per_page' => 25,
-    'total' => count($users),
-    'showing_from' => 1,
-    'showing_to' => count($users)
-];
-?>
-
-<!-- Action Buttons -->
-<div class="mb-4 flex justify-end">
-    <a href="/users/create" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-        <i class="fas fa-user-plus mr-2"></i>
-        Add User
-    </a>
-</div>
-
-<!-- Filters & Search -->
-<div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
-    <form method="GET" action="/users" id="filter-form">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <!-- Search -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
-                <div class="relative">
-                    <input type="text" name="search" value="<?= htmlspecialchars($currentFilters['search']) ?>" placeholder="Search users..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
-                </div>
-            </div>
-            
-            <!-- Role Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Role</label>
-                <select name="role" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="">All Roles</option>
-                    <option value="admin" <?= $currentFilters['role'] === 'admin' ? 'selected' : '' ?>>Admin</option>
-                    <option value="user" <?= $currentFilters['role'] === 'user' ? 'selected' : '' ?>>User</option>
-                </select>
-            </div>
-            
-            <!-- Status Filter -->
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="">All Statuses</option>
-                    <option value="active" <?= $currentFilters['status'] === 'active' ? 'selected' : '' ?>>Active</option>
-                    <option value="inactive" <?= $currentFilters['status'] === 'inactive' ? 'selected' : '' ?>>Inactive</option>
-                </select>
-            </div>
-            
-            <!-- Apply/Reset Buttons -->
-            <div class="flex items-end space-x-2">
-                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
-                    <i class="fas fa-filter mr-2"></i>
-                    Apply Filters
-                </button>
-                <a href="/users" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
-                    <i class="fas fa-times mr-2"></i>
-                    Clear
-                </a>
-            </div>
-        </div>
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-    </form>
-</div>
-
-<!-- Pagination Info & Per Page Selector -->
-<div class="mb-4 flex justify-between items-center">
-    <div class="text-sm text-gray-600">
-        Showing <span class="font-semibold text-gray-900"><?= $pagination['showing_from'] ?></span> to 
-        <span class="font-semibold text-gray-900"><?= $pagination['showing_to'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total'] ?></span> user(s)
-    </div>
-    
-    <form method="GET" action="/users" class="flex items-center gap-2">
-        <!-- Preserve current filters -->
-        <input type="hidden" name="search" value="<?= htmlspecialchars($currentFilters['search']) ?>">
-        <input type="hidden" name="role" value="<?= htmlspecialchars($currentFilters['role']) ?>">
-        <input type="hidden" name="status" value="<?= htmlspecialchars($currentFilters['status']) ?>">
-        <input type="hidden" name="sort" value="<?= htmlspecialchars($currentFilters['sort']) ?>">
-        <input type="hidden" name="order" value="<?= htmlspecialchars($currentFilters['order']) ?>">
-        
-        <label for="per_page" class="text-sm text-gray-600">Show:</label>
-        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary">
-            <option value="10" <?= $pagination['per_page'] == 10 ? 'selected' : '' ?>>10</option>
-            <option value="25" <?= $pagination['per_page'] == 25 ? 'selected' : '' ?>>25</option>
-            <option value="50" <?= $pagination['per_page'] == 50 ? 'selected' : '' ?>>50</option>
-            <option value="100" <?= $pagination['per_page'] == 100 ? 'selected' : '' ?>>100</option>
-        </select>
-    </form>
-</div>
-
-<!-- Users Table -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <!-- Bulk Actions Bar (shown when users are selected) -->
-    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 border-b border-blue-200 flex items-center justify-between">
-        <div class="flex items-center gap-4">
-            <span id="selected-count" class="text-sm font-medium text-gray-700"></span>
-            <div class="flex items-center gap-3 flex-wrap">
-                <div class="flex items-center gap-2">
-                    <button type="button" onclick="bulkToggleStatus('active')" class="inline-flex items-center px-4 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
-                        <i class="fas fa-user-check mr-1"></i> Activate Selected
-                    </button>
-                    <button type="button" onclick="bulkToggleStatus('inactive')" class="inline-flex items-center px-4 py-1.5 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium">
-                        <i class="fas fa-user-slash mr-1"></i> Deactivate Selected
-                    </button>
-                    <button type="button" onclick="bulkDeleteUsers()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
-                        <i class="fas fa-trash mr-1"></i> Delete Selected
-                    </button>
-                </div>
-            </div>
-        </div>
-        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
-            <i class="fas fa-times mr-1.5"></i> Clear Selection
-        </button>
-    </div>
-    <?php if (!empty($users)): ?>
-    <div class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-                <tr>
-                    <th class="px-6 py-3 text-left">
-                        <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 text-primary focus:ring-primary">
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('full_name', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            User <?= sortIcon('full_name', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('username', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            Username <?= sortIcon('username', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('role', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            Role <?= sortIcon('role', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('is_active', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            Status <?= sortIcon('is_active', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('email_verified', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            Email Verified <?= sortIcon('email_verified', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                        <a href="<?= sortUrl('last_login', $currentFilters['sort'], $currentFilters['order']) ?>" class="hover:text-primary flex items-center">
-                            Last Login <?= sortIcon('last_login', $currentFilters['sort'], $currentFilters['order']) ?>
-                        </a>
-                    </th>
-                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-                <?php foreach ($users as $user): ?>
-                    <tr class="hover:bg-gray-50 transition-colors duration-150">
-                        <td class="px-6 py-4">
-                            <?php if ($user['id'] != \Core\Auth::id()): ?>
-                                <input type="checkbox" class="user-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="<?= $user['id'] ?>" onchange="updateBulkActions()">
-                            <?php else: ?>
-                                <span class="text-gray-300" title="Cannot select your own account">
-                                    <i class="fas fa-lock text-xs"></i>
-                                </span>
-                            <?php endif; ?>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="flex items-center">
-                                <?php
-                                // Get avatar data for this user (now fast with database caching)
-                                $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 40);
-                                ?>
-                                <div class="flex-shrink-0 h-10 w-10 rounded-lg overflow-hidden bg-primary bg-opacity-10 flex items-center justify-center">
-                                    <?php if ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar'): ?>
-                                        <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                                             alt="<?= htmlspecialchars($avatar['alt']) ?>" 
-                                             class="w-full h-full object-cover"
-                                             loading="lazy">
-                                    <?php else: ?>
-                                        <span class="text-primary font-semibold text-sm">
-                                            <?= $avatar['initials'] ?>
-                                        </span>
-                                    <?php endif; ?>
-                                </div>
-                                <div class="ml-4">
-                                    <div class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($user['full_name'] ?? 'N/A') ?></div>
-                                    <div class="text-xs text-gray-500"><?= htmlspecialchars($user['email']) ?></div>
-                                </div>
-                            </div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="flex items-center gap-2">
-                                <span class="text-sm text-gray-900"><?= htmlspecialchars($user['username']) ?></span>
-                                <?php if (!empty($user['two_factor_enabled'])): ?>
-                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-[10px] font-semibold border border-green-200" title="Two-factor authentication enabled">
-                                        <i class="fas fa-shield-alt mr-0.5"></i>2FA
-                                    </span>
-                                <?php else: ?>
-                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-gray-100 text-gray-400 rounded text-[10px] font-medium border border-gray-200" title="Two-factor authentication not enabled">
-                                        <i class="fas fa-shield-alt mr-0.5"></i>No 2FA
-                                    </span>
-                                <?php endif; ?>
-                            </div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border 
-                                <?= $user['role'] === 'admin' ? 'bg-amber-100 text-amber-700 border-amber-200' : 'bg-blue-100 text-blue-700 border-blue-200' ?>">
-                                <i class="fas fa-<?= $user['role'] === 'admin' ? 'crown' : 'user' ?> mr-1"></i>
-                                <?= ucfirst($user['role']) ?>
-                            </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border 
-                                <?= $user['is_active'] ? 'bg-green-100 text-green-700 border-green-200' : 'bg-red-100 text-red-700 border-red-200' ?>">
-                                <i class="fas fa-<?= $user['is_active'] ? 'check-circle' : 'times-circle' ?> mr-1"></i>
-                                <?= $user['is_active'] ? 'Active' : 'Inactive' ?>
-                            </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="flex items-center">
-                                <?php if ($user['email_verified']): ?>
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span class="text-sm text-gray-900">Verified</span>
-                                <?php else: ?>
-                                    <i class="fas fa-times-circle text-red-500 mr-2"></i>
-                                    <span class="text-sm text-gray-500">Not Verified</span>
-                                <?php endif; ?>
-                            </div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <?php if ($user['last_login']): ?>
-                                <div class="flex items-center">
-                                    <i class="far fa-clock mr-2"></i>
-                                    <?= date('M d, H:i', strtotime($user['last_login'])) ?>
-                                </div>
-                            <?php else: ?>
-                                <span class="text-gray-400">Never</span>
-                            <?php endif; ?>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                            <div class="flex items-center justify-end space-x-2">
-                                <a href="/users/<?= $user['id'] ?>" class="text-gray-600 hover:text-primary" title="View Profile">
-                                    <i class="fas fa-eye"></i>
-                                </a>
-                                <a href="/users/<?= $user['id'] ?>/edit" class="text-blue-600 hover:text-blue-800" title="Edit">
-                                    <i class="fas fa-edit"></i>
-                                </a>
-                                <?php if ($user['id'] != \Core\Auth::id()): ?>
-                                    <a href="#" 
-                                       class="text-orange-600 hover:text-orange-800" 
-                                       title="<?= $user['is_active'] ? 'Deactivate' : 'Activate' ?>"
-                                       onclick="toggleUserStatus(<?= $user['id'] ?>); return false;">
-                                        <i class="fas fa-<?= $user['is_active'] ? 'user-slash' : 'user-check' ?>"></i>
-                                    </a>
-                                    <a href="#" 
-                                       class="text-red-600 hover:text-red-800" 
-                                       title="Delete"
-                                       onclick="deleteUser(<?= $user['id'] ?>); return false;">
-                                        <i class="fas fa-trash"></i>
-                                    </a>
-                                <?php else: ?>
-                                    <span class="text-gray-400" title="Cannot modify your own account">
-                                        <i class="fas fa-lock"></i>
-                                    </span>
-                                <?php endif; ?>
-                            </div>
-                        </td>
-                    </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
-    </div>
-    <?php else: ?>
-        <!-- Empty State -->
-        <div class="p-12 text-center">
-            <i class="fas fa-users text-gray-300 text-6xl mb-4"></i>
-            <h3 class="text-lg font-semibold text-gray-700 mb-1">No Users Yet</h3>
-            <p class="text-sm text-gray-500 mb-4">Start by adding your first user</p>
-            <a href="/users/create" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-                <i class="fas fa-user-plus mr-2"></i>
-                Add Your First User
-            </a>
-        </div>
-    <?php endif; ?>
-</div>
-
-<!-- Pagination Controls -->
-<?php if ($pagination['total_pages'] > 1): ?>
-<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
-    <!-- Page Info -->
-    <div class="text-sm text-gray-600">
-        Page <span class="font-semibold text-gray-900"><?= $pagination['current_page'] ?></span> of 
-        <span class="font-semibold text-gray-900"><?= $pagination['total_pages'] ?></span>
-    </div>
-    
-    <!-- Pagination Buttons -->
-    <div class="flex items-center gap-1">
-        <?php
-        // Helper function to build pagination URL
-        function paginationUrl($page, $filters, $perPage) {
-            $params = $filters;
-            $params['page'] = $page;
-            $params['per_page'] = $perPage;
-            return '/users?' . http_build_query($params);
-        }
-        
-        $currentPage = $pagination['current_page'];
-        $totalPages = $pagination['total_pages'];
-        ?>
-        
-        <!-- First Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl(1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-left"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Previous Page -->
-        <?php if ($currentPage > 1): ?>
-            <a href="<?= paginationUrl($currentPage - 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-left"></i> Previous
-            </a>
-        <?php endif; ?>
-        
-        <!-- Page Numbers -->
-        <?php
-        $range = 2;
-        $start = max(1, $currentPage - $range);
-        $end = min($totalPages, $currentPage + $range);
-        
-        if ($start > 1) {
-            echo '<a href="' . paginationUrl(1, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">1</a>';
-            if ($start > 2) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-        }
-        
-        for ($i = $start; $i <= $end; $i++) {
-            if ($i == $currentPage) {
-                echo '<span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">' . $i . '</span>';
-            } else {
-                echo '<a href="' . paginationUrl($i, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $i . '</a>';
-            }
-        }
-        
-        if ($end < $totalPages) {
-            if ($end < $totalPages - 1) {
-                echo '<span class="px-2 text-gray-500">...</span>';
-            }
-            echo '<a href="' . paginationUrl($totalPages, $currentFilters, $pagination['per_page']) . '" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">' . $totalPages . '</a>';
-        }
-        ?>
-        
-        <!-- Next Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($currentPage + 1, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                Next <i class="fas fa-angle-right"></i>
-            </a>
-        <?php endif; ?>
-        
-        <!-- Last Page -->
-        <?php if ($currentPage < $totalPages): ?>
-            <a href="<?= paginationUrl($totalPages, $currentFilters, $pagination['per_page']) ?>" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-                <i class="fas fa-angle-double-right"></i>
-            </a>
-        <?php endif; ?>
-    </div>
-</div>
-<?php endif; ?>
-
-<script>
-function toggleSelectAll(checkbox) {
-    const checkboxes = document.querySelectorAll('.user-checkbox');
-    checkboxes.forEach(cb => {
-        cb.checked = checkbox.checked;
-    });
-    updateBulkActions();
-}
-
-function updateBulkActions() {
-    const checkboxes = document.querySelectorAll('.user-checkbox:checked');
-    const bulkActions = document.getElementById('bulk-actions');
-    const selectedCount = document.getElementById('selected-count');
-    const selectAllCheckbox = document.getElementById('select-all');
-    
-    if (checkboxes.length > 0) {
-        bulkActions.classList.remove('hidden');
-        selectedCount.textContent = checkboxes.length + ' user(s) selected';
-    } else {
-        bulkActions.classList.add('hidden');
-    }
-    
-    // Update select all checkbox state
-    const allCheckboxes = document.querySelectorAll('.user-checkbox');
-    if (selectAllCheckbox) {
-        selectAllCheckbox.checked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
-        selectAllCheckbox.indeterminate = checkboxes.length > 0 && checkboxes.length < allCheckboxes.length;
-    }
-}
-
-function clearSelection() {
-    const checkboxes = document.querySelectorAll('.user-checkbox');
-    checkboxes.forEach(cb => {
-        cb.checked = false;
-    });
-    document.getElementById('select-all').checked = false;
-    updateBulkActions();
-}
-
-function getSelectedUserIds() {
-    const checkboxes = document.querySelectorAll('.user-checkbox:checked');
-    return Array.from(checkboxes).map(cb => cb.value);
-}
-
-function bulkToggleStatus(action) {
-    const userIds = getSelectedUserIds();
-    
-    if (userIds.length === 0) {
-        alert('Please select at least one user');
-        return;
-    }
-    
-    const actionText = action === 'active' ? 'activate' : 'deactivate';
-    if (!confirm(`Are you sure you want to ${actionText} ${userIds.length} user(s)?`)) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/users/bulk-toggle-status';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    const idsInput = document.createElement('input');
-    idsInput.type = 'hidden';
-    idsInput.name = 'user_ids';
-    idsInput.value = JSON.stringify(userIds);
-    form.appendChild(idsInput);
-    
-    const actionInput = document.createElement('input');
-    actionInput.type = 'hidden';
-    actionInput.name = 'action';
-    actionInput.value = action;
-    form.appendChild(actionInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-function toggleUserStatus(userId) {
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/users/' + userId + '/toggle-status';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-function deleteUser(userId) {
-    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/users/' + userId + '/delete';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-function bulkDeleteUsers() {
-    const userIds = getSelectedUserIds();
-    
-    if (userIds.length === 0) {
-        alert('Please select at least one user to delete');
-        return;
-    }
-    
-    if (!confirm(`Are you sure you want to delete ${userIds.length} user(s)? This action cannot be undone.`)) {
-        return;
-    }
-    
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/users/bulk-delete';
-    
-    const csrfInput = document.createElement('input');
-    csrfInput.type = 'hidden';
-    csrfInput.name = 'csrf_token';
-    csrfInput.value = '<?= csrf_token() ?>';
-    form.appendChild(csrfInput);
-    
-    const idsInput = document.createElement('input');
-    idsInput.type = 'hidden';
-    idsInput.name = 'user_ids';
-    idsInput.value = JSON.stringify(userIds);
-    form.appendChild(idsInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-</script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
-
diff --git a/app/Views/users/index.twig b/app/Views/users/index.twig
new file mode 100644
index 0000000..527d6c8
--- /dev/null
+++ b/app/Views/users/index.twig
@@ -0,0 +1,504 @@
+{% extends 'layout/base.twig' %}
+
+{% set title = 'User Management' %}
+{% set pageTitle = 'User Management' %}
+{% set pageDescription = 'Manage system users and permissions' %}
+{% set pageIcon = 'fas fa-users' %}
+
+{% set currentFilters = filters|default({search: '', role: '', status: '', sort: 'username', order: 'asc'}) %}
+{% set pagination = pagination|default({current_page: 1, total_pages: 1, per_page: 25, total: users|length, showing_from: 1, showing_to: users|length}) %}
+
+{% block content %}
+<!-- Action Buttons -->
+<div class="mb-4 flex justify-end">
+    <a href="/users/create" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+        <i class="fas fa-user-plus mr-2"></i>
+        Add User
+    </a>
+</div>
+
+<!-- Filters & Search -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 mb-4">
+    <form method="GET" action="/users" id="filter-form">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <!-- Search -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search</label>
+                <div class="relative">
+                    <input type="text" name="search" value="{{ currentFilters.search }}" placeholder="Search users..." class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
+                </div>
+            </div>
+
+            <!-- Role Filter -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Role</label>
+                <select name="role" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="">All Roles</option>
+                    <option value="admin" {{ currentFilters.role == 'admin' ? 'selected' : '' }}>Admin</option>
+                    <option value="user" {{ currentFilters.role == 'user' ? 'selected' : '' }}>User</option>
+                </select>
+            </div>
+
+            <!-- Status Filter -->
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                <select name="status" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                    <option value="">All Statuses</option>
+                    <option value="active" {{ currentFilters.status == 'active' ? 'selected' : '' }}>Active</option>
+                    <option value="inactive" {{ currentFilters.status == 'inactive' ? 'selected' : '' }}>Inactive</option>
+                </select>
+            </div>
+
+            <!-- Apply/Reset Buttons -->
+            <div class="flex items-end space-x-2">
+                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+                    <i class="fas fa-filter mr-2"></i>
+                    Apply Filters
+                </button>
+                <a href="/users" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
+                    <i class="fas fa-times mr-2"></i>
+                    Clear
+                </a>
+            </div>
+        </div>
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+    </form>
+</div>
+
+<!-- Pagination Info & Per Page Selector -->
+<div class="mb-4 flex justify-between items-center">
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_from }}</span> to
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.showing_to }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total }}</span> user(s)
+    </div>
+
+    <form method="GET" action="/users" class="flex items-center gap-2">
+        <!-- Preserve current filters -->
+        <input type="hidden" name="search" value="{{ currentFilters.search }}">
+        <input type="hidden" name="role" value="{{ currentFilters.role }}">
+        <input type="hidden" name="status" value="{{ currentFilters.status }}">
+        <input type="hidden" name="sort" value="{{ currentFilters.sort }}">
+        <input type="hidden" name="order" value="{{ currentFilters.order }}">
+
+        <label for="per_page" class="text-sm text-gray-600 dark:text-slate-400">Show:</label>
+        <select name="per_page" id="per_page" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+            <option value="10" {{ pagination.per_page == 10 ? 'selected' : '' }}>10</option>
+            <option value="25" {{ pagination.per_page == 25 ? 'selected' : '' }}>25</option>
+            <option value="50" {{ pagination.per_page == 50 ? 'selected' : '' }}>50</option>
+            <option value="100" {{ pagination.per_page == 100 ? 'selected' : '' }}>100</option>
+        </select>
+    </form>
+</div>
+
+<!-- Users Table -->
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    <!-- Bulk Actions Bar (shown when users are selected) -->
+    <div id="bulk-actions" class="hidden px-6 py-3 bg-blue-50 dark:bg-blue-500/10 border-b border-blue-200 dark:border-blue-500/20 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+            <span id="selected-count" class="text-sm font-medium text-gray-700 dark:text-slate-300"></span>
+            <div class="flex items-center gap-3 flex-wrap">
+                <div class="flex items-center gap-2">
+                    <button type="button" onclick="bulkToggleStatus('active')" class="inline-flex items-center px-4 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
+                        <i class="fas fa-user-check mr-1"></i> Activate Selected
+                    </button>
+                    <button type="button" onclick="bulkToggleStatus('inactive')" class="inline-flex items-center px-4 py-1.5 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium">
+                        <i class="fas fa-user-slash mr-1"></i> Deactivate Selected
+                    </button>
+                    <button type="button" onclick="bulkDeleteUsers()" class="inline-flex items-center px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
+                        <i class="fas fa-trash mr-1"></i> Delete Selected
+                    </button>
+                </div>
+            </div>
+        </div>
+        <button type="button" onclick="clearSelection()" class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white hover:bg-blue-100 dark:hover:bg-blue-500/20 px-3 py-1.5 rounded-lg transition-colors">
+            <i class="fas fa-times mr-1.5"></i> Clear Selection
+        </button>
+    </div>
+    {% if users is not empty %}
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+            <thead class="bg-gray-50 dark:bg-slate-900">
+                <tr>
+                    <th class="px-6 py-3 text-left">
+                        <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary">
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('full_name', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            User {{ sort_icon('full_name', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('username', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            Username {{ sort_icon('username', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('role', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            Role {{ sort_icon('role', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('is_active', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            Status {{ sort_icon('is_active', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('email_verified', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            Email Verified {{ sort_icon('email_verified', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+                        <a href="{{ sort_url('last_login', currentFilters.sort, currentFilters.order, currentFilters) }}" class="hover:text-primary flex items-center">
+                            Last Login {{ sort_icon('last_login', currentFilters.sort, currentFilters.order) }}
+                        </a>
+                    </th>
+                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+                {% for user in users %}
+                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors duration-150">
+                        <td class="px-6 py-4">
+                            {% if user.id != auth.id %}
+                                <input type="checkbox" class="user-checkbox rounded border-gray-300 dark:border-slate-600 text-primary focus:ring-primary" value="{{ user.id }}" onchange="updateBulkActions()">
+                            {% else %}
+                                <span class="text-gray-300 dark:text-slate-600" title="Cannot select your own account">
+                                    <i class="fas fa-lock text-xs"></i>
+                                </span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 h-10 w-10 rounded-lg overflow-hidden bg-primary bg-opacity-10 flex items-center justify-center">
+                                    {% if user.avatar.type == 'uploaded' or user.avatar.type == 'gravatar' %}
+                                        <img src="{{ user.avatar.url }}"
+                                             alt="{{ user.avatar.alt }}"
+                                             class="w-full h-full object-cover"
+                                             loading="lazy">
+                                    {% else %}
+                                        <span class="text-primary font-semibold text-sm">
+                                            {{ user.avatar.initials }}
+                                        </span>
+                                    {% endif %}
+                                </div>
+                                <div class="ml-4">
+                                    <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ user.full_name|default('N/A') }}</div>
+                                    <div class="text-xs text-gray-500 dark:text-slate-400">{{ user.email }}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="flex items-center gap-2">
+                                <span class="text-sm text-gray-900 dark:text-white">{{ user.username }}</span>
+                                {% if user.two_factor_enabled %}
+                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 rounded text-[10px] font-semibold border border-green-200 dark:border-green-500/20" title="Two-factor authentication enabled">
+                                        <i class="fas fa-shield-alt mr-0.5"></i>2FA
+                                    </span>
+                                {% else %}
+                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-gray-100 dark:bg-slate-700 text-gray-400 dark:text-slate-500 rounded text-[10px] font-medium border border-gray-200 dark:border-slate-600" title="Two-factor authentication not enabled">
+                                        <i class="fas fa-shield-alt mr-0.5"></i>No 2FA
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            {{ role_badge(user.role) }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border
+                                {{ user.is_active ? 'bg-green-100 text-green-700 border-green-200 dark:bg-green-500/10 dark:text-green-400 dark:border-green-500/20' : 'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20' }}">
+                                <i class="fas fa-{{ user.is_active ? 'check-circle' : 'times-circle' }} mr-1"></i>
+                                {{ user.is_active ? 'Active' : 'Inactive' }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="flex items-center">
+                                {% if user.email_verified %}
+                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                    <span class="text-sm text-gray-900 dark:text-white">Verified</span>
+                                {% else %}
+                                    <i class="fas fa-times-circle text-red-500 mr-2"></i>
+                                    <span class="text-sm text-gray-500 dark:text-slate-400">Not Verified</span>
+                                {% endif %}
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
+                            {% if user.last_login %}
+                                <div class="flex items-center">
+                                    <i class="far fa-clock mr-2"></i>
+                                    {{ user.last_login|date('M d, H:i') }}
+                                </div>
+                            {% else %}
+                                <span class="text-gray-400 dark:text-slate-500">Never</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                            <div class="flex items-center justify-end space-x-2">
+                                <a href="/users/{{ user.id }}" class="text-gray-600 dark:text-slate-400 hover:text-primary" title="View Profile">
+                                    <i class="fas fa-eye"></i>
+                                </a>
+                                <a href="/users/{{ user.id }}/edit" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="Edit">
+                                    <i class="fas fa-edit"></i>
+                                </a>
+                                {% if user.id != auth.id %}
+                                    <a href="#"
+                                       class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300"
+                                       title="{{ user.is_active ? 'Deactivate' : 'Activate' }}"
+                                       onclick="toggleUserStatus({{ user.id }}); return false;">
+                                        <i class="fas fa-{{ user.is_active ? 'user-slash' : 'user-check' }}"></i>
+                                    </a>
+                                    <a href="#"
+                                       class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+                                       title="Delete"
+                                       onclick="deleteUser({{ user.id }}); return false;">
+                                        <i class="fas fa-trash"></i>
+                                    </a>
+                                {% else %}
+                                    <span class="text-gray-400 dark:text-slate-500" title="Cannot modify your own account">
+                                        <i class="fas fa-lock"></i>
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+        <!-- Empty State -->
+        <div class="p-12 text-center">
+            <i class="fas fa-users text-gray-300 dark:text-slate-600 text-6xl mb-4"></i>
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-slate-300 mb-1">No Users Yet</h3>
+            <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Start by adding your first user</p>
+            <a href="/users/create" class="inline-flex items-center px-5 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
+                <i class="fas fa-user-plus mr-2"></i>
+                Add Your First User
+            </a>
+        </div>
+    {% endif %}
+</div>
+
+<!-- Pagination Controls -->
+{% if pagination.total_pages > 1 %}
+<div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <!-- Page Info -->
+    <div class="text-sm text-gray-600 dark:text-slate-400">
+        Page <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.current_page }}</span> of
+        <span class="font-semibold text-gray-900 dark:text-white">{{ pagination.total_pages }}</span>
+    </div>
+
+    <!-- Pagination Buttons -->
+    <div class="flex items-center gap-1">
+        {% set currentPage = pagination.current_page %}
+        {% set totalPages = pagination.total_pages %}
+
+        {# First Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-left"></i>
+            </a>
+        {% endif %}
+
+        {# Previous Page #}
+        {% if currentPage > 1 %}
+            <a href="{{ pagination_url(currentPage - 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-left"></i> Previous
+            </a>
+        {% endif %}
+
+        {# Page Numbers #}
+        {% set startPage = (currentPage - 2) > 1 ? (currentPage - 2) : 1 %}
+        {% set endPage = (currentPage + 2) < totalPages ? (currentPage + 2) : totalPages %}
+
+        {% if startPage > 1 %}
+            <a href="{{ pagination_url(1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">1</a>
+            {% if startPage > 2 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+        {% endif %}
+
+        {% for i in startPage..endPage %}
+            {% if i == currentPage %}
+                <span class="px-3 py-2 text-sm bg-primary text-white rounded-lg font-semibold">{{ i }}</span>
+            {% else %}
+                <a href="{{ pagination_url(i, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ i }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if endPage < totalPages %}
+            {% if endPage < totalPages - 1 %}
+                <span class="px-2 text-gray-500 dark:text-slate-400">...</span>
+            {% endif %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">{{ totalPages }}</a>
+        {% endif %}
+
+        {# Next Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(currentPage + 1, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                Next <i class="fas fa-angle-right"></i>
+            </a>
+        {% endif %}
+
+        {# Last Page #}
+        {% if currentPage < totalPages %}
+            <a href="{{ pagination_url(totalPages, currentFilters, pagination.per_page) }}" class="px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-gray-700 dark:text-slate-300">
+                <i class="fas fa-angle-double-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+<script>
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.user-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+    });
+    updateBulkActions();
+}
+
+function updateBulkActions() {
+    const checkboxes = document.querySelectorAll('.user-checkbox:checked');
+    const bulkActions = document.getElementById('bulk-actions');
+    const selectedCount = document.getElementById('selected-count');
+    const selectAllCheckbox = document.getElementById('select-all');
+
+    if (checkboxes.length > 0) {
+        bulkActions.classList.remove('hidden');
+        selectedCount.textContent = checkboxes.length + ' user(s) selected';
+    } else {
+        bulkActions.classList.add('hidden');
+    }
+
+    const allCheckboxes = document.querySelectorAll('.user-checkbox');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.checked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
+        selectAllCheckbox.indeterminate = checkboxes.length > 0 && checkboxes.length < allCheckboxes.length;
+    }
+}
+
+function clearSelection() {
+    const checkboxes = document.querySelectorAll('.user-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = false;
+    });
+    document.getElementById('select-all').checked = false;
+    updateBulkActions();
+}
+
+function getSelectedUserIds() {
+    const checkboxes = document.querySelectorAll('.user-checkbox:checked');
+    return Array.from(checkboxes).map(cb => cb.value);
+}
+
+function bulkToggleStatus(action) {
+    const userIds = getSelectedUserIds();
+
+    if (userIds.length === 0) {
+        alert('Please select at least one user');
+        return;
+    }
+
+    const actionText = action === 'active' ? 'activate' : 'deactivate';
+    if (!confirm(`Are you sure you want to ${actionText} ${userIds.length} user(s)?`)) {
+        return;
+    }
+
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/users/bulk-toggle-status';
+
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+
+    const idsInput = document.createElement('input');
+    idsInput.type = 'hidden';
+    idsInput.name = 'user_ids';
+    idsInput.value = JSON.stringify(userIds);
+    form.appendChild(idsInput);
+
+    const actionInput = document.createElement('input');
+    actionInput.type = 'hidden';
+    actionInput.name = 'action';
+    actionInput.value = action;
+    form.appendChild(actionInput);
+
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function toggleUserStatus(userId) {
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/users/' + userId + '/toggle-status';
+
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function deleteUser(userId) {
+    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
+        return;
+    }
+
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/users/' + userId + '/delete';
+
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function bulkDeleteUsers() {
+    const userIds = getSelectedUserIds();
+
+    if (userIds.length === 0) {
+        alert('Please select at least one user to delete');
+        return;
+    }
+
+    if (!confirm(`Are you sure you want to delete ${userIds.length} user(s)? This action cannot be undone.`)) {
+        return;
+    }
+
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/users/bulk-delete';
+
+    const csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = 'csrf_token';
+    csrfInput.value = '{{ csrf_token() }}';
+    form.appendChild(csrfInput);
+
+    const idsInput = document.createElement('input');
+    idsInput.type = 'hidden';
+    idsInput.name = 'user_ids';
+    idsInput.value = JSON.stringify(userIds);
+    form.appendChild(idsInput);
+
+    document.body.appendChild(form);
+    form.submit();
+}
+</script>
+{% endblock %}
diff --git a/app/Views/users/show.php b/app/Views/users/show.twig
similarity index 56%
rename from app/Views/users/show.php
rename to app/Views/users/show.twig
index 84b5c1b..7a8e962 100644
--- a/app/Views/users/show.php
+++ b/app/Views/users/show.twig
@@ -1,175 +1,184 @@
-<?php
-$title = htmlspecialchars($user['full_name']) . ' - User Profile';
-$pageTitle = 'User Profile';
-$pageDescription = 'View user information and resources';
-$pageIcon = 'fas fa-user';
-ob_start();
+{% extends 'layout/base.twig' %}
 
-$isActive = (bool)$user['is_active'];
-$isVerified = (bool)$user['email_verified'];
-$has2FA = !empty($twoFactorStatus['enabled']);
-$avatar = \App\Helpers\AvatarHelper::getAvatar($user, 64);
+{% set title = (user.full_name) ~ ' - User Profile' %}
+{% set pageTitle = 'User Profile' %}
+{% set pageDescription = 'View user information and resources' %}
+{% set pageIcon = 'fas fa-user' %}
 
-$totalDomains = count($domains);
-$totalTags = count($tags);
-$totalGroups = count($groups);
-?>
+{% set isActive = user.is_active ? true : false %}
+{% set isVerified = user.email_verified ? true : false %}
+{% set has2FA = twoFactorStatus.enabled|default(false) %}
 
+{% set totalDomains = domains|length %}
+{% set totalTags = tags|length %}
+{% set totalGroups = groups|length %}
+
+{# Overview tab computed data #}
+{% set attentionDomains = domains|filter(d => d.daysLeft is not null and d.daysLeft <= 30)|sort((a, b) => a.daysLeft|default(999) - b.daysLeft|default(999)) %}
+{% set attentionCount = attentionDomains|length %}
+{% set attentionPreview = attentionDomains|slice(0, 5) %}
+
+{% set topRegistrars = registrarCounts|default({})|slice(0, 8) %}
+{% set registrarTotal = registrarCounts|default({})|length %}
+
+{% set domainsWithGroup = domains|filter(d => d.group_name is defined and d.group_name)|length %}
+{% set domainsWithoutGroup = totalDomains - domainsWithGroup %}
+
+{% set totalChannels = 0 %}
+{% for g in groups %}
+    {% set totalChannels = totalChannels + (g.channel_count|default(0)) %}
+{% endfor %}
+
+{% set topTags = tags|filter(t => (t.usage_count|default(0)) > 0)|slice(0, 8) %}
+
+{% block content %}
 <!-- Back Navigation & Actions -->
 <div class="mb-4 flex items-center justify-between">
-    <a href="/users" class="inline-flex items-center px-3 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors font-medium">
+    <a href="/users" class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
         <i class="fas fa-arrow-left mr-2"></i>
         Back to Users
     </a>
-    
+
     <div class="flex items-center space-x-2">
-        <a href="/users/<?= $user['id'] ?>/edit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
+        <a href="/users/{{ user.id }}/edit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-sm font-medium">
             <i class="fas fa-edit mr-2"></i>
             Edit User
         </a>
-        <?php if ($user['id'] != \Core\Auth::id()): ?>
-            <form method="POST" action="/users/<?= $user['id'] ?>/toggle-status" class="inline">
-                <?= csrf_field() ?>
-                <?php if ($isActive): ?>
+        {% if user.id != auth.id %}
+            <form method="POST" action="/users/{{ user.id }}/toggle-status" class="inline">
+                {{ csrf_field() }}
+                {% if isActive %}
                     <button type="submit" onclick="return confirm('Deactivate this user?')" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium">
                         <i class="fas fa-user-slash mr-2"></i>
                         Deactivate
                     </button>
-                <?php else: ?>
+                {% else %}
                     <button type="submit" onclick="return confirm('Activate this user?')" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                         <i class="fas fa-user-check mr-2"></i>
                         Activate
                     </button>
-                <?php endif; ?>
+                {% endif %}
             </form>
-            <form method="POST" action="/users/<?= $user['id'] ?>/delete" class="inline">
-                <?= csrf_field() ?>
+            <form method="POST" action="/users/{{ user.id }}/delete" class="inline">
+                {{ csrf_field() }}
                 <button type="submit" onclick="return confirm('Are you sure you want to delete this user? This action cannot be undone.')" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                     <i class="fas fa-trash mr-2"></i>
                     Delete
                 </button>
             </form>
-        <?php endif; ?>
+        {% endif %}
     </div>
 </div>
 
 <!-- User Header Card -->
-<div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6 mb-6">
     <div class="flex items-start">
         <!-- Avatar -->
         <div class="flex-shrink-0 h-16 w-16 rounded-lg overflow-hidden bg-primary bg-opacity-10 flex items-center justify-center mr-5">
-            <?php if ($avatar['type'] === 'uploaded' || $avatar['type'] === 'gravatar'): ?>
-                <img src="<?= htmlspecialchars($avatar['url']) ?>" 
-                     alt="<?= htmlspecialchars($avatar['alt']) ?>" 
+            {% if userAvatar.type == 'uploaded' or userAvatar.type == 'gravatar' %}
+                <img src="{{ userAvatar.url }}"
+                     alt="{{ userAvatar.alt }}"
                      class="w-full h-full object-cover"
                      loading="lazy">
-            <?php else: ?>
+            {% else %}
                 <span class="text-primary font-semibold text-xl">
-                    <?= $avatar['initials'] ?>
+                    {{ userAvatar.initials }}
                 </span>
-            <?php endif; ?>
+            {% endif %}
         </div>
 
         <!-- User Info -->
         <div class="flex-1">
             <div class="flex items-center gap-3 mb-2">
-                <h2 class="text-2xl font-semibold text-gray-900"><?= htmlspecialchars($user['full_name']) ?></h2>
+                <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ user.full_name }}</h2>
                 <!-- Role Badge -->
-                <?php if ($user['role'] === 'admin'): ?>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 border border-purple-200">
-                        <i class="fas fa-crown mr-1"></i>Admin
-                    </span>
-                <?php else: ?>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 border border-blue-200">
-                        <i class="fas fa-user mr-1"></i>User
-                    </span>
-                <?php endif; ?>
+                {{ role_badge(user.role, 'xs') }}
                 <!-- Status Badge -->
-                <?php if ($isActive): ?>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
+                {% if isActive %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400 border border-green-200 dark:border-green-500/20">
                         <i class="fas fa-check-circle mr-1"></i>Active
                     </span>
-                <?php else: ?>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 border border-red-200">
+                {% else %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400 border border-red-200 dark:border-red-500/20">
                         <i class="fas fa-times-circle mr-1"></i>Inactive
                     </span>
-                <?php endif; ?>
+                {% endif %}
             </div>
 
-            <div class="flex items-center gap-4 text-sm text-gray-500 mb-3">
+            <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-slate-400 mb-3">
                 <div class="flex items-center gap-2">
-                    <i class="fas fa-at mr-1.5 text-gray-400"></i>
-                    <span><?= htmlspecialchars($user['username']) ?></span>
-                    <?php if ($has2FA): ?>
-                        <span class="inline-flex items-center px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-[10px] font-semibold border border-green-200" title="Two-factor authentication enabled">
+                    <i class="fas fa-at mr-1.5 text-gray-400 dark:text-slate-500"></i>
+                    <span>{{ user.username }}</span>
+                    {% if has2FA %}
+                        <span class="inline-flex items-center px-1.5 py-0.5 bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 rounded text-[10px] font-semibold border border-green-200 dark:border-green-500/20" title="Two-factor authentication enabled">
                             <i class="fas fa-shield-alt mr-0.5"></i>2FA
                         </span>
-                    <?php else: ?>
-                        <span class="inline-flex items-center px-1.5 py-0.5 bg-gray-100 text-gray-400 rounded text-[10px] font-medium border border-gray-200" title="Two-factor authentication not enabled">
+                    {% else %}
+                        <span class="inline-flex items-center px-1.5 py-0.5 bg-gray-100 dark:bg-slate-700 text-gray-400 dark:text-slate-500 rounded text-[10px] font-medium border border-gray-200 dark:border-slate-600" title="Two-factor authentication not enabled">
                             <i class="fas fa-shield-alt mr-0.5"></i>No 2FA
                         </span>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
                 <div class="flex items-center">
-                    <i class="fas fa-envelope mr-1.5 text-gray-400"></i>
-                    <span><?= htmlspecialchars($user['email']) ?></span>
-                    <?php if ($isVerified): ?>
+                    <i class="fas fa-envelope mr-1.5 text-gray-400 dark:text-slate-500"></i>
+                    <span>{{ user.email }}</span>
+                    {% if isVerified %}
                         <i class="fas fa-check-circle text-green-500 ml-1" title="Email verified"></i>
-                    <?php else: ?>
+                    {% else %}
                         <i class="fas fa-exclamation-circle text-orange-500 ml-1" title="Email not verified"></i>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
             </div>
 
-            <div class="flex items-center gap-6 text-xs text-gray-500">
+            <div class="flex items-center gap-6 text-xs text-gray-500 dark:text-slate-400">
                 <div class="flex items-center">
                     <i class="fas fa-calendar mr-1.5"></i>
-                    Member since <?= date('M d, Y', strtotime($user['created_at'])) ?>
+                    Member since {{ user.created_at|date('M d, Y') }}
                 </div>
                 <div class="flex items-center">
                     <i class="fas fa-clock mr-1.5"></i>
-                    Last login: <?= $user['last_login'] ? date('M d, Y H:i', strtotime($user['last_login'])) : 'Never' ?>
+                    Last login: {{ user.last_login ? user.last_login|date('M d, Y H:i') : 'Never' }}
                 </div>
             </div>
         </div>
 
         <!-- Quick Stats -->
         <div class="flex items-center gap-4 ml-6">
-            <div class="text-center px-4 py-2 bg-gray-50 rounded-lg border border-gray-200">
-                <p class="text-2xl font-bold text-gray-900"><?= $totalDomains ?></p>
-                <p class="text-xs text-gray-500">Domains</p>
+            <div class="text-center px-4 py-2 bg-gray-50 dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700">
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ totalDomains }}</p>
+                <p class="text-xs text-gray-500 dark:text-slate-400">Domains</p>
             </div>
-            <div class="text-center px-4 py-2 bg-gray-50 rounded-lg border border-gray-200">
-                <p class="text-2xl font-bold text-gray-900"><?= $totalTags ?></p>
-                <p class="text-xs text-gray-500">Tags</p>
+            <div class="text-center px-4 py-2 bg-gray-50 dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700">
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ totalTags }}</p>
+                <p class="text-xs text-gray-500 dark:text-slate-400">Tags</p>
             </div>
-            <div class="text-center px-4 py-2 bg-gray-50 rounded-lg border border-gray-200">
-                <p class="text-2xl font-bold text-gray-900"><?= $totalGroups ?></p>
-                <p class="text-xs text-gray-500">Groups</p>
+            <div class="text-center px-4 py-2 bg-gray-50 dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700">
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ totalGroups }}</p>
+                <p class="text-xs text-gray-500 dark:text-slate-400">Groups</p>
             </div>
         </div>
     </div>
 </div>
 
 <!-- Tabs -->
-<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-    <div class="border-b border-gray-200">
+<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
+    <div class="border-b border-gray-200 dark:border-slate-700">
         <nav class="-mb-px flex overflow-x-auto">
-            <button onclick="switchTab('overview')" id="tab-overview" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('overview')" id="tab-overview" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-chart-bar mr-2"></i>
                 Overview
             </button>
-            <button onclick="switchTab('domains')" id="tab-domains" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('domains')" id="tab-domains" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-globe mr-2"></i>
-                Domains (<?= $totalDomains ?>)
+                Domains ({{ totalDomains }})
             </button>
-            <button onclick="switchTab('tags')" id="tab-tags" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('tags')" id="tab-tags" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-tags mr-2"></i>
-                Tags (<?= $totalTags ?>)
+                Tags ({{ totalTags }})
             </button>
-            <button onclick="switchTab('groups')" id="tab-groups" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap">
+            <button onclick="switchTab('groups')" id="tab-groups" class="tab-button px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 hover:border-gray-300 dark:hover:border-slate-600 whitespace-nowrap">
                 <i class="fas fa-bell mr-2"></i>
-                Notification Groups (<?= $totalGroups ?>)
+                Notification Groups ({{ totalGroups }})
             </button>
         </nav>
     </div>
@@ -178,78 +187,50 @@ $totalGroups = count($groups);
 
         <!-- Overview Tab -->
         <div id="content-overview" class="tab-content hidden">
-            <?php
-            // Prepare overview data from already-loaded arrays
-            $allAttentionDomains = array_merge(
-                array_values(array_filter($domains, fn($d) => ($d['daysLeft'] ?? null) !== null && $d['daysLeft'] < 0)),
-                array_values(array_filter($domains, fn($d) => ($d['daysLeft'] ?? null) !== null && $d['daysLeft'] >= 0 && $d['daysLeft'] <= 30))
-            );
-            usort($allAttentionDomains, fn($a, $b) => ($a['daysLeft'] ?? 999) <=> ($b['daysLeft'] ?? 999));
-            $attentionCount = count($allAttentionDomains);
-            $attentionPreview = array_slice($allAttentionDomains, 0, 5);
-            
-            // Registrar distribution
-            $registrarCounts = [];
-            foreach ($domains as $d) {
-                $reg = !empty($d['registrar']) ? $d['registrar'] : 'Unknown';
-                $registrarCounts[$reg] = ($registrarCounts[$reg] ?? 0) + 1;
-            }
-            arsort($registrarCounts);
-            $topRegistrars = array_slice($registrarCounts, 0, 8, true);
-            
-            $domainsWithGroup = count(array_filter($domains, fn($d) => !empty($d['group_name'])));
-            $domainsWithoutGroup = $totalDomains - $domainsWithGroup;
-            
-            $totalChannels = 0;
-            foreach ($groups as $g) { $totalChannels += ($g['channel_count'] ?? 0); }
-            
-            $topTags = array_slice(array_filter($tags, fn($t) => ($t['usage_count'] ?? 0) > 0), 0, 8);
-            ?>
-
-            <!-- Domain Stats Cards (Dashboard style) -->
+            <!-- Domain Stats Cards -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
+                <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Domains</p>
-                            <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $totalDomains ?></p>
+                            <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Total Domains</p>
+                            <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ totalDomains }}</p>
                         </div>
-                        <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-globe text-blue-600 text-lg"></i>
+                        <div class="w-12 h-12 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-lg"></i>
                         </div>
                     </div>
                 </div>
-                <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
+                <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Active</p>
-                            <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $userDomainStats['active'] ?? 0 ?></p>
+                            <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Active</p>
+                            <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ userDomainStats.active|default(0) }}</p>
                         </div>
-                        <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-check-circle text-green-600 text-lg"></i>
+                        <div class="w-12 h-12 bg-green-50 dark:bg-green-500/10 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-lg"></i>
                         </div>
                     </div>
                 </div>
-                <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
+                <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Expiring Soon</p>
-                            <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $userDomainStats['expiring_soon'] ?? 0 ?></p>
-                            <p class="text-xs text-gray-400 mt-1">within 30 days</p>
+                            <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Expiring Soon</p>
+                            <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ userDomainStats.expiring_soon|default(0) }}</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">within 30 days</p>
                         </div>
-                        <div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-exclamation-triangle text-orange-600 text-lg"></i>
+                        <div class="w-12 h-12 bg-orange-50 dark:bg-orange-500/10 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-exclamation-triangle text-orange-600 dark:text-orange-400 text-lg"></i>
                         </div>
                     </div>
                 </div>
-                <div class="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200">
+                <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-5 hover:shadow-md transition-shadow duration-200">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Expired</p>
-                            <p class="text-2xl font-semibold text-gray-900 mt-1"><?= $userDomainStats['expired'] ?? 0 ?></p>
+                            <p class="text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wide">Expired</p>
+                            <p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{{ userDomainStats.expired|default(0) }}</p>
                         </div>
-                        <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-times-circle text-red-600 text-lg"></i>
+                        <div class="w-12 h-12 bg-red-50 dark:bg-red-500/10 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-times-circle text-red-600 dark:text-red-400 text-lg"></i>
                         </div>
                     </div>
                 </div>
@@ -257,162 +238,162 @@ $totalGroups = count($groups);
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 <!-- Requires Attention -->
-                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
-                    <div class="px-5 py-3 border-b border-gray-200">
+                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
+                    <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700">
                         <div class="flex items-center justify-between">
-                            <h3 class="text-sm font-semibold text-gray-900 flex items-center">
+                            <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
                                 <i class="fas fa-exclamation-triangle text-orange-500 mr-2 text-xs"></i>
                                 Requires Attention
                             </h3>
-                            <?php if ($attentionCount > 5): ?>
+                            {% if attentionCount > 5 %}
                                 <a href="#domains" onclick="switchTab('domains'); document.getElementById('domainStatusFilter').value='Expiring Soon'; filterDomains(); return false;" class="text-xs text-primary hover:text-primary-dark font-medium">
-                                    View all <?= $attentionCount ?>
+                                    View all {{ attentionCount }}
                                     <i class="fas fa-arrow-right ml-1"></i>
                                 </a>
-                            <?php endif; ?>
+                            {% endif %}
                         </div>
                     </div>
-                    <?php if (!empty($attentionPreview)): ?>
+                    {% if attentionPreview is not empty %}
                         <div class="p-4 space-y-2">
-                            <?php foreach ($attentionPreview as $ad): ?>
-                                <?php $isExpired = ($ad['daysLeft'] ?? 0) < 0; ?>
-                                <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-200">
+                            {% for ad in attentionPreview %}
+                                {% set isExpired = (ad.daysLeft|default(0)) < 0 %}
+                                <div class="flex items-center justify-between p-3 border border-gray-100 dark:border-slate-700 rounded-lg hover:border-gray-300 dark:hover:border-slate-600 hover:shadow-sm transition-all duration-200">
                                     <div class="flex-1 min-w-0">
-                                        <a href="/domains/<?= $ad['id'] ?>" class="text-sm font-medium text-gray-900 hover:text-primary truncate block"><?= htmlspecialchars($ad['domain_name']) ?></a>
-                                        <p class="text-xs text-gray-500 mt-0.5">
-                                            <?= !empty($ad['expiration_date']) ? date('M d, Y', strtotime($ad['expiration_date'])) : 'Unknown' ?>
-                                            <?php if ($isExpired): ?>
-                                                <span class="text-red-600 font-semibold ml-2">Expired <?= abs($ad['daysLeft']) ?> day<?= abs($ad['daysLeft']) != 1 ? 's' : '' ?> ago</span>
-                                            <?php else: ?>
-                                                <span class="<?= $ad['daysLeft'] <= 7 ? 'text-red-600' : 'text-orange-600' ?> font-semibold ml-2"><?= $ad['daysLeft'] ?> day<?= $ad['daysLeft'] != 1 ? 's' : '' ?> left</span>
-                                            <?php endif; ?>
+                                        <a href="/domains/{{ ad.id }}" class="text-sm font-medium text-gray-900 dark:text-white hover:text-primary truncate block">{{ ad.domain_name }}</a>
+                                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-0.5">
+                                            {{ ad.expiration_date ? ad.expiration_date|date('M d, Y') : 'Unknown' }}
+                                            {% if isExpired %}
+                                                <span class="text-red-600 dark:text-red-400 font-semibold ml-2">Expired {{ ad.daysLeft|abs }} day{{ ad.daysLeft|abs != 1 ? 's' : '' }} ago</span>
+                                            {% else %}
+                                                <span class="{{ ad.daysLeft <= 7 ? 'text-red-600 dark:text-red-400' : 'text-orange-600 dark:text-orange-400' }} font-semibold ml-2">{{ ad.daysLeft }} day{{ ad.daysLeft != 1 ? 's' : '' }} left</span>
+                                            {% endif %}
                                         </p>
                                     </div>
-                                    <a href="/domains/<?= $ad['id'] ?>" class="text-gray-400 hover:text-primary ml-3">
+                                    <a href="/domains/{{ ad.id }}" class="text-gray-400 dark:text-slate-500 hover:text-primary ml-3">
                                         <i class="fas fa-chevron-right text-sm"></i>
                                     </a>
                                 </div>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </div>
-                    <?php else: ?>
+                    {% else %}
                         <div class="p-6 text-center">
                             <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
-                            <p class="text-sm text-gray-600">All domains are in good standing</p>
-                            <p class="text-xs text-gray-400 mt-1">No expired or expiring domains</p>
+                            <p class="text-sm text-gray-600 dark:text-slate-400">All domains are in good standing</p>
+                            <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">No expired or expiring domains</p>
                         </div>
-                    <?php endif; ?>
+                    {% endif %}
                 </div>
 
                 <!-- Top Registrars -->
-                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
-                    <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-                        <h3 class="text-sm font-semibold text-gray-900 flex items-center">
-                            <i class="fas fa-building text-gray-400 mr-2 text-xs"></i>
+                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
+                    <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                            <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
                             Registrar Distribution
                         </h3>
-                        <span class="text-xs text-gray-500"><?= count($registrarCounts) ?> registrar<?= count($registrarCounts) != 1 ? 's' : '' ?></span>
+                        <span class="text-xs text-gray-500 dark:text-slate-400">{{ registrarTotal }} registrar{{ registrarTotal != 1 ? 's' : '' }}</span>
                     </div>
                     <div class="p-5">
-                        <?php if (!empty($topRegistrars)): ?>
+                        {% if topRegistrars is not empty %}
                             <div class="space-y-3">
-                                <?php foreach ($topRegistrars as $regName => $regCount): ?>
-                                    <?php $regPct = $totalDomains > 0 ? round(($regCount / $totalDomains) * 100) : 0; ?>
+                                {% for regName, regCount in topRegistrars %}
+                                    {% set regPct = totalDomains > 0 ? ((regCount / totalDomains) * 100)|round : 0 %}
                                     <div>
                                         <div class="flex items-center justify-between mb-1">
-                                            <span class="text-sm text-gray-700 font-medium truncate mr-3"><?= htmlspecialchars($regName) ?></span>
-                                            <span class="text-xs text-gray-500 whitespace-nowrap"><?= $regCount ?> (<?= $regPct ?>%)</span>
+                                            <span class="text-sm text-gray-700 dark:text-slate-300 font-medium truncate mr-3">{{ regName }}</span>
+                                            <span class="text-xs text-gray-500 dark:text-slate-400 whitespace-nowrap">{{ regCount }} ({{ regPct }}%)</span>
                                         </div>
-                                        <div class="w-full bg-gray-100 rounded-full h-1.5">
-                                            <div class="bg-blue-500 rounded-full h-1.5" style="width: <?= max(2, $regPct) ?>%"></div>
+                                        <div class="w-full bg-gray-100 dark:bg-slate-700 rounded-full h-1.5">
+                                            <div class="bg-blue-500 rounded-full h-1.5" style="width: {{ max(2, regPct) }}%"></div>
                                         </div>
                                     </div>
-                                <?php endforeach; ?>
+                                {% endfor %}
                             </div>
-                        <?php else: ?>
+                        {% else %}
                             <div class="text-center py-4">
-                                <i class="fas fa-building text-gray-300 text-2xl mb-2"></i>
-                                <p class="text-sm text-gray-500">No registrar data</p>
+                                <i class="fas fa-building text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                                <p class="text-sm text-gray-500 dark:text-slate-400">No registrar data</p>
                             </div>
-                        <?php endif; ?>
+                        {% endif %}
                     </div>
                 </div>
 
                 <!-- Tag Usage -->
-                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
-                    <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-                        <h3 class="text-sm font-semibold text-gray-900 flex items-center">
-                            <i class="fas fa-tags text-gray-400 mr-2 text-xs"></i>
+                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
+                    <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                            <i class="fas fa-tags text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
                             Tag Usage
                         </h3>
-                        <span class="text-xs text-gray-500"><?= $totalTags ?> tag<?= $totalTags != 1 ? 's' : '' ?> total</span>
+                        <span class="text-xs text-gray-500 dark:text-slate-400">{{ totalTags }} tag{{ totalTags != 1 ? 's' : '' }} total</span>
                     </div>
                     <div class="p-5">
-                        <?php if (!empty($topTags)): ?>
+                        {% if topTags is not empty %}
                             <div class="space-y-3">
-                                <?php foreach ($topTags as $tt): ?>
-                                    <?php $pct = $totalDomains > 0 ? round(($tt['usage_count'] / $totalDomains) * 100) : 0; ?>
+                                {% for tt in topTags %}
+                                    {% set pct = totalDomains > 0 ? ((tt.usage_count / totalDomains) * 100)|round : 0 %}
                                     <div>
                                         <div class="flex items-center justify-between mb-1">
-                                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border <?= htmlspecialchars($tt['color'] ?? 'bg-gray-100 text-gray-700 border-gray-300') ?>">
+                                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ tt.color|default('bg-gray-100 text-gray-700 border-gray-300') }}">
                                                 <i class="fas fa-tag mr-1" style="font-size: 8px;"></i>
-                                                <?= htmlspecialchars($tt['name']) ?>
+                                                {{ tt.name }}
                                             </span>
-                                            <span class="text-xs text-gray-500"><?= $tt['usage_count'] ?> domain<?= $tt['usage_count'] != 1 ? 's' : '' ?> (<?= $pct ?>%)</span>
+                                            <span class="text-xs text-gray-500 dark:text-slate-400">{{ tt.usage_count }} domain{{ tt.usage_count != 1 ? 's' : '' }} ({{ pct }}%)</span>
                                         </div>
-                                        <div class="w-full bg-gray-100 rounded-full h-1.5">
-                                            <div class="bg-primary rounded-full h-1.5" style="width: <?= max(2, $pct) ?>%"></div>
+                                        <div class="w-full bg-gray-100 dark:bg-slate-700 rounded-full h-1.5">
+                                            <div class="bg-primary rounded-full h-1.5" style="width: {{ max(2, pct) }}%"></div>
                                         </div>
                                     </div>
-                                <?php endforeach; ?>
+                                {% endfor %}
                             </div>
-                        <?php else: ?>
+                        {% else %}
                             <div class="text-center py-4">
-                                <i class="fas fa-tags text-gray-300 text-2xl mb-2"></i>
-                                <p class="text-sm text-gray-500">No tags in use</p>
+                                <i class="fas fa-tags text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                                <p class="text-sm text-gray-500 dark:text-slate-400">No tags in use</p>
                             </div>
-                        <?php endif; ?>
+                        {% endif %}
                     </div>
                 </div>
 
                 <!-- Notification Coverage -->
-                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
-                    <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
-                        <h3 class="text-sm font-semibold text-gray-900 flex items-center">
-                            <i class="fas fa-bell text-gray-400 mr-2 text-xs"></i>
+                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
+                    <div class="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
+                            <i class="fas fa-bell text-gray-400 dark:text-slate-500 mr-2 text-xs"></i>
                             Notification Coverage
                         </h3>
-                        <span class="text-xs text-gray-500"><?= $totalGroups ?> group<?= $totalGroups != 1 ? 's' : '' ?>, <?= $totalChannels ?> channel<?= $totalChannels != 1 ? 's' : '' ?></span>
+                        <span class="text-xs text-gray-500 dark:text-slate-400">{{ totalGroups }} group{{ totalGroups != 1 ? 's' : '' }}, {{ totalChannels }} channel{{ totalChannels != 1 ? 's' : '' }}</span>
                     </div>
                     <div class="p-5">
-                        <?php if ($totalDomains > 0): ?>
-                            <?php $coveragePct = round(($domainsWithGroup / $totalDomains) * 100); ?>
+                        {% if totalDomains > 0 %}
+                            {% set coveragePct = ((domainsWithGroup / totalDomains) * 100)|round %}
                             <div class="flex items-center justify-center mb-4">
                                 <div class="relative w-28 h-28">
                                     <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 36 36">
-                                        <path class="text-gray-200" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
-                                        <path class="text-primary" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="<?= $coveragePct ?>, 100" stroke-linecap="round" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
+                                        <path class="text-gray-200 dark:text-slate-600" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
+                                        <path class="text-primary" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="{{ coveragePct }}, 100" stroke-linecap="round" d="M18 2.0845a15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831"/>
                                     </svg>
                                     <div class="absolute inset-0 flex items-center justify-center">
-                                        <span class="text-xl font-bold text-gray-900"><?= $coveragePct ?>%</span>
+                                        <span class="text-xl font-bold text-gray-900 dark:text-white">{{ coveragePct }}%</span>
                                     </div>
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 gap-3 text-center">
-                                <div class="bg-green-50 border border-green-200 rounded-lg p-3">
-                                    <p class="text-lg font-bold text-green-700"><?= $domainsWithGroup ?></p>
-                                    <p class="text-xs text-green-600">With Notifications</p>
+                                <div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-lg p-3">
+                                    <p class="text-lg font-bold text-green-700 dark:text-green-400">{{ domainsWithGroup }}</p>
+                                    <p class="text-xs text-green-600 dark:text-green-400">With Notifications</p>
                                 </div>
-                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                                    <p class="text-lg font-bold text-gray-700"><?= $domainsWithoutGroup ?></p>
-                                    <p class="text-xs text-gray-500">Without Notifications</p>
+                                <div class="bg-gray-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg p-3">
+                                    <p class="text-lg font-bold text-gray-700 dark:text-slate-300">{{ domainsWithoutGroup }}</p>
+                                    <p class="text-xs text-gray-500 dark:text-slate-400">Without Notifications</p>
                                 </div>
                             </div>
-                        <?php else: ?>
+                        {% else %}
                             <div class="text-center py-4">
-                                <i class="fas fa-bell-slash text-gray-300 text-2xl mb-2"></i>
-                                <p class="text-sm text-gray-500">No domains to monitor</p>
+                                <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-2xl mb-2"></i>
+                                <p class="text-sm text-gray-500 dark:text-slate-400">No domains to monitor</p>
                             </div>
-                        <?php endif; ?>
+                        {% endif %}
                     </div>
                 </div>
             </div>
@@ -420,38 +401,20 @@ $totalGroups = count($groups);
 
         <!-- Domains Tab -->
         <div id="content-domains" class="tab-content hidden">
-            <?php if (!empty($domains)): ?>
-                <?php
-                // Build unique tag and group lists for filters
-                $domainTagNames = [];
-                $domainGroupNames = [];
-                foreach ($domains as $d) {
-                    if (!empty($d['tags'])) {
-                        foreach (explode(',', $d['tags']) as $dt) {
-                            $dt = trim($dt);
-                            if ($dt && !in_array($dt, $domainTagNames)) $domainTagNames[] = $dt;
-                        }
-                    }
-                    if (!empty($d['group_name']) && !in_array($d['group_name'], $domainGroupNames)) {
-                        $domainGroupNames[] = $d['group_name'];
-                    }
-                }
-                sort($domainTagNames);
-                sort($domainGroupNames);
-                ?>
+            {% if domains is not empty %}
                 <!-- Filters -->
                 <div class="mb-4">
                     <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
                         <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
+                            <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Search</label>
                             <div class="relative">
-                                <input type="text" id="domainSearch" placeholder="Search domains..." onkeyup="filterDomains()" class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                                <input type="text" id="domainSearch" placeholder="Search domains..." onkeyup="filterDomains()" class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
                             </div>
                         </div>
                         <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
-                            <select id="domainStatusFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                            <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Status</label>
+                            <select id="domainStatusFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                 <option value="">All Statuses</option>
                                 <option value="Active">Active</option>
                                 <option value="Expiring Soon">Expiring Soon</option>
@@ -464,352 +427,350 @@ $totalGroups = count($groups);
                             </select>
                         </div>
                         <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1.5">Tags</label>
-                            <select id="domainTagFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                            <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Tags</label>
+                            <select id="domainTagFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                 <option value="">All Tags</option>
-                                <?php foreach ($domainTagNames as $dtn): ?>
-                                    <option value="<?= htmlspecialchars($dtn) ?>"><?= htmlspecialchars(ucfirst($dtn)) ?></option>
-                                <?php endforeach; ?>
+                                {% for dtn in domainTagNames|default([]) %}
+                                    <option value="{{ dtn }}">{{ dtn|capitalize }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                         <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1.5">Group</label>
-                            <select id="domainGroupFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                            <label class="block text-xs font-medium text-gray-700 dark:text-slate-300 mb-1.5">Group</label>
+                            <select id="domainGroupFilter" onchange="filterDomains()" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                 <option value="">All Groups</option>
-                                <?php foreach ($domainGroupNames as $dgn): ?>
-                                    <option value="<?= htmlspecialchars($dgn) ?>"><?= htmlspecialchars($dgn) ?></option>
-                                <?php endforeach; ?>
+                                {% for dgn in domainGroupNames|default([]) %}
+                                    <option value="{{ dgn }}">{{ dgn }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                         <div class="flex items-end space-x-2">
-                            <button onclick="clearDomainFilters()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
+                            <button onclick="clearDomainFilters()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
                                 <i class="fas fa-times mr-1"></i> Clear
                             </button>
                         </div>
                     </div>
                 </div>
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200" id="domainsTable">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700" id="domainsTable">
+                        <thead class="bg-gray-50 dark:bg-slate-900">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(0)">
-                                    <span class="flex items-center">Domain <i class="fas fa-sort text-gray-400 ml-1 text-xs" id="domain-sort-icon-0"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(0)">
+                                    <span class="flex items-center">Domain <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs" id="domain-sort-icon-0"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(1)">
-                                    <span class="flex items-center">Registrar <i class="fas fa-sort text-gray-400 ml-1 text-xs" id="domain-sort-icon-1"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(1)">
+                                    <span class="flex items-center">Registrar <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs" id="domain-sort-icon-1"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(2)">
-                                    <span class="flex items-center">Expiration <i class="fas fa-sort text-gray-400 ml-1 text-xs" id="domain-sort-icon-2"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(2)">
+                                    <span class="flex items-center">Expiration <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs" id="domain-sort-icon-2"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(3)">
-                                    <span class="flex items-center">Status <i class="fas fa-sort text-gray-400 ml-1 text-xs" id="domain-sort-icon-3"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(3)">
+                                    <span class="flex items-center">Status <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs" id="domain-sort-icon-3"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(4)">
-                                    <span class="flex items-center">Group <i class="fas fa-sort text-gray-400 ml-1 text-xs" id="domain-sort-icon-4"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortDomains(4)">
+                                    <span class="flex items-center">Group <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs" id="domain-sort-icon-4"></i></span>
                                 </th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-100">
-                            <?php foreach ($domains as $domain): ?>
-                                <tr class="hover:bg-gray-50 transition-colors domain-row"
-                                    data-domain-name="<?= htmlspecialchars(strtolower($domain['domain_name'])) ?>"
-                                    data-domain-status="<?= htmlspecialchars($domain['statusText'] ?? '') ?>"
-                                    data-domain-tags="<?= htmlspecialchars(strtolower($domain['tags'] ?? '')) ?>"
-                                    data-domain-group="<?= htmlspecialchars($domain['group_name'] ?? '') ?>">
+                        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-100 dark:divide-slate-700">
+                            {% for domain in domains %}
+                                <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors domain-row"
+                                    data-domain-name="{{ domain.domain_name|lower }}"
+                                    data-domain-status="{{ domain.statusText|default('') }}"
+                                    data-domain-tags="{{ (domain.tags|default(''))|lower }}"
+                                    data-domain-group="{{ domain.group_name|default('') }}">
                                     <td class="px-6 py-4">
                                         <div class="flex items-center">
                                             <div class="flex-shrink-0 h-10 w-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center">
                                                 <i class="fas fa-globe text-primary"></i>
                                             </div>
                                             <div class="ml-4">
-                                                <a href="/domains/<?= $domain['id'] ?>" class="text-sm font-semibold text-gray-900 hover:text-primary"><?= htmlspecialchars($domain['domain_name']) ?></a>
+                                                <a href="/domains/{{ domain.id }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-primary">{{ domain.domain_name }}</a>
                                                 <div class="flex items-center gap-1.5 mt-1">
-                                                    <?php
-                                                    $domainTags = !empty($domain['tags']) ? explode(',', $domain['tags']) : [];
-                                                    $tagColors = !empty($domain['tag_colors']) ? explode('|', $domain['tag_colors']) : [];
-                                                    foreach ($domainTags as $index => $dtag):
-                                                        $dtag = trim($dtag);
-                                                        $colorClass = isset($tagColors[$index]) ? $tagColors[$index] : 'bg-gray-100 text-gray-700 border-gray-200';
-                                                    ?>
-                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border <?= $colorClass ?>">
+                                                    {% set domainTags = domain.tags ? domain.tags|split(',') : [] %}
+                                                    {% set tagColors = domain.tag_colors ? domain.tag_colors|split('|') : [] %}
+                                                    {% for dtag in domainTags %}
+                                                        {% set dtag = dtag|trim %}
+                                                        {% set colorClass = tagColors[loop.index0]|default('bg-gray-100 text-gray-700 border-gray-200') %}
+                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ colorClass }}">
                                                             <i class="fas fa-tag mr-1" style="font-size: 9px;"></i>
-                                                            <?= htmlspecialchars(ucfirst($dtag)) ?>
+                                                            {{ dtag|capitalize }}
                                                         </span>
-                                                    <?php endforeach; ?>
+                                                    {% endfor %}
                                                 </div>
                                             </div>
                                         </div>
                                     </td>
                                     <td class="px-6 py-4 whitespace-nowrap">
-                                        <?php if (!empty($domain['registrar'])): ?>
+                                        {% if domain.registrar %}
                                             <div class="flex items-center">
-                                                <i class="fas fa-building text-gray-400 mr-2"></i>
-                                                <span class="text-sm text-gray-900"><?= htmlspecialchars($domain['registrar']) ?></span>
+                                                <i class="fas fa-building text-gray-400 dark:text-slate-500 mr-2"></i>
+                                                <span class="text-sm text-gray-900 dark:text-white">{{ domain.registrar }}</span>
                                             </div>
-                                        <?php else: ?>
-                                            <span class="text-sm text-gray-400">Unknown</span>
-                                        <?php endif; ?>
+                                        {% else %}
+                                            <span class="text-sm text-gray-400 dark:text-slate-500">Unknown</span>
+                                        {% endif %}
                                     </td>
                                     <td class="px-6 py-4 whitespace-nowrap">
-                                        <?php if (!empty($domain['expiration_date'])): ?>
+                                        {% if domain.expiration_date %}
                                             <div class="text-sm">
-                                                <div class="font-medium text-gray-900"><?= date('M d, Y', strtotime($domain['expiration_date'])) ?></div>
-                                                <div class="text-xs <?= $domain['expiryClass'] ?>">
-                                                    <?= $domain['daysLeft'] ?> days
+                                                <div class="font-medium text-gray-900 dark:text-white">{{ domain.expiration_date|date('M d, Y') }}</div>
+                                                <div class="text-xs {{ domain.expiryClass }}">
+                                                    {{ domain.daysLeft }} days
                                                 </div>
                                             </div>
-                                        <?php else: ?>
-                                            <span class="text-sm text-gray-400">Not set</span>
-                                        <?php endif; ?>
+                                        {% else %}
+                                            <span class="text-sm text-gray-400 dark:text-slate-500">Not set</span>
+                                        {% endif %}
                                     </td>
                                     <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border <?= $domain['statusClass'] ?>">
-                                            <i class="fas <?= $domain['statusIcon'] ?> mr-1"></i>
-                                            <?= $domain['statusText'] ?>
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ domain.statusClass }}">
+                                            <i class="fas {{ domain.statusIcon }} mr-1"></i>
+                                            {{ domain.statusText }}
                                         </span>
                                     </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
-                                        <?= htmlspecialchars($domain['group_name'] ?? '—') ?>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-slate-400">
+                                        {{ domain.group_name|default('—') }}
                                     </td>
                                 </tr>
-                            <?php endforeach; ?>
+                            {% endfor %}
                         </tbody>
                     </table>
                 </div>
                 <!-- Pagination -->
-                <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
-                    <div class="text-sm text-gray-500" id="domainPaginationInfo">
-                        Showing 1-<?= min(25, $totalDomains) ?> of <?= $totalDomains ?> domains
+                <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-slate-700">
+                    <div class="text-sm text-gray-500 dark:text-slate-400" id="domainPaginationInfo">
+                        Showing 1-{{ min(25, totalDomains) }} of {{ totalDomains }} domains
                     </div>
                     <div class="flex items-center gap-2">
-                        <button onclick="domainPageNav('prev')" id="domainPrevBtn" class="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        <button onclick="domainPageNav('prev')" id="domainPrevBtn" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                             <i class="fas fa-chevron-left mr-1"></i> Previous
                         </button>
                         <span id="domainPageNumbers" class="flex items-center gap-1"></span>
-                        <button onclick="domainPageNav('next')" id="domainNextBtn" class="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+                        <button onclick="domainPageNav('next')" id="domainNextBtn" class="px-3 py-1.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                             Next <i class="fas fa-chevron-right ml-1"></i>
                         </button>
                     </div>
                 </div>
-            <?php else: ?>
+            {% else %}
                 <div class="p-12 text-center">
-                    <i class="fas fa-globe text-gray-300 text-4xl mb-3"></i>
-                    <p class="text-sm text-gray-600">This user has no domains</p>
+                    <i class="fas fa-globe text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+                    <p class="text-sm text-gray-600 dark:text-slate-400">This user has no domains</p>
                 </div>
-            <?php endif; ?>
+            {% endif %}
         </div>
 
         <!-- Tags Tab -->
         <div id="content-tags" class="tab-content hidden">
-            <?php if (!empty($tags)): ?>
+            {% if tags is not empty %}
                 <!-- Filters -->
                 <div class="mb-4">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                         <div class="relative">
-                            <input type="text" id="tagSearch" placeholder="Search tags..." onkeyup="filterTags()" class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
-                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                            <input type="text" id="tagSearch" placeholder="Search tags..." onkeyup="filterTags()" class="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
+                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-slate-500 text-xs"></i>
                         </div>
                         <div>
-                            <select id="tagTypeFilter" onchange="filterTags()" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm">
+                            <select id="tagTypeFilter" onchange="filterTags()" class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                 <option value="">All Types</option>
                                 <option value="personal">Personal</option>
                                 <option value="global">Global</option>
                             </select>
                         </div>
                         <div class="flex items-center">
-                            <button onclick="clearTagFilters()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
+                            <button onclick="clearTagFilters()" class="px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
                                 <i class="fas fa-times mr-1"></i> Clear
                             </button>
                         </div>
                     </div>
                 </div>
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200" id="tagsTable">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700" id="tagsTable">
+                        <thead class="bg-gray-50 dark:bg-slate-900">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 0)">
-                                    <span class="flex items-center">Tag <i class="fas fa-sort text-gray-400 ml-1 text-xs"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 0)">
+                                    <span class="flex items-center">Tag <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 1)">
-                                    <span class="flex items-center">Description <i class="fas fa-sort text-gray-400 ml-1 text-xs"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 1)">
+                                    <span class="flex items-center">Description <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 2)">
-                                    <span class="flex items-center">Domains <i class="fas fa-sort text-gray-400 ml-1 text-xs"></i></span>
+                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:text-primary" onclick="sortTable('tagsTable', 2)">
+                                    <span class="flex items-center">Domains <i class="fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs"></i></span>
                                 </th>
-                                <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                                <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">Actions</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-100">
-                            <?php foreach ($tags as $tag): ?>
-                                <?php $tagDomainsList = $tag['domains'] ?? []; ?>
-                                <tr class="hover:bg-gray-50 transition-colors tag-row" data-tag-type="<?= $tag['user_id'] === null ? 'global' : 'personal' ?>">
+                        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-100 dark:divide-slate-700">
+                            {% for tag in tags %}
+                                {% set tagDomainsList = tag.domains|default([]) %}
+                                <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors tag-row" data-tag-type="{{ tag.user_id is null ? 'global' : 'personal' }}">
                                     <td class="px-6 py-4">
                                         <div class="flex items-center">
-                                            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border <?= htmlspecialchars($tag['color'] ?? 'bg-gray-100 text-gray-800 border-gray-300') ?>">
+                                            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border {{ tag.color|default('bg-gray-100 text-gray-800 border-gray-300') }}">
                                                 <i class="fas fa-tag mr-1" style="font-size: 9px;"></i>
-                                                <?= htmlspecialchars($tag['name']) ?>
+                                                {{ tag.name }}
                                             </span>
-                                            <?php if ($tag['user_id'] === null): ?>
-                                                <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                            {% if tag.user_id is null %}
+                                                <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">
                                                     <i class="fas fa-globe mr-1" style="font-size: 8px;"></i>
                                                     Global
                                                 </span>
-                                            <?php endif; ?>
+                                            {% endif %}
                                         </div>
                                     </td>
                                     <td class="px-6 py-4">
-                                        <div class="text-sm text-gray-900">
-                                            <?= !empty($tag['description']) ? htmlspecialchars($tag['description']) : '<span class="text-gray-400 italic">No description</span>' ?>
+                                        <div class="text-sm text-gray-900 dark:text-white">
+                                            {% if tag.description %}
+                                                {{ tag.description }}
+                                            {% else %}
+                                                <span class="text-gray-400 dark:text-slate-500 italic">No description</span>
+                                            {% endif %}
                                         </div>
                                     </td>
                                     <td class="px-6 py-4">
-                                        <div class="flex items-center text-sm text-gray-500">
+                                        <div class="flex items-center text-sm text-gray-500 dark:text-slate-400">
                                             <i class="fas fa-link mr-1"></i>
-                                            <?= $tag['usage_count'] ?? 0 ?> domain<?= ($tag['usage_count'] ?? 0) != 1 ? 's' : '' ?>
+                                            {{ tag.usage_count|default(0) }} domain{{ (tag.usage_count|default(0)) != 1 ? 's' : '' }}
                                         </div>
                                     </td>
                                     <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                         <div class="flex items-center justify-end space-x-2">
-                                            <?php if (!empty($tagDomainsList)): ?>
-                                                <button onclick="toggleTagDomains(<?= $tag['id'] ?>)" class="text-gray-500 hover:text-primary" title="Show domains">
-                                                    <i class="fas fa-chevron-down text-xs" id="tag-chevron-<?= $tag['id'] ?>"></i>
+                                            {% if tagDomainsList is not empty %}
+                                                <button onclick="toggleTagDomains({{ tag.id }})" class="text-gray-500 dark:text-slate-400 hover:text-primary" title="Show domains">
+                                                    <i class="fas fa-chevron-down text-xs" id="tag-chevron-{{ tag.id }}"></i>
                                                 </button>
-                                            <?php endif; ?>
-                                            <a href="/tags/<?= $tag['id'] ?>" class="text-blue-600 hover:text-blue-800" title="View tag page">
+                                            {% endif %}
+                                            <a href="/tags/{{ tag.id }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="View tag page">
                                                 <i class="fas fa-eye"></i>
                                             </a>
                                         </div>
                                     </td>
                                 </tr>
                                 <!-- Expandable domains list for this tag -->
-                                <?php if (!empty($tagDomainsList)): ?>
-                                    <tr id="tag-domains-<?= $tag['id'] ?>" class="hidden tag-domains-row" data-parent-tag="<?= $tag['id'] ?>">
+                                {% if tagDomainsList is not empty %}
+                                    <tr id="tag-domains-{{ tag.id }}" class="hidden tag-domains-row" data-parent-tag="{{ tag.id }}">
                                         <td colspan="4" class="px-6 py-0">
                                             <div class="py-3 pl-4 border-l-2 border-primary ml-2">
                                                 <div class="space-y-1.5">
-                                                    <?php foreach ($tagDomainsList as $td): ?>
-                                                        <div class="flex items-center justify-between py-1.5 px-3 bg-gray-50 rounded-lg text-sm">
+                                                    {% for td in tagDomainsList %}
+                                                        <div class="flex items-center justify-between py-1.5 px-3 bg-gray-50 dark:bg-slate-900 rounded-lg text-sm">
                                                             <div class="flex items-center gap-3">
                                                                 <i class="fas fa-globe text-primary text-xs"></i>
-                                                                <a href="/domains/<?= $td['id'] ?>" class="font-medium text-gray-900 hover:text-primary"><?= htmlspecialchars($td['domain_name']) ?></a>
+                                                                <a href="/domains/{{ td.id }}" class="font-medium text-gray-900 dark:text-white hover:text-primary">{{ td.domain_name }}</a>
                                                             </div>
                                                             <div class="flex items-center gap-4">
-                                                                <?php if (!empty($td['expiration_date'])): ?>
-                                                                    <span class="text-xs text-gray-500"><?= date('M d, Y', strtotime($td['expiration_date'])) ?></span>
-                                                                <?php endif; ?>
-                                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold border <?= $td['statusClass'] ?>">
-                                                                    <i class="fas <?= $td['statusIcon'] ?> mr-1" style="font-size: 8px;"></i>
-                                                                    <?= $td['statusText'] ?>
+                                                                {% if td.expiration_date %}
+                                                                    <span class="text-xs text-gray-500 dark:text-slate-400">{{ td.expiration_date|date('M d, Y') }}</span>
+                                                                {% endif %}
+                                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold border {{ td.statusClass }}">
+                                                                    <i class="fas {{ td.statusIcon }} mr-1" style="font-size: 8px;"></i>
+                                                                    {{ td.statusText }}
                                                                 </span>
                                                             </div>
                                                         </div>
-                                                    <?php endforeach; ?>
+                                                    {% endfor %}
                                                 </div>
                                             </div>
                                         </td>
                                     </tr>
-                                <?php endif; ?>
-                            <?php endforeach; ?>
+                                {% endif %}
+                            {% endfor %}
                         </tbody>
                     </table>
                 </div>
-            <?php else: ?>
+            {% else %}
                 <div class="p-12 text-center">
-                    <i class="fas fa-tags text-gray-300 text-4xl mb-3"></i>
-                    <p class="text-sm text-gray-600">This user has no tags</p>
+                    <i class="fas fa-tags text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+                    <p class="text-sm text-gray-600 dark:text-slate-400">This user has no tags</p>
                 </div>
-            <?php endif; ?>
+            {% endif %}
         </div>
 
         <!-- Notification Groups Tab -->
         <div id="content-groups" class="tab-content hidden">
-            <?php if (!empty($groups)): ?>
+            {% if groups is not empty %}
+                {% set channelIcons = {
+                    'email': {'icon': 'fa-envelope', 'color': 'text-blue-500', 'bg': 'bg-blue-50 dark:bg-blue-500/10'},
+                    'telegram': {'icon': 'fa-paper-plane', 'color': 'text-sky-500', 'bg': 'bg-sky-50 dark:bg-sky-500/10'},
+                    'discord': {'icon': 'fa-comment', 'color': 'text-indigo-500', 'bg': 'bg-indigo-50 dark:bg-indigo-500/10'},
+                    'slack': {'icon': 'fa-hashtag', 'color': 'text-purple-500', 'bg': 'bg-purple-50 dark:bg-purple-500/10'},
+                    'webhook': {'icon': 'fa-link', 'color': 'text-gray-500', 'bg': 'bg-gray-50 dark:bg-slate-700'},
+                    'pushover': {'icon': 'fa-mobile-alt', 'color': 'text-green-500', 'bg': 'bg-green-50 dark:bg-green-500/10'},
+                    'mattermost': {'icon': 'fa-comments', 'color': 'text-blue-600', 'bg': 'bg-blue-50 dark:bg-blue-500/10'}
+                } %}
                 <div class="space-y-2">
-                    <?php foreach ($groups as $group): ?>
-                        <?php $groupChannels = $group['channels'] ?? []; ?>
-                        <div class="border border-gray-200 rounded-lg overflow-hidden">
+                    {% for group in groups %}
+                        {% set groupChannels = group.channels|default([]) %}
+                        <div class="border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
                             <!-- Group Header (clickable) -->
-                            <button onclick="toggleGroup(<?= $group['id'] ?>)" class="w-full flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors p-4 text-left">
+                            <button onclick="toggleGroup({{ group.id }})" class="w-full flex items-center justify-between bg-gray-50 dark:bg-slate-900 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors p-4 text-left">
                                 <div class="flex items-center gap-3">
                                     <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center flex-shrink-0">
                                         <i class="fas fa-bell text-primary"></i>
                                     </div>
                                     <div>
-                                        <div class="text-sm font-semibold text-gray-900"><?= htmlspecialchars($group['name']) ?></div>
-                                        <div class="text-xs text-gray-500 mt-0.5"><?= htmlspecialchars($group['description'] ?? 'No description') ?></div>
+                                        <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ group.name }}</div>
+                                        <div class="text-xs text-gray-500 dark:text-slate-400 mt-0.5">{{ group.description|default('No description') }}</div>
                                     </div>
                                 </div>
                                 <div class="flex items-center gap-3">
-                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
+                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">
                                         <i class="fas fa-plug mr-1"></i>
-                                        <?= $group['channel_count'] ?? 0 ?> channel<?= ($group['channel_count'] ?? 0) != 1 ? 's' : '' ?>
+                                        {{ group.channel_count|default(0) }} channel{{ (group.channel_count|default(0)) != 1 ? 's' : '' }}
                                     </span>
-                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400">
                                         <i class="fas fa-globe mr-1"></i>
-                                        <?= $group['domain_count'] ?? 0 ?> domain<?= ($group['domain_count'] ?? 0) != 1 ? 's' : '' ?>
+                                        {{ group.domain_count|default(0) }} domain{{ (group.domain_count|default(0)) != 1 ? 's' : '' }}
                                     </span>
-                                    <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="group-chevron-<?= $group['id'] ?>"></i>
+                                    <i class="fas fa-chevron-down text-gray-400 dark:text-slate-500 text-xs transition-transform" id="group-chevron-{{ group.id }}"></i>
                                 </div>
                             </button>
                             <!-- Channels (hidden by default) -->
-                            <div id="group-channels-<?= $group['id'] ?>" class="hidden border-t border-gray-200">
-                                <?php if (!empty($groupChannels)): ?>
-                                    <div class="divide-y divide-gray-100">
-                                        <?php
-                                        $channelIcons = [
-                                            'email' => ['icon' => 'fa-envelope', 'color' => 'text-blue-500', 'bg' => 'bg-blue-50'],
-                                            'telegram' => ['icon' => 'fa-paper-plane', 'color' => 'text-sky-500', 'bg' => 'bg-sky-50'],
-                                            'discord' => ['icon' => 'fa-comment', 'color' => 'text-indigo-500', 'bg' => 'bg-indigo-50'],
-                                            'slack' => ['icon' => 'fa-hashtag', 'color' => 'text-purple-500', 'bg' => 'bg-purple-50'],
-                                            'webhook' => ['icon' => 'fa-link', 'color' => 'text-gray-500', 'bg' => 'bg-gray-50'],
-                                            'pushover' => ['icon' => 'fa-mobile-alt', 'color' => 'text-green-500', 'bg' => 'bg-green-50'],
-                                            'mattermost' => ['icon' => 'fa-comments', 'color' => 'text-blue-600', 'bg' => 'bg-blue-50'],
-                                        ];
-                                        ?>
-                                        <?php foreach ($groupChannels as $channel): ?>
-                                            <?php
-                                            $type = $channel['channel_type'] ?? 'webhook';
-                                            $chIcon = $channelIcons[$type] ?? ['icon' => 'fa-bell', 'color' => 'text-gray-500', 'bg' => 'bg-gray-50'];
-                                            $isChActive = (bool)($channel['is_active'] ?? false);
-                                            ?>
-                                            <div class="flex items-center justify-between px-4 py-3 <?= $isChActive ? '' : 'opacity-50' ?>">
+                            <div id="group-channels-{{ group.id }}" class="hidden border-t border-gray-200 dark:border-slate-700">
+                                {% if groupChannels is not empty %}
+                                    <div class="divide-y divide-gray-100 dark:divide-slate-700">
+                                        {% for channel in groupChannels %}
+                                            {% set type = channel.channel_type|default('webhook') %}
+                                            {% set chIcon = channelIcons[type]|default({'icon': 'fa-bell', 'color': 'text-gray-500', 'bg': 'bg-gray-50 dark:bg-slate-700'}) %}
+                                            {% set isChActive = channel.is_active|default(false) %}
+                                            <div class="flex items-center justify-between px-4 py-3 {{ not isChActive ? 'opacity-50' : '' }}">
                                                 <div class="flex items-center gap-3">
-                                                    <div class="w-8 h-8 <?= $chIcon['bg'] ?> rounded-lg flex items-center justify-center flex-shrink-0">
-                                                        <i class="fas <?= $chIcon['icon'] ?> <?= $chIcon['color'] ?> text-sm"></i>
+                                                    <div class="w-8 h-8 {{ chIcon.bg }} rounded-lg flex items-center justify-center flex-shrink-0">
+                                                        <i class="fas {{ chIcon.icon }} {{ chIcon.color }} text-sm"></i>
                                                     </div>
                                                     <div>
-                                                        <p class="text-sm font-medium text-gray-900"><?= htmlspecialchars($channel['name'] ?? ucfirst($type)) ?></p>
-                                                        <p class="text-xs text-gray-500"><?= ucfirst($type) ?></p>
+                                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ channel.name|default(type|capitalize) }}</p>
+                                                        <p class="text-xs text-gray-500 dark:text-slate-400">{{ type|capitalize }}</p>
                                                     </div>
                                                 </div>
-                                                <?php if ($isChActive): ?>
-                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                                                {% if isChActive %}
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400">
                                                         <i class="fas fa-check-circle mr-1" style="font-size: 8px;"></i>Active
                                                     </span>
-                                                <?php else: ?>
-                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
+                                                {% else %}
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-slate-700 text-gray-500 dark:text-slate-400">
                                                         <i class="fas fa-times-circle mr-1" style="font-size: 8px;"></i>Inactive
                                                     </span>
-                                                <?php endif; ?>
+                                                {% endif %}
                                             </div>
-                                        <?php endforeach; ?>
+                                        {% endfor %}
                                     </div>
-                                <?php else: ?>
-                                    <div class="p-4 text-center text-sm text-gray-500">
-                                        <i class="fas fa-plug text-gray-300 mr-1"></i>
+                                {% else %}
+                                    <div class="p-4 text-center text-sm text-gray-500 dark:text-slate-400">
+                                        <i class="fas fa-plug text-gray-300 dark:text-slate-600 mr-1"></i>
                                         No channels configured
                                     </div>
-                                <?php endif; ?>
+                                {% endif %}
                             </div>
                         </div>
-                    <?php endforeach; ?>
+                    {% endfor %}
                 </div>
-            <?php else: ?>
+            {% else %}
                 <div class="p-12 text-center">
-                    <i class="fas fa-bell-slash text-gray-300 text-4xl mb-3"></i>
-                    <p class="text-sm text-gray-600">This user has no notification groups</p>
+                    <i class="fas fa-bell-slash text-gray-300 dark:text-slate-600 text-4xl mb-3"></i>
+                    <p class="text-sm text-gray-600 dark:text-slate-400">This user has no notification groups</p>
                 </div>
-            <?php endif; ?>
+            {% endif %}
         </div>
 
     </div>
@@ -833,13 +794,11 @@ window.addEventListener('DOMContentLoaded', function() {
     const hash = window.location.hash.substring(1);
     const validTabs = ['overview', 'domains', 'tags', 'groups'];
     switchTab(hash && validTabs.includes(hash) ? hash : 'overview');
-    
-    // Initialize domain pagination
+
     filteredDomainRows = Array.from(document.querySelectorAll('.domain-row'));
     renderDomainPage();
 });
 
-// Domain filtering with pagination
 const DOMAINS_PER_PAGE = 25;
 let domainCurrentPage = 1;
 let filteredDomainRows = [];
@@ -849,24 +808,24 @@ function filterDomains() {
     const statusFilter = document.getElementById('domainStatusFilter').value;
     const tagFilter = document.getElementById('domainTagFilter').value.toLowerCase();
     const groupFilter = document.getElementById('domainGroupFilter').value;
-    
+
     const allRows = Array.from(document.querySelectorAll('.domain-row'));
-    
+
     filteredDomainRows = allRows.filter(row => {
         const name = row.getAttribute('data-domain-name') || '';
         const status = row.getAttribute('data-domain-status') || '';
         const tags = row.getAttribute('data-domain-tags') || '';
         const group = row.getAttribute('data-domain-group') || '';
         const text = row.textContent.toLowerCase();
-        
+
         const matchesSearch = !query || text.includes(query);
         const matchesStatus = !statusFilter || status === statusFilter;
         const matchesTag = !tagFilter || tags.split(',').map(t => t.trim()).includes(tagFilter);
         const matchesGroup = !groupFilter || group === groupFilter;
-        
+
         return matchesSearch && matchesStatus && matchesTag && matchesGroup;
     });
-    
+
     domainCurrentPage = 1;
     renderDomainPage();
 }
@@ -877,16 +836,13 @@ function renderDomainPage() {
     const totalPages = Math.max(1, Math.ceil(total / DOMAINS_PER_PAGE));
     const start = (domainCurrentPage - 1) * DOMAINS_PER_PAGE;
     const end = start + DOMAINS_PER_PAGE;
-    
-    // Hide all rows first
+
     allRows.forEach(row => row.style.display = 'none');
-    
-    // Show only current page rows
+
     filteredDomainRows.forEach((row, i) => {
         row.style.display = (i >= start && i < end) ? '' : 'none';
     });
-    
-    // Update pagination info
+
     const info = document.getElementById('domainPaginationInfo');
     if (info) {
         if (total === 0) {
@@ -895,31 +851,29 @@ function renderDomainPage() {
             info.textContent = 'Showing ' + (start + 1) + '-' + Math.min(end, total) + ' of ' + total + ' domains';
         }
     }
-    
-    // Update buttons
+
     const prevBtn = document.getElementById('domainPrevBtn');
     const nextBtn = document.getElementById('domainNextBtn');
     if (prevBtn) prevBtn.disabled = domainCurrentPage <= 1;
     if (nextBtn) nextBtn.disabled = domainCurrentPage >= totalPages;
-    
-    // Render page numbers
+
     const pageNums = document.getElementById('domainPageNumbers');
     if (pageNums) {
         pageNums.innerHTML = '';
         for (let p = 1; p <= totalPages && p <= 7; p++) {
             const btn = document.createElement('button');
             btn.textContent = p;
-            btn.className = 'px-3 py-1.5 rounded-lg text-sm ' + 
-                (p === domainCurrentPage 
-                    ? 'bg-primary text-white font-medium' 
-                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50');
+            btn.className = 'px-3 py-1.5 rounded-lg text-sm ' +
+                (p === domainCurrentPage
+                    ? 'bg-primary text-white font-medium'
+                    : 'border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-700');
             btn.onclick = () => { domainCurrentPage = p; renderDomainPage(); };
             pageNums.appendChild(btn);
         }
         if (totalPages > 7) {
             const dots = document.createElement('span');
             dots.textContent = '...';
-            dots.className = 'px-2 text-gray-400 text-sm';
+            dots.className = 'px-2 text-gray-400 dark:text-slate-500 text-sm';
             pageNums.appendChild(dots);
         }
     }
@@ -940,52 +894,46 @@ function clearDomainFilters() {
     filterDomains();
 }
 
-// Domain column sorting (integrated with pagination)
 let domainSortCol = -1;
 let domainSortDir = '';
 function sortDomains(colIndex) {
     domainSortDir = (domainSortCol === colIndex && domainSortDir === 'asc') ? 'desc' : 'asc';
     domainSortCol = colIndex;
-    
+
     filteredDomainRows.sort((a, b) => {
         const aText = a.cells[colIndex] ? a.cells[colIndex].textContent.trim().toLowerCase() : '';
         const bText = b.cells[colIndex] ? b.cells[colIndex].textContent.trim().toLowerCase() : '';
         if (domainSortDir === 'asc') return aText.localeCompare(bText, undefined, { numeric: true });
         return bText.localeCompare(aText, undefined, { numeric: true });
     });
-    
-    // Also reorder in the DOM tbody so page rendering stays consistent
+
     const tbody = document.getElementById('domainsTable').querySelector('tbody');
     filteredDomainRows.forEach(row => tbody.appendChild(row));
-    
+
     domainCurrentPage = 1;
     renderDomainPage();
-    
-    // Update sort icons
+
     for (let i = 0; i <= 4; i++) {
         const icon = document.getElementById('domain-sort-icon-' + i);
         if (!icon) continue;
         if (i === colIndex) {
             icon.className = 'fas ' + (domainSortDir === 'asc' ? 'fa-sort-up' : 'fa-sort-down') + ' text-primary ml-1 text-xs';
         } else {
-            icon.className = 'fas fa-sort text-gray-400 ml-1 text-xs';
+            icon.className = 'fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs';
         }
     }
 }
 
-// Client-side table sorting (handles expandable child rows)
 let sortDirections = {};
 function sortTable(tableId, colIndex) {
     const table = document.getElementById(tableId);
     const tbody = table.querySelector('tbody');
-    
-    // Collect main rows with their child (expandable) rows
+
     const mainRows = [];
     const allRows = Array.from(tbody.querySelectorAll('tr'));
-    
+
     allRows.forEach(row => {
         if (row.classList.contains('tag-domains-row')) {
-            // This is a child row, attach to previous main row
             if (mainRows.length > 0) {
                 mainRows[mainRows.length - 1].children.push(row);
             }
@@ -993,50 +941,46 @@ function sortTable(tableId, colIndex) {
             mainRows.push({ row: row, children: [] });
         }
     });
-    
+
     const dir = sortDirections[tableId + '_' + colIndex] === 'asc' ? 'desc' : 'asc';
     sortDirections[tableId + '_' + colIndex] = dir;
-    
+
     mainRows.sort((a, b) => {
         const aText = a.row.cells[colIndex] ? a.row.cells[colIndex].textContent.trim().toLowerCase() : '';
         const bText = b.row.cells[colIndex] ? b.row.cells[colIndex].textContent.trim().toLowerCase() : '';
         if (dir === 'asc') return aText.localeCompare(bText, undefined, { numeric: true });
         return bText.localeCompare(aText, undefined, { numeric: true });
     });
-    
-    // Re-append rows in sorted order (main row + its children)
+
     mainRows.forEach(item => {
         tbody.appendChild(item.row);
         item.children.forEach(child => tbody.appendChild(child));
     });
-    
-    // Update sort icons
+
     table.querySelectorAll('thead th').forEach((th, i) => {
         const icon = th.querySelector('i');
         if (!icon) return;
         if (i === colIndex) {
             icon.className = 'fas ' + (dir === 'asc' ? 'fa-sort-up' : 'fa-sort-down') + ' text-primary ml-1 text-xs';
         } else {
-            icon.className = 'fas fa-sort text-gray-400 ml-1 text-xs';
+            icon.className = 'fas fa-sort text-gray-400 dark:text-slate-500 ml-1 text-xs';
         }
     });
 }
 
-// Tag search and type filter
 function filterTags() {
     const query = document.getElementById('tagSearch').value.toLowerCase();
     const typeFilter = document.getElementById('tagTypeFilter').value;
-    
+
     document.querySelectorAll('.tag-row').forEach(row => {
         const text = row.textContent.toLowerCase();
         const tagType = row.getAttribute('data-tag-type');
         const matchesSearch = !query || text.includes(query);
         const matchesType = !typeFilter || tagType === typeFilter;
         const visible = matchesSearch && matchesType;
-        
+
         row.style.display = visible ? '' : 'none';
-        
-        // Also hide/show child domain rows
+
         const tagId = row.querySelector('[id^="tag-chevron-"]');
         if (tagId) {
             const id = tagId.id.replace('tag-chevron-', '');
@@ -1055,11 +999,10 @@ function clearTagFilters() {
     filterTags();
 }
 
-// Toggle tag domains dropdown
 function toggleTagDomains(tagId) {
     const domainsRow = document.getElementById('tag-domains-' + tagId);
     const chevron = document.getElementById('tag-chevron-' + tagId);
-    
+
     if (domainsRow.classList.contains('hidden')) {
         domainsRow.classList.remove('hidden');
         chevron.style.transform = 'rotate(180deg)';
@@ -1069,11 +1012,10 @@ function toggleTagDomains(tagId) {
     }
 }
 
-// Toggle notification group channels
 function toggleGroup(groupId) {
     const channels = document.getElementById('group-channels-' + groupId);
     const chevron = document.getElementById('group-chevron-' + groupId);
-    
+
     if (channels.classList.contains('hidden')) {
         channels.classList.remove('hidden');
         chevron.style.transform = 'rotate(180deg)';
@@ -1083,8 +1025,4 @@ function toggleGroup(groupId) {
     }
 }
 </script>
-
-<?php
-$content = ob_get_clean();
-require __DIR__ . '/../layout/base.php';
-?>
+{% endblock %}
diff --git a/core/Controller.php b/core/Controller.php
index a332e32..9702c71 100644
--- a/core/Controller.php
+++ b/core/Controller.php
@@ -6,6 +6,15 @@ abstract class Controller
 {
     protected function view(string $view, array $data = []): void
     {
+        $twigPath = __DIR__ . "/../app/Views/$view.twig";
+
+        if (file_exists($twigPath)) {
+            $twig = TwigService::getInstance();
+            echo $twig->render("$view.twig", $data);
+            return;
+        }
+
+        // Fallback to legacy PHP view during migration
         extract($data);
         $viewPath = __DIR__ . "/../app/Views/$view.php";
 
@@ -13,7 +22,7 @@ abstract class Controller
             throw new \Exception("View not found: $view");
         }
 
-        require_once $viewPath;
+        require $viewPath;
     }
 
     protected function json($data, int $status = 200): void
diff --git a/core/Router.php b/core/Router.php
index 761b1cc..a936209 100644
--- a/core/Router.php
+++ b/core/Router.php
@@ -72,7 +72,12 @@ class Router
                 // Silently fail if logging is not available
             }
             
-            require_once __DIR__ . '/../app/Views/errors/404.php';
+            $twigPath = __DIR__ . '/../app/Views/errors/404.twig';
+            if (file_exists($twigPath)) {
+                echo TwigService::getInstance()->render('errors/404.twig');
+            } else {
+                require_once __DIR__ . '/../app/Views/errors/404.php';
+            }
             return;
         }
 
diff --git a/core/TwigService.php b/core/TwigService.php
new file mode 100644
index 0000000..22ddec9
--- /dev/null
+++ b/core/TwigService.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace Core;
+
+use Twig\Environment;
+use Twig\Loader\FilesystemLoader;
+use Twig\Extension\DebugExtension;
+use Twig\TwigFunction;
+use Twig\TwigFilter;
+
+class TwigService
+{
+    private static ?self $instance = null;
+    private Environment $twig;
+
+    private function __construct()
+    {
+        $viewsPath = PATH_ROOT . 'app/Views';
+        $loader = new FilesystemLoader($viewsPath);
+
+        $isDev = ($_ENV['APP_ENV'] ?? 'development') === 'development';
+        $cachePath = $isDev ? false : PATH_ROOT . 'cache/twig';
+
+        $this->twig = new Environment($loader, [
+            'cache' => $cachePath,
+            'debug' => $isDev,
+            'auto_reload' => $isDev,
+            'strict_variables' => false,
+            'autoescape' => 'html',
+        ]);
+
+        if ($isDev) {
+            $this->twig->addExtension(new DebugExtension());
+        }
+
+        $this->registerFunctions();
+        $this->registerFilters();
+    }
+
+    public static function getInstance(): self
+    {
+        if (self::$instance === null) {
+            self::$instance = new self();
+        }
+        return self::$instance;
+    }
+
+    public function getEnvironment(): Environment
+    {
+        return $this->twig;
+    }
+
+    /**
+     * Render a Twig template with data + automatically injected globals.
+     */
+    public function render(string $template, array $data = []): string
+    {
+        $globals = $this->getGlobals();
+        $context = array_merge($globals, $data);
+
+        return $this->twig->render($template, $context);
+    }
+
+    /**
+     * Collect layout-level data that every template may need.
+     * Computed on each render so values are always fresh.
+     */
+    private function getGlobals(): array
+    {
+        // Session flash messages (read & clear) — always safe
+        $flash = [];
+        foreach (['success', 'error', 'warning', 'info'] as $type) {
+            if (isset($_SESSION[$type])) {
+                $flash[$type] = $_SESSION[$type];
+                unset($_SESSION[$type]);
+            }
+        }
+
+        // Database-dependent globals are wrapped in try/catch so standalone
+        // pages (installer, error pages) still render when the DB is absent.
+        try {
+            $userId = Auth::id();
+
+            if ($userId) {
+                $notificationData = \App\Helpers\LayoutHelper::getNotifications($userId);
+                $recentNotifications = $notificationData['items'];
+                $unreadNotifications = $notificationData['unread_count'];
+                $updateBadge = Auth::isAdmin()
+                    ? \App\Helpers\LayoutHelper::getUpdateBadgeInfo()
+                    : ['show' => false, 'available' => false, 'label' => ''];
+            } else {
+                $recentNotifications = [];
+                $unreadNotifications = 0;
+                $updateBadge = ['show' => false, 'available' => false, 'label' => ''];
+            }
+
+            $domainStats = \App\Helpers\LayoutHelper::getDomainStats();
+            $appSettings = \App\Helpers\LayoutHelper::getAppSettings();
+
+            $avatar = null;
+            if ($userId) {
+                $userModel = new \App\Models\User();
+                $user = $userModel->find($userId);
+                if ($user) {
+                    $avatar = \App\Helpers\AvatarHelper::getAvatar($user, 36);
+                }
+            }
+
+            return [
+                'auth' => [
+                    'check'    => Auth::check(),
+                    'id'       => $userId,
+                    'username' => Auth::username(),
+                    'fullName' => Auth::fullName(),
+                    'role'     => Auth::role(),
+                    'isAdmin'  => Auth::isAdmin(),
+                ],
+                'session'             => $_SESSION ?? [],
+                'flash'               => $flash,
+                'recentNotifications' => $recentNotifications,
+                'unreadNotifications' => $unreadNotifications,
+                'updateBadge'         => $updateBadge,
+                'domainStats'         => $domainStats,
+                'appName'             => $appSettings['app_name'],
+                'appTimezone'         => $appSettings['app_timezone'],
+                'appVersion'          => $appSettings['app_version'],
+                'avatar'              => $avatar,
+                'currentUrl'          => $_SERVER['REQUEST_URI'] ?? '/',
+                'appEnv'              => $_ENV['APP_ENV'] ?? 'development',
+            ];
+        } catch (\Throwable $e) {
+            return [
+                'auth'                => ['check' => false, 'id' => null, 'username' => '', 'fullName' => '', 'role' => '', 'isAdmin' => false],
+                'session'             => $_SESSION ?? [],
+                'flash'               => $flash,
+                'recentNotifications' => [],
+                'unreadNotifications' => 0,
+                'updateBadge'         => ['show' => false, 'available' => false, 'label' => ''],
+                'domainStats'         => [],
+                'appName'             => 'Domain Monitor',
+                'appTimezone'         => 'UTC',
+                'appVersion'          => '',
+                'avatar'              => null,
+                'currentUrl'          => $_SERVER['REQUEST_URI'] ?? '/',
+                'appEnv'              => $_ENV['APP_ENV'] ?? 'development',
+            ];
+        }
+    }
+
+    private function registerFunctions(): void
+    {
+        $this->twig->addFunction(new TwigFunction('csrf_field', function (): string {
+            return \Core\Csrf::field();
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('csrf_token', function (): string {
+            return \Core\Csrf::getToken();
+        }));
+
+        $this->twig->addFunction(new TwigFunction('old', function (string $key, string $default = ''): string {
+            return htmlspecialchars($_POST[$key] ?? $default, ENT_QUOTES, 'UTF-8');
+        }));
+
+        $this->twig->addFunction(new TwigFunction('asset', function (string $path): string {
+            return '/' . ltrim($path, '/');
+        }));
+
+        $this->twig->addFunction(new TwigFunction('is_active', function (string $path): bool {
+            $current = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH);
+            return $current === $path;
+        }));
+
+        $this->twig->addFunction(new TwigFunction('is_active_prefix', function (string $prefix): bool {
+            $current = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH);
+            return str_starts_with($current, $prefix);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('sort_url', function (string $column, string $currentSort, string $currentOrder, array $filters = []): string {
+            return \App\Helpers\ViewHelper::sortUrl($column, $currentSort, $currentOrder, $filters);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('sort_icon', function (string $column, string $currentSort, string $currentOrder): string {
+            return \App\Helpers\ViewHelper::sortIcon($column, $currentSort, $currentOrder);
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('pagination_url', function (int $page, array $filters, int $perPage): string {
+            return \App\Helpers\ViewHelper::paginationUrl($page, $filters, $perPage);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('status_badge', function (string $status): string {
+            return \App\Helpers\ViewHelper::statusBadge($status);
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('alert', function (string $type, string $message): string {
+            return \App\Helpers\ViewHelper::alert($type, $message);
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('breadcrumbs', function (array $items): string {
+            return \App\Helpers\ViewHelper::breadcrumbs($items);
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('format_login_dropdown', function (array $loginData): string {
+            return \App\Helpers\LayoutHelper::formatLoginDropdown($loginData);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('max_upload_size', function (): string {
+            return \App\Helpers\ViewHelper::getMaxUploadSize();
+        }));
+
+        $this->twig->addFunction(new TwigFunction('role_badge', function (string $role, string $size = 'sm'): string {
+            $isAdmin = $role === 'admin';
+            $color = $isAdmin ? 'amber' : 'blue';
+            $icon = $isAdmin ? 'crown' : 'user';
+            $label = ucfirst($role);
+
+            if ($size === 'xs') {
+                $padding = 'px-2 py-0.5';
+            } else {
+                $padding = 'px-2.5 py-1';
+            }
+
+            return '<span class="inline-flex items-center ' . $padding . ' rounded-full text-xs font-semibold '
+                . 'bg-' . $color . '-100 dark:bg-' . $color . '-500/10 '
+                . 'text-' . $color . '-700 dark:text-' . $color . '-400 '
+                . 'border border-' . $color . '-200 dark:border-' . $color . '-500/20">'
+                . '<i class="fas fa-' . $icon . ' mr-1"></i>'
+                . htmlspecialchars($label)
+                . '</span>';
+        }, ['is_safe' => ['html']]));
+    }
+
+    private function registerFilters(): void
+    {
+        $this->twig->addFilter(new TwigFilter('truncate', function (string $text, int $length = 50, string $suffix = '...'): string {
+            return \App\Helpers\ViewHelper::truncate($text, $length, $suffix);
+        }));
+
+        $this->twig->addFilter(new TwigFilter('format_bytes', function (int $bytes, int $precision = 2): string {
+            return \App\Helpers\ViewHelper::formatBytes($bytes, $precision);
+        }));
+
+        $this->twig->addFilter(new TwigFilter('from_json', function ($value) {
+            if ($value === null || $value === '') {
+                return [];
+            }
+            if (is_array($value) || is_object($value)) {
+                return $value;
+            }
+            $decoded = json_decode((string) $value, true);
+            return $decoded ?? [];
+        }));
+    }
+}