diff --git a/backend/routes/admin.js b/backend/routes/admin.js
index cabf91b..afb86a1 100644
--- a/backend/routes/admin.js
+++ b/backend/routes/admin.js
@@ -12,8 +12,13 @@ router.post('/admin/set-admin-role', async (req, res) => {
         if (!requesterId)
             return res.status(401).json({ error: 'Authentication required' });
 
+        // Fetch user to get uid for isAdmin check
+        const requester = await User.findByPk(requesterId, { attributes: ['uid'] });
+        if (!requester)
+            return res.status(401).json({ error: 'Authentication required' });
+
         // Allow if requester is already admin OR if there are no roles yet (bootstrap)
-        const requesterIsAdmin = await isAdmin(requesterId);
+        const requesterIsAdmin = await isAdmin(requester.uid);
         const existingRolesCount = await Role.count();
         if (!requesterIsAdmin && existingRolesCount > 0) {
             return res.status(403).json({ error: 'Forbidden' });
@@ -55,7 +60,12 @@ async function requireAdmin(req, res, next) {
         const requesterId = req.currentUser?.id || req.session?.userId;
         if (!requesterId)
             return res.status(401).json({ error: 'Authentication required' });
-        const admin = await isAdmin(requesterId);
+
+        // Fetch user to get uid for isAdmin check
+        const user = await User.findByPk(requesterId, { attributes: ['uid'] });
+        if (!user) return res.status(401).json({ error: 'Authentication required' });
+
+        const admin = await isAdmin(user.uid);
         if (!admin) return res.status(403).json({ error: 'Forbidden' });
         next();
     } catch (err) {
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 32cb2b3..fe750f6 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -15,16 +15,10 @@ router.get('/current_user', async (req, res) => {
     try {
         if (req.session && req.session.userId) {
             const user = await User.findByPk(req.session.userId, {
-                attributes: [
-                    'uid',
-                    'email',
-                    'language',
-                    'appearance',
-                    'timezone',
-                ],
+                attributes: ['uid', 'email', 'language', 'appearance', 'timezone'],
             });
             if (user) {
-                const admin = await isAdmin(user.id);
+                const admin = await isAdmin(user.uid);
                 return res.json({
                     user: {
                         uid: user.uid,
@@ -76,7 +70,7 @@ router.post('/login', async (req, res) => {
             });
         });
 
-        const admin = await isAdmin(user.id);
+        const admin = await isAdmin(user.uid);
         res.json({
             user: {
                 uid: user.uid,
diff --git a/backend/services/rolesService.js b/backend/services/rolesService.js
index 804cd8d..d68a181 100644
--- a/backend/services/rolesService.js
+++ b/backend/services/rolesService.js
@@ -1,8 +1,17 @@
-const { Role } = require('../models');
+const { Role, User } = require('../models');
 
-async function isAdmin(userId) {
-    if (!userId) return false;
-    const role = await Role.findOne({ where: { user_id: userId } });
+async function isAdmin(userUid) {
+    if (!userUid) return false;
+
+    // Find user by uid to get numeric id for role lookup
+    const user = await User.findOne({
+        where: { uid: userUid },
+        attributes: ['id'],
+    });
+
+    if (!user) return false;
+
+    const role = await Role.findOne({ where: { user_id: user.id } });
     return !!(role && role.is_admin);
 }
 
diff --git a/frontend/App.tsx b/frontend/App.tsx
index cc00474..8c4f034 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -249,7 +249,7 @@ const App: React.FC = () => {
                             <Route
                                 path="/admin/users"
                                 element={
-                                    currentUser.is_admin ? (
+                                    currentUser?.is_admin === true ? (
                                         <React.Suspense
                                             fallback={
                                                 <div className="p-4">
diff --git a/frontend/components/Admin/AdminUsersPage.tsx b/frontend/components/Admin/AdminUsersPage.tsx
index cab0e82..675b67d 100644
--- a/frontend/components/Admin/AdminUsersPage.tsx
+++ b/frontend/components/Admin/AdminUsersPage.tsx
@@ -174,20 +174,22 @@ const AddUserModal: React.FC<{
                         </select>
                     </div>
                     {error && (
-                        <div className="text-sm text-red-500">{error}</div>
+                        <div className="text-sm text-red-600 dark:text-red-400">
+                            {error}
+                        </div>
                     )}
-                    <div className="flex justify-end space-x-2 pt-2">
+                    <div className="flex justify-end space-x-3 pt-2">
                         <button
                             type="button"
                             onClick={onClose}
-                            className="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+                            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
                         >
                             {t('common.cancel', 'Cancel')}
                         </button>
                         <button
                             type="submit"
                             disabled={submitting}
-                            className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60"
+                            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm disabled:opacity-60 disabled:cursor-not-allowed"
                         >
                             {submitting
                                 ? t('common.saving', 'Saving...')
@@ -277,64 +279,65 @@ const AdminUsersPage: React.FC = () => {
     }, [users, selectedIds]);
 
     return (
-        <div className="space-y-4">
+        <div className="space-y-6">
             <div className="flex items-center justify-between">
-                <h1 className="text-2xl font-semibold">
+                <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
                     {t('admin.userManagement', 'User Management')}
                 </h1>
-                <div className="space-x-2">
+                <div className="flex items-center space-x-2">
                     <button
                         onClick={() => setAddOpen(true)}
-                        className="inline-flex items-center px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700"
+                        className="inline-flex items-center px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm"
                     >
-                        <UserPlusIcon className="h-5 w-5 mr-1" />{' '}
+                        <UserPlusIcon className="h-5 w-5 mr-2" />
                         {t('admin.addUser', 'Add user')}
                     </button>
                     <button
                         onClick={removeSelected}
                         disabled={selectedCount === 0}
-                        className="inline-flex items-center px-3 py-2 rounded bg-red-600 text-white disabled:opacity-50"
+                        className="inline-flex items-center px-4 py-2 rounded-md border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                     >
-                        <TrashIcon className="h-5 w-5 mr-1" />{' '}
+                        <TrashIcon className="h-5 w-5 mr-2" />
                         {t('admin.remove', 'Remove')}
                     </button>
                 </div>
             </div>
 
             {error && (
-                <div className="p-3 rounded bg-red-50 text-red-700 border border-red-200">
+                <div className="p-4 rounded-md bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800">
                     {error}
                 </div>
             )}
 
-            <div className="bg-white dark:bg-gray-900 rounded shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                 <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                    <thead className="bg-gray-50 dark:bg-gray-800">
+                    <thead className="bg-gray-50 dark:bg-gray-900">
                         <tr>
-                            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider">
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                 <input
                                     type="checkbox"
                                     checked={headerCheckboxChecked}
                                     onChange={toggleSelectAll}
+                                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2 bg-white dark:bg-gray-700"
                                 />
                             </th>
-                            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider">
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                 {t('admin.email', 'Email')}
                             </th>
-                            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider">
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                 {t('admin.created', 'Created')}
                             </th>
-                            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider">
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                 {t('admin.role', 'Role')}
                             </th>
                         </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                    <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                         {loading && (
                             <tr>
                                 <td
                                     colSpan={4}
-                                    className="px-4 py-6 text-center text-gray-500"
+                                    className="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
                                 >
                                     {t(
                                         'admin.loadingUsers',
@@ -347,7 +350,7 @@ const AdminUsersPage: React.FC = () => {
                             <tr>
                                 <td
                                     colSpan={4}
-                                    className="px-4 py-6 text-center text-gray-500"
+                                    className="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
                                 >
                                     {t('admin.noUsers', 'No users')}
                                 </td>
@@ -358,24 +361,27 @@ const AdminUsersPage: React.FC = () => {
                             users.map((u) => (
                                 <tr
                                     key={u.id}
-                                    className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                                    className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-150"
                                 >
-                                    <td className="px-4 py-2">
+                                    <td className="px-6 py-4 whitespace-nowrap">
                                         <input
                                             type="checkbox"
                                             checked={selectedIds.has(u.id)}
                                             onChange={() => toggleSelect(u.id)}
+                                            className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2 bg-white dark:bg-gray-700"
                                         />
                                     </td>
-                                    <td className="px-4 py-2">{u.email}</td>
-                                    <td className="px-4 py-2 text-sm text-gray-500">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
+                                        {u.email}
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                         {new Date(
                                             u.created_at
                                         ).toLocaleString()}
                                     </td>
-                                    <td className="px-4 py-2">
+                                    <td className="px-6 py-4 whitespace-nowrap">
                                         <span
-                                            className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${u.role === 'admin' ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}
+                                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${u.role === 'admin' ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
                                         >
                                             {u.role === 'admin'
                                                 ? t('admin.admin', 'admin')
diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
index 86efa51..baf6ec5 100644
--- a/frontend/components/Navbar.tsx
+++ b/frontend/components/Navbar.tsx
@@ -196,7 +196,7 @@ const Navbar: React.FC<NavbarProps> = ({
                                         'Profile Settings'
                                     )}
                                 </Link>
-                                {(window as any).__CURRENT_USER__?.is_admin && (
+                                {currentUser?.is_admin === true && (
                                     <Link
                                         to="/admin/users"
                                         className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
diff --git a/frontend/components/Sidebar/SidebarNav.tsx b/frontend/components/Sidebar/SidebarNav.tsx
index 7229856..7b104c0 100644
--- a/frontend/components/Sidebar/SidebarNav.tsx
+++ b/frontend/components/Sidebar/SidebarNav.tsx
@@ -8,7 +8,6 @@ import {
     ClockIcon,
 } from '@heroicons/react/24/solid';
 import { useStore } from '../../store/useStore';
-import { ShieldCheckIcon } from '@heroicons/react/24/outline';
 import { loadInboxItemsToStore } from '../../utils/inboxService';
 
 interface SidebarNavProps {
@@ -56,20 +55,6 @@ const SidebarNav: React.FC<SidebarNavProps> = ({
         },
     ];
 
-    // Append admin link if current user is admin (read from global window state via current_user fetch in App)
-    try {
-        const raw = (window as any).__CURRENT_USER__;
-        if (raw?.is_admin) {
-            navLinks.push({
-                path: '/admin/users',
-                title: t('sidebar.adminUsers', 'User Management'),
-                icon: <ShieldCheckIcon className="h-5 w-5" />,
-            } as any);
-        }
-    } catch {
-        // ignore missing window state
-    }
-
     const isActive = (path: string, query?: string) => {
         // Handle special case for paths without query parameters
         if (path === '/inbox' || path === '/today' || path === '/upcoming') {