diff --git a/src/components/Admin/AdminPanel.css b/src/components/Admin/AdminPanel.css
index e86bf12..79ec962 100644
--- a/src/components/Admin/AdminPanel.css
+++ b/src/components/Admin/AdminPanel.css
@@ -1,10 +1,12 @@
 /* src/components/Admin/AdminPanel.css */
 .admin-panel {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: "articulat-cf", sans-serif;
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
-    color: #333;
+    color: var(--text);
+    background-color: var(--background);
+    transition: color 0.3s ease, background-color 0.3s ease;
   }
   
   /* Header */
@@ -14,13 +16,14 @@
     align-items: center;
     margin-bottom: 20px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
+    margin-top: 20px;
   }
   
   .admin-header h1 {
     margin: 0;
-    color: #333;
-    font-size: 24px;
+    color: var(--button-bg);
+    font-size: 2.1em;
+    font-weight: 800;
   }
   
   /* Container layout */
@@ -33,13 +36,16 @@
   
   /* Resources sidebar */
   .resources-sidebar {
-    background-color: #f8f9fa;
+    background-color: var(--navbar-bg);
     border-radius: 8px;
+    border: 1px solid var(--card-border);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    overflow: hidden;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: 93.8%;
+    overflow: hidden;
+    padding: 10px;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .sidebar-header {
@@ -47,19 +53,22 @@
     justify-content: space-between;
     align-items: center;
     padding: 15px;
-    background-color: #f0f2f5;
-    border-bottom: 1px solid #ddd;
+    background-color: var(--navbar-bg);
+    border-bottom: 1px solid var(--card-border);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .sidebar-header h2 {
     margin: 0;
     font-size: 18px;
+    color: var(--text);
   }
   
   .sidebar-filters {
     padding: 10px 15px;
-    border-bottom: 1px solid #ddd;
-    background-color: #f8f9fa;
+    border-bottom: 1px solid var(--card-border);
+    background-color: var(--navbar-bg);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .filter-group {
@@ -69,20 +78,40 @@
   .search-input {
     width: 100%;
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--card-border);
     border-radius: 4px;
     font-size: 14px;
     margin-bottom: 8px;
+    background-color: var(--navbar-bg);
+    color: var(--text);
+    transition: all 0.3s ease;
+  }
+  
+  .search-input:hover,
+  .search-input:focus {
+    border-color: var(--button-bg);
+    background-color: var(--background);
   }
   
   .status-filter,
   .completeness-filter {
     width: 49%;
     padding: 6px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--card-border);
     border-radius: 4px;
     font-size: 13px;
     margin-right: 2%;
+    background-color: var(--navbar-bg);
+    color: var(--text);
+    transition: all 0.3s ease;
+  }
+  
+  .status-filter:hover,
+  .completeness-filter:hover,
+  .status-filter:focus,
+  .completeness-filter:focus {
+    border-color: var(--button-bg);
+    background-color: var(--background);
   }
   
   .completeness-filter {
@@ -98,16 +127,17 @@
     display: flex;
     flex-direction: column;
     padding: 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--card-border);
     cursor: pointer;
     transition: background-color 0.2s;
     position: relative;
+    color: var(--text);
   }
   
   .resource-completeness-indicator {
     height: 3px;
     width: 100%;
-    background-color: #f0f0f0;
+    background-color: var(--card-border);
   }
   
   .completeness-bar {
@@ -123,12 +153,12 @@
   }
   
   .resource-item:hover {
-    background-color: #f0f2f5;
+    background-color: var(--background);
   }
   
   .resource-item.selected {
-    background-color: #e6f7ff;
-    border-left: 3px solid #1890ff;
+    background-color: rgba(59, 154, 248, 0.1);
+    border-left: 3px solid var(--button-bg);
   }
   
   .resource-item.status-draft .completeness-bar {
@@ -166,25 +196,25 @@
   }
   
   .status-badge.status-draft {
-    background-color: #fff7e6;
+    background-color: rgba(250, 173, 20, 0.2);
     color: #faad14;
     border: 1px solid #faad14;
   }
   
   .status-badge.status-review {
-    background-color: #e6f7ff;
+    background-color: rgba(24, 144, 255, 0.2);
     color: #1890ff;
     border: 1px solid #1890ff;
   }
   
   .status-badge.status-published {
-    background-color: #f6ffed;
+    background-color: rgba(82, 196, 26, 0.2);
     color: #52c41a;
     border: 1px solid #52c41a;
   }
   
   .featured-badge {
-    background-color: #f9f0ff;
+    background-color: rgba(114, 46, 209, 0.2);
     color: #722ed1;
     border: 1px solid #722ed1;
     padding: 2px 6px;
@@ -206,26 +236,31 @@
   
   /* Resource editor */
   .resource-editor {
-    background-color: #fff;
+    background-color: var(--navbar-bg);
     border-radius: 8px;
+    border: 1px solid var(--card-border);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     padding: 20px;
+    height: 92%;
     overflow-y: auto;
-    height: 100%;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+    color: var(--text);
   }
   
   .editor-header {
+    margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #eee;
+  }
+  
+  .resource-editor input {
+    margin: 0px;
   }
   
   .editor-header h2 {
     margin: 0;
-    color: #333;
+    color: var(--text);
   }
   
   .floating-actions {
@@ -235,15 +270,17 @@
   }
   
   .floating-save-button {
-    background-color: #52c41a;
-    color: white;
+    background-color: var(--button-bg);
+    color: var(--button-text);
     padding: 8px 16px;
     border-radius: 4px;
-    font-weight: 500;
+    font-weight: 700;
+    font-size: 0.9em;
+    transition: background-color 0.3s ease;
   }
   
   .floating-save-button:hover {
-    background-color: #73d13d;
+    background-color: #004F84;
   }
   
   .status-selector {
@@ -254,23 +291,25 @@
   
   .status-selector span {
     font-weight: 500;
-    color: #555;
+    color: var(--text);
   }
   
   .status-buttons {
     display: flex;
-    border: 1px solid #ddd;
+    border: 1px solid var(--card-border);
     border-radius: 4px;
     overflow: hidden;
   }
   
   .status-button {
     padding: 6px 10px;
-    background-color: #f5f5f5;
+    background-color: var(--navbar-bg);
     border: none;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--card-border);
     cursor: pointer;
     font-size: 13px;
+    color: var(--text);
+    transition: all 0.3s ease;
   }
   
   .status-button:last-child {
@@ -278,14 +317,18 @@
   }
   
   .status-button.active {
-    background-color: #1890ff;
-    color: white;
+    background-color: var(--button-bg);
+    color: var(--button-text);
+  }
+  
+  .status-button:hover:not(.active) {
+    background-color: var(--background);
   }
   
   .resource-editor h2 {
     margin-top: 0;
     margin-bottom: 20px;
-    color: #333;
+    color: var(--text);
   }
   
   /* Form styling */
@@ -304,7 +347,7 @@
     display: block;
     margin-bottom: 5px;
     font-weight: 500;
-    color: #555;
+    color: var(--text);
   }
   
   .form-group input[type="text"],
@@ -312,10 +355,25 @@
   .form-group input[type="number"],
   .form-group textarea {
     width: 100%;
-    padding: 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--card-border);
     border-radius: 4px;
     font-size: 14px;
+    background-color: var(--navbar-bg);
+    color: var(--text);
+    padding: 8px;
+    transition: all 0.3s ease;
+  }
+  
+  .form-group input[type="text"]:hover,
+  .form-group input[type="url"]:hover,
+  .form-group input[type="number"]:hover,
+  .form-group textarea:hover,
+  .form-group input[type="text"]:focus,
+  .form-group input[type="url"]:focus,
+  .form-group input[type="number"]:focus,
+  .form-group textarea:focus {
+    border-color: var(--button-bg);
+    background-color: var(--background);
   }
   
   .form-group textarea {
@@ -340,10 +398,11 @@
   /* Categories and Tags sections */
   .categories-section,
   .tags-section {
-    background-color: #f8f9fa;
+    background-color: var(--background);
     border-radius: 6px;
     padding: 15px;
-    border: 1px solid #eee;
+    border: 1px solid var(--card-border);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .section-header {
@@ -356,6 +415,7 @@
   .section-header label {
     font-weight: 600;
     margin-bottom: 0;
+    color: var(--text);
   }
   
   .checkbox-list {
@@ -373,6 +433,7 @@
   .checkbox-item label {
     margin-bottom: 0;
     font-weight: normal;
+    color: var(--text);
   }
   
   /* Form actions */
@@ -393,14 +454,15 @@
   }
   
   .add-new-button {
-    background-color: #1890ff;
-    color: white;
+    background-color: var(--button-bg);
+    color: var(--button-text);
     padding: 6px 12px;
     font-size: 13px;
+    font-weight: 700;
   }
   
   .add-new-button:hover {
-    background-color: #40a9ff;
+    background-color: #004F84;
   }
   
   .delete-button {
@@ -412,51 +474,58 @@
   
   .delete-button:hover {
     opacity: 1;
-    background-color: #ffebee;
+    background-color: rgba(244, 67, 54, 0.1);
   }
   
   .add-item-button {
-    background-color: #f5f5f5;
-    color: #333;
+    background-color: var(--navbar-bg);
+    color: var(--text);
     padding: 4px 8px;
     font-size: 12px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--card-border);
+    transition: all 0.3s ease;
   }
   
   .add-item-button:hover {
-    background-color: #e0e0e0;
+    background-color: var(--background);
+    border-color: var(--button-bg);
   }
   
   .save-button {
-    background-color: #52c41a;
-    color: white;
+    background-color: var(--button-bg);
+    color: var(--button-text);
     padding: 10px 20px;
+    font-weight: 700;
   }
   
   .save-button:hover {
-    background-color: #73d13d;
+    background-color: #004F84;
   }
   
   .cancel-button {
-    background-color: #f5f5f5;
-    color: #333;
+    background-color: var(--navbar-bg);
+    color: var(--text);
     padding: 10px 20px;
-    border: 1px solid #d9d9d9;
+    border: 1px solid var(--card-border);
+    transition: all 0.3s ease;
   }
   
   .cancel-button:hover {
-    background-color: #e6e6e6;
+    background-color: var(--background);
+    border-color: var(--button-bg);
   }
   
   .logout-button {
-    background-color: #f5f5f5;
-    color: #333;
+    background-color: var(--navbar-bg);
+    color: var(--text);
     padding: 8px 16px;
-    border: 1px solid #d9d9d9;
+    border: 1px solid var(--card-border);
+    transition: all 0.3s ease;
   }
   
   .logout-button:hover {
-    background-color: #e6e6e6;
+    background-color: var(--background);
+    border-color: var(--button-bg);
   }
   
   /* Alert messages */
@@ -468,14 +537,14 @@
   }
   
   .alert.success {
-    background-color: #f6ffed;
-    border: 1px solid #b7eb8f;
+    background-color: rgba(82, 196, 26, 0.1);
+    border: 1px solid #52c41a;
     color: #52c41a;
   }
   
   .alert.error {
-    background-color: #fff2f0;
-    border: 1px solid #ffccc7;
+    background-color: rgba(245, 34, 45, 0.1);
+    border: 1px solid #f5222d;
     color: #f5222d;
   }
   
@@ -486,11 +555,13 @@
     align-items: center;
     justify-content: center;
     height: 100vh;
+    color: var(--text);
+    background-color: var(--background);
   }
   
   .loading-spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #1890ff;
+    border: 4px solid var(--card-border);
+    border-top: 4px solid var(--button-bg);
     border-radius: 50%;
     width: 40px;
     height: 40px;
@@ -509,41 +580,45 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
-    background-color: #f0f2f5;
+    background-color: var(--background);
+    transition: background-color 0.3s ease;
   }
   
   .admin-login-card {
-    background-color: white;
+    background-color: var(--navbar-bg);
     border-radius: 8px;
+    border: 1px solid var(--card-border);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     padding: 30px;
     width: 100%;
     max-width: 400px;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .admin-login-card h2 {
     margin-top: 0;
     margin-bottom: 20px;
     text-align: center;
-    color: #333;
+    color: var(--text);
   }
   
   .login-button {
-    background-color: #1890ff;
-    color: white;
+    background-color: var(--button-bg);
+    color: var(--button-text);
     padding: 10px 0;
     width: 100%;
     font-size: 16px;
     margin-top: 10px;
+    font-weight: 700;
   }
   
   .login-button:hover {
-    background-color: #40a9ff;
+    background-color: #004F84;
   }
   
   .auth-error {
-    background-color: #fff2f0;
-    border: 1px solid #ffccc7;
+    background-color: rgba(245, 34, 45, 0.1);
+    border: 1px solid #f5222d;
     color: #f5222d;
     padding: 10px;
     border-radius: 4px;
diff --git a/src/components/Admin/AdminPanel.js b/src/components/Admin/AdminPanel.js
index cc272a4..82a3bda 100644
--- a/src/components/Admin/AdminPanel.js
+++ b/src/components/Admin/AdminPanel.js
@@ -15,6 +15,7 @@ const AdminPanel = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [completenessFilter, setCompletenessFilter] = useState(0);
+  const [darkMode, setDarkMode] = useState(false);
 
   // Login state
   const [email, setEmail] = useState('');
@@ -36,6 +37,35 @@ const AdminPanel = () => {
   // Alert state
   const [alert, setAlert] = useState({ show: false, message: '', type: '' });
 
+  // Check for dark mode preference on component mount
+  useEffect(() => {
+    // Check if dark mode is stored in localStorage
+    const storedDarkMode = localStorage.getItem('darkMode');
+    if (storedDarkMode) {
+      setDarkMode(storedDarkMode === 'true');
+    } else {
+      // Check system preference
+      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setDarkMode(prefersDarkMode);
+    }
+  }, []);
+
+  // Apply dark mode class when darkMode state changes
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+  }, [darkMode]);
+
+  // Toggle dark mode
+  const toggleDarkMode = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    localStorage.setItem('darkMode', newDarkMode.toString());
+  };
+
   // Fetch all required data from Supabase
   const fetchAllData = useCallback(async () => {
     setIsLoading(true);
@@ -524,7 +554,7 @@ const AdminPanel = () => {
   // Render loading spinner
   if (isLoading) {
     return (
-      <div className="admin-loading">
+      <div className={`admin-loading ${darkMode ? 'dark-mode' : ''}`}>
         <div className="loading-spinner"></div>
         <p>Loading...</p>
       </div>
@@ -534,7 +564,7 @@ const AdminPanel = () => {
   // Render login form if not authenticated
   if (!isAuthenticated) {
     return (
-      <div className="admin-login-container">
+      <div className={`admin-login-container ${darkMode ? 'dark-mode' : ''}`}>
         <div className="admin-login-card">
           <h2>Admin Login</h2>
           {authError && <div className="auth-error">{authError}</div>}
@@ -561,6 +591,20 @@ const AdminPanel = () => {
             </div>
             <button type="submit" className="login-button">Login</button>
           </form>
+          <div style={{ marginTop: '20px', textAlign: 'center' }}>
+            <button 
+              onClick={toggleDarkMode} 
+              style={{ 
+                background: 'none', 
+                border: 'none', 
+                cursor: 'pointer',
+                fontSize: '1em',
+                color: 'var(--text)'
+              }}
+            >
+              {darkMode ? '☀️ Light Mode' : '🌙 Dark Mode'}
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -568,11 +612,30 @@ const AdminPanel = () => {
 
   // Main admin panel UI
   return (
-    <div className="admin-panel">
+    <div className={`admin-panel ${darkMode ? 'dark-mode' : ''}`}>
       {/* Header */}
       <header className="admin-header">
         <h1>Resources Admin Panel</h1>
-        <button onClick={handleLogout} className="logout-button">Logout</button>
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+          <button 
+            onClick={toggleDarkMode} 
+            style={{ 
+              background: 'none', 
+              border: '1px solid var(--card-border)', 
+              borderRadius: '6px',
+              padding: '8px 12px',
+              cursor: 'pointer',
+              fontSize: '0.9em',
+              color: 'var(--text)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '5px'
+            }}
+          >
+            {darkMode ? '☀️ Light' : '🌙 Dark'}
+          </button>
+          <button onClick={handleLogout} className="logout-button">Logout</button>
+        </div>
       </header>
 
       {/* Alert message */}
@@ -626,42 +689,48 @@ const AdminPanel = () => {
             </div>
           </div>
           <div className="resources-list">
-            {filteredResources.map(resource => (
-              <div 
-                key={resource.id} 
-                className={`resource-item ${selectedResource && selectedResource.id === resource.id ? 'selected' : ''} status-${resource.status}`}
-                onClick={() => handleSelectResource(resource)}
-              >
-                <div className="resource-completeness-indicator">
-                  <div 
-                    className="completeness-bar"
-                    style={{ width: `${resource.completeness}%` }}
-                    title={`${resource.completeness}% complete`}
-                  ></div>
-                </div>
-                <div className="resource-item-content">
-                  <div className="resource-item-name">{resource.name}</div>
-                  <div className="resource-item-meta">
-                    <span className={`status-badge status-${resource.status}`}>
-                      {resource.status}
-                    </span>
-                    {resource.featured && <span className="featured-badge">Featured</span>}
+            {filteredResources.length > 0 ? (
+              filteredResources.map(resource => (
+                <div 
+                  key={resource.id} 
+                  className={`resource-item ${selectedResource && selectedResource.id === resource.id ? 'selected' : ''} status-${resource.status}`}
+                  onClick={() => handleSelectResource(resource)}
+                >
+                  <div className="resource-completeness-indicator">
+                    <div 
+                      className="completeness-bar"
+                      style={{ width: `${resource.completeness}%` }}
+                      title={`${resource.completeness}% complete`}
+                    ></div>
+                  </div>
+                  <div className="resource-item-content">
+                    <div className="resource-item-name">{resource.name}</div>
+                    <div className="resource-item-meta">
+                      <span className={`status-badge status-${resource.status}`}>
+                        {resource.status}
+                      </span>
+                      {resource.featured && <span className="featured-badge">Featured</span>}
+                    </div>
+                  </div>
+                  <div className="resource-item-actions">
+                    <button 
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteResource(resource.id, resource.name);
+                      }}
+                      className="delete-button"
+                      title="Delete resource"
+                    >
+                      🗑️
+                    </button>
                   </div>
                 </div>
-                <div className="resource-item-actions">
-                  <button 
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDeleteResource(resource.id, resource.name);
-                    }}
-                    className="delete-button"
-                    title="Delete resource"
-                  >
-                    🗑️
-                  </button>
-                </div>
+              ))
+            ) : (
+              <div style={{ padding: '20px', textAlign: 'center', color: 'var(--text)', opacity: 0.7 }}>
+                No resources match your filters
               </div>
-            ))}
+            )}
           </div>
         </div>
 
@@ -792,19 +861,25 @@ const AdminPanel = () => {
                   </button>
                 </div>
                 <div className="checkbox-list">
-                  {categories.map(category => (
-                    <div key={category.id} className="checkbox-item">
-                      <input
-                        type="checkbox"
-                        id={`category-${category.id}`}
-                        checked={formData.selectedCategories.includes(category.id)}
-                        onChange={() => handleCategoryChange(category.id)}
-                      />
-                      <label htmlFor={`category-${category.id}`}>
-                        {category.emoji} {category.name}
-                      </label>
+                  {categories.length > 0 ? (
+                    categories.map(category => (
+                      <div key={category.id} className="checkbox-item">
+                        <input
+                          type="checkbox"
+                          id={`category-${category.id}`}
+                          checked={formData.selectedCategories.includes(category.id)}
+                          onChange={() => handleCategoryChange(category.id)}
+                        />
+                        <label htmlFor={`category-${category.id}`}>
+                          {category.emoji} {category.name}
+                        </label>
+                      </div>
+                    ))
+                  ) : (
+                    <div style={{ padding: '10px', color: 'var(--text)', opacity: 0.7 }}>
+                      No categories available
                     </div>
-                  ))}
+                  )}
                 </div>
               </div>
 
@@ -821,19 +896,25 @@ const AdminPanel = () => {
                   </button>
                 </div>
                 <div className="checkbox-list">
-                  {tags.map(tag => (
-                    <div key={tag.id} className="checkbox-item">
-                      <input
-                        type="checkbox"
-                        id={`tag-${tag.id}`}
-                        checked={formData.selectedTags.includes(tag.id)}
-                        onChange={() => handleTagChange(tag.id)}
-                      />
-                      <label htmlFor={`tag-${tag.id}`}>
-                        #{tag.name}
-                      </label>
+                  {tags.length > 0 ? (
+                    tags.map(tag => (
+                      <div key={tag.id} className="checkbox-item">
+                        <input
+                          type="checkbox"
+                          id={`tag-${tag.id}`}
+                          checked={formData.selectedTags.includes(tag.id)}
+                          onChange={() => handleTagChange(tag.id)}
+                        />
+                        <label htmlFor={`tag-${tag.id}`}>
+                          #{tag.name}
+                        </label>
+                      </div>
+                    ))
+                  ) : (
+                    <div style={{ padding: '10px', color: 'var(--text)', opacity: 0.7 }}>
+                      No tags available
                     </div>
-                  ))}
+                  )}
                 </div>
               </div>
             </div>