diff --git a/client/src/pages/SecurityLogs.jsx b/client/src/pages/SecurityLogs.jsx
index 152872e..7e1f9ed 100644
--- a/client/src/pages/SecurityLogs.jsx
+++ b/client/src/pages/SecurityLogs.jsx
@@ -1,8 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { AuthContext } from '../contexts/AuthContext';
-import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
-import { Alert, AlertDescription } from '../components/ui/alert';
-import { Badge } from '../components/ui/badge';
 import { formatDistanceToNow } from 'date-fns';
 
 const SecurityLogs = () => {
@@ -23,19 +20,12 @@ const SecurityLogs = () => {
   });
 
   useEffect(() => {
-    // Only allow admins to view security logs
-    if (!user || user.role !== 'admin') {
-      setError('Access denied. Only tenant administrators can view security logs.');
-      setLoading(false);
-      return;
+    if (user && tenant) {
+      loadSecurityLogs();
     }
-    
-    loadSecurityLogs();
-  }, [filters, pagination.page, user]);
+  }, [user, tenant, filters, pagination.page]);
 
   const loadSecurityLogs = async () => {
-    if (!user || user.role !== 'admin') return;
-    
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -44,10 +34,10 @@ const SecurityLogs = () => {
         ...filters
       });
 
-      const response = await fetch(`/api/security-logs?${params}`, {
+      const response = await fetch(`/api/${tenant.slug}/security-logs?${params}`, {
         headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`,
-          'X-Tenant-ID': tenant?.id || ''
+          'Authorization': `Bearer ${user.token}`,
+          'Content-Type': 'application/json'
         }
       });
 
@@ -71,11 +61,11 @@ const SecurityLogs = () => {
 
   const getLogLevelBadge = (level) => {
     const styles = {
-      'critical': 'bg-red-500 text-white',
-      'high': 'bg-orange-500 text-white',
-      'medium': 'bg-yellow-500 text-black',
-      'low': 'bg-blue-500 text-white',
-      'info': 'bg-gray-500 text-white'
+      'critical': 'bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold',
+      'high': 'bg-orange-500 text-white px-2 py-1 rounded text-xs font-semibold',
+      'medium': 'bg-yellow-500 text-black px-2 py-1 rounded text-xs font-semibold',
+      'low': 'bg-blue-500 text-white px-2 py-1 rounded text-xs font-semibold',
+      'info': 'bg-gray-500 text-white px-2 py-1 rounded text-xs font-semibold'
     };
     return styles[level] || styles.info;
   };
@@ -100,55 +90,48 @@ const SecurityLogs = () => {
     if (metadata.ip_address) items.push(`IP: ${metadata.ip_address}`);
     if (metadata.country) items.push(`Country: ${metadata.country}`);
     if (metadata.user_agent) items.push(`Agent: ${metadata.user_agent.substring(0, 50)}...`);
-    if (metadata.username) items.push(`User: ${metadata.username}`);
     return items.join(' | ');
   };
 
-  // Access control check
-  if (!user || user.role !== 'admin') {
+  const totalPages = Math.ceil(pagination.total / pagination.limit);
+
+  // Don't render if user is not authenticated
+  if (!user || !tenant) {
     return (
       <div className="p-6">
-        <Alert className="border-red-200 bg-red-50">
-          <AlertDescription className="text-red-800">
-            Access denied. Only tenant administrators can view security logs.
-          </AlertDescription>
-        </Alert>
+        <div className="text-center py-8 text-gray-500">
+          Please log in to view security logs
+        </div>
       </div>
     );
   }
 
-  const totalPages = Math.ceil(pagination.total / pagination.limit);
-
   return (
     <div className="p-6">
       <div className="mb-6">
-        <h1 className="text-3xl font-bold mb-2">Security Logs</h1>
-        <p className="text-gray-600">
-          Security events for {tenant?.name || 'your organization'}
-        </p>
+        <h1 className="text-3xl font-bold mb-2 text-gray-900">Security Logs</h1>
+        <p className="text-gray-600">Monitor security events for your tenant: {tenant.name}</p>
       </div>
 
       {error && (
-        <Alert className="mb-6 border-red-200 bg-red-50">
-          <AlertDescription className="text-red-800">
-            {error}
-          </AlertDescription>
-        </Alert>
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
+          <div className="text-red-800">{error}</div>
+        </div>
       )}
 
       {/* Filters */}
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>Filters</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h3 className="text-lg font-medium text-gray-900">Filters</h3>
+        </div>
+        <div className="p-6">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             <div>
-              <label className="block text-sm font-medium mb-2">Security Level</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Security Level</label>
               <select
                 value={filters.level}
                 onChange={(e) => setFilters(prev => ({ ...prev, level: e.target.value }))}
-                className="w-full p-2 border rounded-md"
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
               >
                 <option value="all">All Levels</option>
                 <option value="critical">Critical</option>
@@ -159,11 +142,11 @@ const SecurityLogs = () => {
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium mb-2">Event Type</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Event Type</label>
               <select
                 value={filters.eventType}
                 onChange={(e) => setFilters(prev => ({ ...prev, eventType: e.target.value }))}
-                className="w-full p-2 border rounded-md"
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
               >
                 <option value="all">All Events</option>
                 <option value="failed_login">Failed Logins</option>
@@ -175,11 +158,11 @@ const SecurityLogs = () => {
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium mb-2">Time Range</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Time Range</label>
               <select
                 value={filters.timeRange}
                 onChange={(e) => setFilters(prev => ({ ...prev, timeRange: e.target.value }))}
-                className="w-full p-2 border rounded-md"
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
               >
                 <option value="1h">Last Hour</option>
                 <option value="24h">Last 24 Hours</option>
@@ -189,30 +172,30 @@ const SecurityLogs = () => {
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium mb-2">Search</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Search</label>
               <input
                 type="text"
                 placeholder="IP, username..."
                 value={filters.search}
                 onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
-                className="w-full p-2 border rounded-md"
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
               />
             </div>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
 
       {/* Security Logs Table */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex justify-between items-center">
-            Security Events
-            <span className="text-sm font-normal text-gray-500">
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex justify-between items-center">
+            <h3 className="text-lg font-medium text-gray-900">Security Events</h3>
+            <span className="text-sm text-gray-500">
               {pagination.total} total events
             </span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
+          </div>
+        </div>
+        <div className="p-6">
           {loading ? (
             <div className="flex justify-center py-8">
               <div className="text-gray-500">Loading security logs...</div>
@@ -225,40 +208,40 @@ const SecurityLogs = () => {
             <div className="overflow-x-auto">
               <table className="w-full">
                 <thead>
-                  <tr className="border-b">
-                    <th className="text-left p-2">Time</th>
-                    <th className="text-left p-2">Level</th>
-                    <th className="text-left p-2">Event</th>
-                    <th className="text-left p-2">Message</th>
-                    <th className="text-left p-2">Details</th>
+                  <tr className="border-b border-gray-200">
+                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Level</th>
+                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Event</th>
+                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Message</th>
+                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Details</th>
                   </tr>
                 </thead>
                 <tbody>
                   {logs.map((log) => (
-                    <tr key={log.id} className="border-b hover:bg-gray-50">
-                      <td className="p-2 text-sm">
+                    <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <td className="p-3 text-sm">
                         <div>{new Date(log.timestamp).toLocaleString()}</div>
                         <div className="text-xs text-gray-500">
                           {formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
                         </div>
                       </td>
-                      <td className="p-2">
-                        <Badge className={getLogLevelBadge(log.level)}>
+                      <td className="p-3">
+                        <span className={getLogLevelBadge(log.level)}>
                           {log.level.toUpperCase()}
-                        </Badge>
+                        </span>
                       </td>
-                      <td className="p-2">
+                      <td className="p-3">
                         <div className="flex items-center gap-2">
                           <span>{getEventTypeIcon(log.event_type)}</span>
                           <span className="text-sm">{log.event_type.replace('_', ' ').toUpperCase()}</span>
                         </div>
                       </td>
-                      <td className="p-2 text-sm max-w-md">
+                      <td className="p-3 text-sm max-w-md">
                         <div className="truncate" title={log.message}>
                           {log.message}
                         </div>
                       </td>
-                      <td className="p-2 text-xs text-gray-600 max-w-md">
+                      <td className="p-3 text-xs text-gray-600 max-w-md">
                         <div className="truncate" title={formatMetadata(log.metadata)}>
                           {formatMetadata(log.metadata)}
                         </div>
@@ -280,22 +263,22 @@ const SecurityLogs = () => {
                 <button
                   onClick={() => setPagination(prev => ({ ...prev, page: Math.max(1, prev.page - 1) }))}
                   disabled={pagination.page === 1}
-                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
+                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
                 >
                   Previous
                 </button>
                 <button
                   onClick={() => setPagination(prev => ({ ...prev, page: Math.min(totalPages, prev.page + 1) }))}
                   disabled={pagination.page === totalPages}
-                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
+                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
                 >
                   Next
                 </button>
               </div>
             </div>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 };