Styling fixes

pages/users.vue

@@ -3,12 +3,26 @@
     <!-- Header -->
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center justify-between">
-          <h1 class="text-3xl font-bold text-gray-900">User Management</h1>
-          <NuxtLink to="/" class="text-sm font-medium text-blue-600 hover:text-blue-700">
-            ← Back to Home
+        <div class="flex items-center justify-between mb-4">
+          <NuxtLink to="/">
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
+          <div class="flex items-center gap-4">
+            <NuxtLink 
+              to="/"
+              class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
+            >
+              Home
+            </NuxtLink>
+            <button
+              @click="handleLogout"
+              class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
+            >
+              Log Out
+            </button>
+          </div>
         </div>
+        <h1 class="text-2xl font-bold text-gray-900">Manage Users</h1>
       </div>
     </header>
 
@@ -271,6 +285,11 @@ async function confirmDelete(user: User) {
   }
 }
 
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await navigateTo('/login')
+}
+
 onMounted(() => {
   loadUsers()
 })