diff --git a/public/js/ui.js b/public/js/ui.js
index 7c63000..ef5b4fd 100644
--- a/public/js/ui.js
+++ b/public/js/ui.js
@@ -149,12 +149,14 @@ export async function renderEmployeeDashboard() {
 
 // In js/ui.js
 
+// In js/ui.js
+
 export async function renderAdminDashboard() {
     showView('admin');
     const [logsRes, usersRes, requestsRes] = await Promise.all([apiCall('/admin/logs'), apiCall('/admin/users'), apiCall('/admin/time-off-requests/pending')]);
     if (!logsRes.success || !usersRes.success || !requestsRes.success) return;
 
-    // Existing data processing logic...
+    // Data processing logic...
     allTimeEntries = logsRes.data;
     allUsers = usersRes.data;
     const pendingRequests = requestsRes.data;
@@ -163,7 +165,7 @@ export async function renderAdminDashboard() {
     const punchedInEntries = allTimeEntries.filter(e => e.status === 'in');
     const employeesOnly = allUsers.filter(u => u.role === 'employee');
 
-    // --- New Tabbed HTML Structure ---
+    // --- Tabbed HTML Structure ---
     mainViews.admin.innerHTML = `
         <div class="max-w-6xl mx-auto space-y-4">
             <div class="bg-white rounded-xl shadow-md p-4 flex flex-wrap justify-between items-center gap-4">
@@ -180,6 +182,16 @@ export async function renderAdminDashboard() {
                 <div id="tab-content-overview" class="space-y-8">
                     <div><h3 class="text-xl font-bold text-gray-700 mb-2">Currently Punched In</h3><ul class="border rounded-lg divide-y">${punchedInEntries.map(e => `<li class="flex flex-col items-start space-y-2 p-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0"><span class="font-medium text-gray-800">${e.username}</span><div class="flex items-center space-x-4"><span class="text-sm text-gray-500">Since: ${utils.formatDateTime(e.punch_in_time)}</span><button class="force-clock-out-btn px-3 py-1 text-xs bg-red-500 text-white rounded whitespace-nowrap" data-userid="${e.user_id}" data-username="${e.username}">Force Clock Out</button></div></li>`).join('') || '<li class="p-4 text-center text-gray-500">None</li>'}</ul></div>
                     <div><div class="flex justify-between items-center mb-4"><h3 class="text-xl font-bold text-gray-700">Pending Time Off Requests</h3><button id="view-time-off-history-btn" class="px-4 py-2 text-sm bg-gray-200 rounded-lg hover:bg-gray-300">View History</button></div><div class="overflow-x-auto border rounded-lg"><table class="min-w-full text-sm text-left"><thead class="bg-gray-50"><tr><th class="p-2">Employee</th><th class="p-2">Dates</th><th class="p-2">Reason</th><th class="p-2">Actions</th></tr></thead><tbody>${pendingRequests.map(r => `<tr class="border-t"><td class="p-2">${r.username}</td><td class="p-2 whitespace-nowrap">${utils.formatDate(r.start_date)} - ${utils.formatDate(r.end_date)}</td><td class="p-2">${r.reason||''}</td><td class="p-2"><div class="flex flex-col sm:flex-row gap-2"><button class="approve-request-btn font-medium text-green-600 hover:underline" data-id="${r.id}">Approve</button><button class="deny-request-btn font-medium text-red-600 hover:underline" data-id="${r.id}">Deny</button></div></td></tr>`).join('') || '<tr><td colspan="4" class="text-center p-4">No pending requests.</td></tr>'}</tbody></table></div></div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold text-gray-700 mb-4">Employee Notes</h3>
+                        <form id="add-note-form" class="space-y-3 bg-gray-50 p-4 rounded-lg">
+                            <select id="note-user-select" class="w-full p-2 border rounded" required><option value="">-- Select an Employee --</option>${employeesOnly.map(u => `<option value="${u.id}">${u.username}</option>`).join('')}</select>
+                            <textarea id="note-text" placeholder="Write a new note here..." class="w-full p-2 border rounded" rows="3" required></textarea>
+                            <div class="flex gap-2"><button type="submit" class="w-full bg-cyan-600 text-white p-2 rounded hover:bg-cyan-700">Submit Note</button><button type="button" id="view-notes-btn" class="w-full bg-gray-600 text-white p-2 rounded hover:bg-gray-700">View Notes</button></div>
+                        </form>
+                        <div id="employee-notes-container" class="mt-4"></div>
+                    </div>
                 </div>
 
                 <div id="tab-content-logs" class="space-y-8 hidden">
@@ -194,25 +206,27 @@ export async function renderAdminDashboard() {
                       <form id="add-punch-form" class="space-y-3 bg-gray-50 p-4 rounded-lg"><h4 class="font-semibold">Add Manual Entry</h4><select id="add-punch-user" class="w-full p-2 border rounded" required>${allUsers.map(u => `<option value="${u.id}" data-username="${u.username}">${u.username}</option>`).join('')}</select><label class="text-sm">In (Required):</label><input type="datetime-local" id="add-punch-in" class="w-full p-2 border rounded" required><label class="text-sm">Out (Optional):</label><input type="datetime-local" id="add-punch-out" class="w-full p-2 border rounded"><button type="submit" class="w-full bg-purple-600 text-white p-2 rounded hover:bg-purple-700">Add Entry</button></form>
                     </div>
                     <div><h4 class="font-semibold mb-2">Manage Users</h4><div class="overflow-x-auto border rounded-lg"><table class="min-w-full text-sm text-left"><thead class="bg-gray-50"><tr><th class="p-2">Username</th><th class="p-2">Role</th><th class="p-2">Actions</th></tr></thead><tbody>${allUsers.map(u => `<tr class="border-t"><td class="p-2 font-medium">${u.username}</td><td class="p-2 capitalize">${u.role}</td><td class="p-2"><div class="flex flex-col sm:flex-row items-start sm:items-center gap-2">${u.isPrimary ? `<span class="text-sm text-gray-500">Primary Admin</span>` : `<button class="reset-pw-btn font-medium text-blue-600 hover:underline" data-username="${u.username}">Reset PW</button><button class="change-role-btn font-medium text-purple-600 hover:underline" data-username="${u.username}" data-role="${u.role}">${u.role === 'admin' ? 'Demote' : 'Promote'}</button>${u.username !== user.username ? `<button class="delete-user-btn font-medium text-red-600 hover:underline" data-username="${u.username}">Delete</button>` : ''}`}</div></td></tr>`).join('')}</tbody></table></div></div>
-                    <div>
-                        <h3 class="text-xl font-bold text-gray-700 mb-4">Employee Notes</h3>
-                        <form id="add-note-form" class="space-y-3 bg-gray-50 p-4 rounded-lg">
-                            <select id="note-user-select" class="w-full p-2 border rounded" required><option value="">-- Select an Employee --</option>${employeesOnly.map(u => `<option value="${u.id}">${u.username}</option>`).join('')}</select>
-                            <textarea id="note-text" placeholder="Write a new note here..." class="w-full p-2 border rounded" rows="3" required></textarea>
-                            <div class="flex gap-2"><button type="submit" class="w-full bg-cyan-600 text-white p-2 rounded hover:bg-cyan-700">Submit Note</button><button type="button" id="view-notes-btn" class="w-full bg-gray-600 text-white p-2 rounded hover:bg-gray-700">View Notes</button></div>
-                        </form>
-                        <div id="employee-notes-container" class="mt-4"></div>
+                    
                     </div>
-                </div>
             </div>
         </div>
     `;
     
-    attachAdminDashboardListeners(); // This remains the same
+    attachAdminDashboardListeners();
 
-    // Logic for running timers also remains the same
-    punchedInEntries.forEach(entry => { /* ... */ });
+    punchedInEntries.forEach(entry => {
+        const durationCell = document.getElementById(`admin-duration-${entry.id}`);
+        if (durationCell) {
+            const punchInTime = new Date(entry.punch_in_time);
+            const intervalId = setInterval(() => {
+                durationCell.textContent = utils.formatDuration(Date.now() - punchInTime.getTime());
+            }, 1000);
+            adminTimerIntervals.push(intervalId);
+        }
+    });
 }
+    
+
 
 export function renderArchiveView() {
     apiCall('/admin/archives').then(res => {